Angular 4升级到5后出现worker_component_1未定义错误

嘿，我来帮你排查这个升级后碰到的问题！这个错误看起来是运行时找不到WorkerComponent的引用，结合你的情况，咱们一步步来解决：

1. 先盯紧app.module.ts第18行的导入 #

错误直接指向了app.module.ts的18行，这90%是WorkerComponent的导入或引用出了问题：

• 先去组件文件里确认：是不是正确导出了WorkerComponent类？比如有没有写export class WorkerComponent { ... }，别漏了export关键字！
• 检查导入路径：比如你写的import { WorkerComponent } from './xxx/worker.component';，路径是不是和实际文件位置完全匹配？相对路径写错是常犯的小错误。
• 核对类名拼写：导入时的类名和组件文件里的类名是不是完全一致？比如别把WorkerComponent写成Workercomponent（小写c这种细节很容易坑人）。

2. 统一Angular依赖版本 #

看你的package.json，发现几个问题：

• 部分Angular包版本不统一（比如@angular/core是^5.0.0，但@angular/forms已经升到^5.2.1了）
• @angular/language-service还停留在4.x版本，这和Angular5肯定不兼容

咱们把所有Angular相关依赖统一升到5.x的最新稳定版（Angular5的最后一个版本是5.2.11），执行这条命令：

npm install @angular/animations@^5.2.11 @angular/common@^5.2.11 @angular/compiler@^5.2.11 @angular/compiler-cli@^5.2.11 @angular/core@^5.2.11 @angular/forms@^5.2.11 @angular/http@^5.2.11 @angular/platform-browser@^5.2.11 @angular/platform-browser-dynamic@^5.2.11 @angular/platform-server@^5.2.11 @angular/router@^5.2.11 @angular/language-service@^5.2.11 --save

3. 确认TypeScript版本匹配 #

Angular 5要求TypeScript版本在2.4.2到2.6.x之间，你现在devDependencies里是2.6.2虽然兼容，但之前你执行过--save-exact安装2.4.2，版本来回切换可能导致编译后的代码有问题。如果想严格匹配官方推荐的版本，执行：

npm install typescript@2.4.2 --save-exact --save-dev

4. 彻底清理依赖缓存再重装 #

升级过程中旧的依赖缓存很容易搞事情，按这个步骤来：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json（如果用yarn的话删yarn.lock）
• 执行npm install重新安装所有依赖

5. 禁用缓存启动项目 #

有时候Webpack的旧打包缓存会导致运行时错误，启动项目的时候加上--no-cache参数：

ng serve --no-cache

6. 最后检查组件的NgModule声明 #

别忘了确认WorkerComponent已经在app.module.ts的declarations数组里正确声明了，比如：

@NgModule({
  declarations: [
    AppComponent,
    WorkerComponent // 一定要确保这个组件在这里！
  ],
  // ...其他配置项
})
export class AppModule { }

如果以上步骤都试过还是不行，可以试试重启你的IDE/编辑器（有时候编辑器的缓存会导致导入识别错误），或者删除.angular-cli.json里的缓存配置再重新构建。

内容的提问来源于stack exchange，提问作者Johnny Doe