在github上面找了一个ES5写的angular2demo(angular2-es5-website-routes),这个demo在本地是可以运行的,但我升级了angular2相关版本到2.1后,注入angular2自带的router模块时报错。
zone.js:158 Uncaught Error: Component class0 is not part of any NgModule or the module has not been imported into your module.
我的代码如下:
boot.js
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
// ng.platformBrowserDynamic.bootstrap(app.AppComponent, [ng.router.ROUTER_PROVIDERS]);
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));
app.component.js
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
// directives: [ ng.router.ROUTER_DIRECTIVES ],
providers: [ app.StateService, app.ExperimentsService ]
})
.Class({
constructor: function() {}
});
app.routing = [
{path: '/', component: app.HomeComponent},
{path: '/home', component: app.HomeComponent},
{path: '/about', component: app.AboutComponent},
{path: '/experiments', component: app.ExperimentsComponent},
{path: '/*', component: app.HomeComponent }
];
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule, ng.router.RouterModule.forRoot(app.routing) ],
declarations: [ app.AppComponent ],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
index.html
Loading...
package.json
{
"name": "fem-ng2-simple-app",
"version": "0.0.1",
"license": "SEE LICENSE IN LICENSE",
"repository": {
"type": "git",
"url": "https://github.com/onehungrymind/fem-ng2-simple-app/"
},
"scripts": {
"start": "lite-server",
"test": "karma start"
},
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"@angular/upgrade": "~2.1.0",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2"
}
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
类似的 npm 升级问题首要考虑的是各个安装包的依赖问题,你抱错的文件是 zone.js 就着重对着它的版本号做修改,在 package.json 里把 zone.js 的版本号设置为默认的
0.6.12,依然抱错的话对应的给到 0.6.13 或更高,具体的版本去 https://github.com/angular/zo... 的 tag 里看,如果最新版本之前都测试过并且出错,你可以考虑看看官方文档对于 2.0 到 2.1 的 change-log: https://angular.io/docs/ts/la... 最新的句法只能自己研究英文文档了,想深入研究的话建议看源码仓库的修改日志 https://github.com/angular/an...,希望有助于你解决类似问题,最后忠告,不要对你的依赖仓库进行统一的升级,一但版本号最初写死了就不要升级了,不然之后的 bug 很难清理。项目越大依赖包越多就越难排查。