Angular 4中如何从外部JavaScript创建AppController对象？

我来帮你排查这个AppController未定义的问题，咱们一步步来解决：

1. 检查脚本加载顺序是否正确 #

BlockFactory的AppController依赖Blockly核心库，如果你只引入了app_controller.js但没先加载Blockly的相关脚本，就会导致AppController无法被正确初始化。你需要在.angular-cli.json的scripts数组里把Blockly的核心文件放在app_controller.js前面，比如：

"scripts": [
  "./assets/blockly/blockly_compressed.js",
  "./assets/blockly/blocks_compressed.js",
  "./assets/blockly/javascript_compressed.js",
  "./assets/blockly/demos/blockfactory/app_controller.js"
]

（根据你实际的Blockly文件路径调整顺序，确保所有依赖项先于app_controller.js加载）

2. 确认全局变量apc是否正确暴露 #

打开你的app_controller.js文件，检查末尾是否有把AppController挂载到全局window对象的代码。如果原文件没有，你需要手动添加：

// 在app_controller.js的最后添加这段代码
window.apc = window.apc || {};
window.apc.AppController = AppController;

因为Angular CLI加载外部脚本时，如果脚本没有主动暴露全局变量，组件里的declare var apc:any就找不到对应的对象。

3. 避免在组件初始化阶段过早创建实例 #

不要在组件的constructor里直接创建AppController实例——此时外部脚本可能还没完全加载完成。改用ngAfterViewInit生命周期钩子（这个阶段DOM和外部资源都已加载完毕）：

import { Component, AfterViewInit } from '@angular/core';

declare var apc: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  blocklyFactory: any;

  ngAfterViewInit(): void {
    this.blocklyFactory = new apc.AppController();
  }
}

4. 验证脚本路径是否准确 #

仔细核对.angular-cli.json里的脚本路径：

• 路径是相对于项目根目录的，确认./assets/blockly/demos/blockfactory/app_controller.js这个文件确实存在
• 检查文件名的大小写（比如是不是AppController.js而不是小写的app_controller.js），Linux/macOS系统会严格区分大小写

5. 清理缓存并重启Angular CLI服务 #

有时候Angular CLI的缓存会导致脚本加载不更新，你可以：

• 停止当前的ng serve服务
• 删除项目根目录下的node_modules/.cache文件夹
• 重新启动ng serve

内容的提问来源于stack exchange，提问作者Rolando Ismael Azcorra Medina