Angular 从 1.6.6 升级到 6 时出现 $Injector 错误

Posted 2023-02-19

【中文标题】Angular 从 1.6.6 升级到 6 时出现 $Injector 错误

【英文标题】：$Injector Error on Angular Upgrade from 1.6.6 to 6

【发布时间】：2019-02-06 16:04:49

【问题描述】：

我使用 Webpack 4 从 Angular.Js 1.6.6 升级到 Angular 6：

导入'core-js/es7/reflect'； 导入'zone.js'； 导入“反射元数据”； 导入'rxjs'； 从'@angular/core'导入 NgModule ； 从“@angular/forms”导入 FormsModule ； 从'@angular/router'导入路由，RouterModule； 从“@angular/platform-b​​rowser”导入 BrowserModule ； 导入 UpgradeModule, downgradeComponent, downgradeInjectable, setAngularJSGlobal from '@angular/upgrade/static'; 从'./app.module.ajs'导入模块； 导入'./config/routes'； 从'./components/app/app'导入AppComponent； 从'./directives/application/application'导入应用程序； 从“@angular/platform-b​​rowser-dynamic”导入 platformBrowserDynamic ； console.log('NgModule'); 常量 appRoutes: 路由 = [ ]; @NgModule( 声明：[AppComponent，应用程序]， entryComponents：[AppComponent]， 进口：[ 浏览器模块， 表单模块， RouterModule.forRoot(appRoutes), 升级模块 ] ) 类 AppModule 构造函数（公共升级：UpgradeModule） console.log('AppModule 构造函数'); ngDoBootstrap() console.log('AppModule ngDoBootstrap'); console.log('setAngularJSGlobal ...'); setAngularJSGlobal(window['angular']); console.log('setAngularJSGlobal!!!'); 进口主 = 要求（'./main'）; console.log('在 bootstrapModule 之前的 module.name:', module.name); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => console.log('混合模式：Angular + Angular.Js'); module.directive('appRoot', downgradeComponent( component: AppComponent )); const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; console.log('bootstrapModule:', module.name); 主要['launchAngular'](); upgrade.bootstrap(document.body, [module.name], strictDi: true ); );

创建了自定义别名，为 tsconfig 添加了正确的路径，Webpack 构建通过并生成输出，但是当应用程序在浏览器中启动时，控制台中弹出错误消息：ngRoute is missing or incorrect ng module components 哪些操作未正确完成以及如何解决此错误？

【参考方案1】：

修复了一些 Webpack 别名。替换：使用 Axios 的 Angular-Resource，使用 UI-Router/Angular-Hybrid 的 Angular-Route，将控制器重构为组件/指令和服务，摆脱 $rootScope 并发生魔术：升级开始工作。

【讨论】：

是否有任何文件要做，我也面临同样的问题，请帮助我

@Venkatsmart 检查此文档，例如：angular.io/api/upgrade/static/downgradeModuleangular.io/api/upgrade/static/UpgradeModulewebpack.js.org/configuration/resolve