问题描述
在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
<!DOCTYPE html><html><head> <base href='https://www.6hehe.com/'> <link href='https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css' rel='stylesheet'> <link rel='icon' href='https://www.6hehe.com/wenda/favicon.ico' charset='utf-8'></head><body> <app>Loading...</app> <!-- Dependencies --> <!-- <script src='https://unpkg.com/rxjs@5.0.0-beta.7/bundles/Rx.umd.js' charset='utf-8'></script> <script src='https://unpkg.com/reflect-metadata@0.1.3' charset='utf-8'></script> <script src='https://unpkg.com/zone.js@0.6.12' charset='utf-8'></script> <script src='https://unpkg.com/@angular/core@2.0.0-rc.2/bundles/core.umd.js' charset='utf-8'></script> <script src='https://unpkg.com/@angular/common@2.0.0-rc.2/bundles/common.umd.js' charset='utf-8'></script> <script src='https://unpkg.com/@angular/compiler@2.0.0-rc.2/bundles/compiler.umd.js' charset='utf-8'></script> <script src='https://unpkg.com/@angular/platform-browser@2.0.0-rc.2/bundles/platform-browser.umd.js' charset='utf-8'></script> <script src='https://unpkg.com/@angular/platform-browser-dynamic@2.0.0-rc.2/bundles/platform-browser-dynamic.umd.js' charset='utf-8'></script> <script src='https://unpkg.com/@angular/router@2.0.0-rc.2/bundles/router.umd.js' charset='utf-8'></script> --> <script src='https://www.6hehe.com/wenda/node_modules/rxjs/bundles/Rx.js'></script> <!-- <script src='https://unpkg.com/rxjs@5.0.0-beta.7/bundles/Rx.umd.js' charset='utf-8'></script> --> <script src='https://www.6hehe.com/wenda/node_modules/reflect-metadata/Reflect.js'></script> <!-- <script src='https://unpkg.com/reflect-metadata@0.1.3' charset='utf-8'></script> --> <script src='https://www.6hehe.com/wenda/node_modules/zone.js/dist/zone.js'></script> <!-- <script src='https://unpkg.com/zone.js@0.6.12' charset='utf-8'></script> --> <script src='https://www.6hehe.com/wenda/node_modules/@angular/core/bundles/core.umd.js'></script> <!-- <script src='https://unpkg.com/@angular/core@2.0.0-rc.2/bundles/core.umd.js' charset='utf-8'></script> --> <script src='https://www.6hehe.com/wenda/node_modules/@angular/common/bundles/common.umd.js'></script> <!-- <script src='https://unpkg.com/@angular/common@2.0.0-rc.2/bundles/common.umd.js' charset='utf-8'></script> --> <script src='https://www.6hehe.com/wenda/node_modules/@angular/compiler/bundles/compiler.umd.js'></script> <!-- <script src='https://unpkg.com/@angular/compiler@2.0.0-rc.2/bundles/compiler.umd.js' charset='utf-8'></script> --> <script src='https://www.6hehe.com/wenda/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js'></script> <!-- <script src='https://unpkg.com/@angular/platform-browser@2.0.0-rc.2/bundles/platform-browser.umd.js' charset='utf-8'></script> --> <script src='https://www.6hehe.com/wenda/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js'></script> <!-- <script src='https://unpkg.com/@angular/platform-browser-dynamic@2.0.0-rc.2/bundles/platform-browser-dynamic.umd.js' charset='utf-8'></script> --> <script src='https://www.6hehe.com/wenda/node_modules/@angular/router/bundles/router.umd.js'></script> <!-- <script src='https://unpkg.com/@angular/router@2.0.0-rc.2/bundles/router.umd.js' charset='utf-8'></script> --> <!-- Our Code --> <script src='https://www.6hehe.com/wenda/app/common/state.service.js' charset='utf-8'></script> <script src='https://www.6hehe.com/wenda/app/common/experiments.service.js' charset='utf-8'></script> <script src='https://www.6hehe.com/wenda/app/home/home.component.js' charset='utf-8'></script> <script src='https://www.6hehe.com/wenda/app/about/about.component.js' charset='utf-8'></script> <script src='https://www.6hehe.com/wenda/app/experiments/experiment-details/experiment.detail.component.js' charset='utf-8'></script> <script src='https://www.6hehe.com/wenda/app/experiments/experiments.component.js' charset='utf-8'></script> <script src='https://www.6hehe.com/wenda/app/app.component.js' charset='utf-8'></script> <script src='https://www.6hehe.com/wenda/app/boot.js' charset='utf-8'></script></body></html>
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' }}
问题解答
回答1：类似的 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 很难清理。项目越大依赖包越多就越难排查。
