Angular 从 1.6.6 升级到 6 时出现 $Injector 错误
$Injector Error on Angular Upgrade from 1.6.6 to 6
我 Angular 使用 Webpack 4 从 Angular.Js 1.6.6 升级到 Angular 6:
import 'core-js/es7/reflect';
import 'zone.js';
import 'reflect-metadata';
import 'rxjs';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule, downgradeComponent, downgradeInjectable, setAngularJSGlobal } from '@angular/upgrade/static';
import { module } from './app.module.ajs';
import './config/routes';
import AppComponent from './components/app/app';
import Application from './directives/application/application';
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
console.log('NgModule');
const appRoutes: Routes = [
];
@NgModule({
declarations: [AppComponent, Application],
entryComponents: [AppComponent],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
UpgradeModule
]
})
class AppModule {
constructor(public upgrade: UpgradeModule) {
console.log('AppModule constructor');
}
ngDoBootstrap() {
console.log('AppModule ngDoBootstrap');
}
}
console.log('setAngularJSGlobal ...');
setAngularJSGlobal(window['angular']);
console.log('setAngularJSGlobal!!!');
import main = require('./main');
console.log('Before bootstrapModule module.name: ', module.name);
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
console.log('Hybrid mode: Angular + Angular.Js');
module.directive('appRoot', downgradeComponent({ component: AppComponent }));
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
console.log('bootstrapModule: ', module.name);
main['launchAngular']();
upgrade.bootstrap(document.body, [module.name], { strictDi: true });
});
创建了自定义别名,添加了正确的 tsconfig 路径,Webpack 构建通过并生成输出,但是当应用程序在浏览器中启动时,控制台中弹出错误消息:ngRoute is missing or incorrect ng module components
哪些操作不正确以及如何解决此错误?
修复了一些 Webpack 别名。替换:Angular-Axios 资源,Angular-[=12= 路由],重构耦合控制器到 components/directives 和服务,摆脱 $rootScope 和魔法发生:升级开始到工作。
我 Angular 使用 Webpack 4 从 Angular.Js 1.6.6 升级到 Angular 6:
import 'core-js/es7/reflect'; import 'zone.js'; import 'reflect-metadata'; import 'rxjs'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { Routes, RouterModule } from '@angular/router'; import { BrowserModule } from '@angular/platform-browser'; import { UpgradeModule, downgradeComponent, downgradeInjectable, setAngularJSGlobal } from '@angular/upgrade/static'; import { module } from './app.module.ajs'; import './config/routes'; import AppComponent from './components/app/app'; import Application from './directives/application/application'; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; console.log('NgModule'); const appRoutes: Routes = [ ]; @NgModule({ declarations: [AppComponent, Application], entryComponents: [AppComponent], imports: [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes), UpgradeModule ] }) class AppModule { constructor(public upgrade: UpgradeModule) { console.log('AppModule constructor'); } ngDoBootstrap() { console.log('AppModule ngDoBootstrap'); } } console.log('setAngularJSGlobal ...'); setAngularJSGlobal(window['angular']); console.log('setAngularJSGlobal!!!'); import main = require('./main'); console.log('Before bootstrapModule module.name: ', module.name); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { console.log('Hybrid mode: Angular + Angular.Js'); module.directive('appRoot', downgradeComponent({ component: AppComponent })); const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; console.log('bootstrapModule: ', module.name); main['launchAngular'](); upgrade.bootstrap(document.body, [module.name], { strictDi: true }); });
创建了自定义别名,添加了正确的 tsconfig 路径,Webpack 构建通过并生成输出,但是当应用程序在浏览器中启动时,控制台中弹出错误消息:ngRoute is missing or incorrect ng module components 哪些操作不正确以及如何解决此错误?
修复了一些 Webpack 别名。替换:Angular-Axios 资源,Angular-[=12= 路由],重构耦合控制器到 components/directives 和服务,摆脱 $rootScope 和魔法发生:升级开始到工作。