在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="/">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="icon" href="favicon.ico" title="favicon" charset="utf-8">
</head>
<body>
<app>Loading...</app>
<!-- Dependencies -->
<!-- <script src="//unpkg.com/rxjs@5.0.0-beta.7/bundles/Rx.umd.js" charset="utf-8"></script>
<script src="//unpkg.com/reflect-metadata@0.1.3" charset="utf-8"></script>
<script src="//unpkg.com/zone.js@0.6.12" charset="utf-8"></script>
<script src="//unpkg.com/@angular/core@2.0.0-rc.2/bundles/core.umd.js" charset="utf-8"></script>
<script src="//unpkg.com/@angular/common@2.0.0-rc.2/bundles/common.umd.js" charset="utf-8"></script>
<script src="//unpkg.com/@angular/compiler@2.0.0-rc.2/bundles/compiler.umd.js" charset="utf-8"></script>
<script src="//unpkg.com/@angular/platform-browser@2.0.0-rc.2/bundles/platform-browser.umd.js" charset="utf-8"></script>
<script src="//unpkg.com/@angular/platform-browser-dynamic@2.0.0-rc.2/bundles/platform-browser-dynamic.umd.js" charset="utf-8"></script>
<script src="//unpkg.com/@angular/router@2.0.0-rc.2/bundles/router.umd.js" charset="utf-8"></script> -->
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<!-- <script src="//unpkg.com/rxjs@5.0.0-beta.7/bundles/Rx.umd.js" charset="utf-8"></script> -->
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<!-- <script src="//unpkg.com/reflect-metadata@0.1.3" charset="utf-8"></script> -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<!-- <script src="//unpkg.com/zone.js@0.6.12" charset="utf-8"></script> -->
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<!-- <script src="//unpkg.com/@angular/core@2.0.0-rc.2/bundles/core.umd.js" charset="utf-8"></script> -->
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<!-- <script src="//unpkg.com/@angular/common@2.0.0-rc.2/bundles/common.umd.js" charset="utf-8"></script> -->
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<!-- <script src="//unpkg.com/@angular/compiler@2.0.0-rc.2/bundles/compiler.umd.js" charset="utf-8"></script> -->
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<!-- <script src="//unpkg.com/@angular/platform-browser@2.0.0-rc.2/bundles/platform-browser.umd.js" charset="utf-8"></script> -->
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<!-- <script src="//unpkg.com/@angular/platform-browser-dynamic@2.0.0-rc.2/bundles/platform-browser-dynamic.umd.js" charset="utf-8"></script> -->
<script src="node_modules/@angular/router/bundles/router.umd.js"></script>
<!-- <script src="//unpkg.com/@angular/router@2.0.0-rc.2/bundles/router.umd.js" charset="utf-8"></script> -->
<!-- Our Code -->
<script src="app/common/state.service.js" charset="utf-8"></script>
<script src="app/common/experiments.service.js" charset="utf-8"></script>
<script src="app/home/home.component.js" charset="utf-8"></script>
<script src="app/about/about.component.js" charset="utf-8"></script>
<script src="app/experiments/experiment-details/experiment.detail.component.js" charset="utf-8"></script>
<script src="app/experiments/experiments.component.js" charset="utf-8"></script>
<script src="app/app.component.js" charset="utf-8"></script>
<script src="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"
}
}
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
비슷한 npm 업그레이드 문제의 경우 가장 먼저 고려해야 할 사항은 각 설치 패키지의 종속성입니다. 잘못된 파일은 zone.js이므로 해당 버전 번호를 수정하는 데 집중하세요. package.json. 기본값입니다
0.6.12. 그래도 오류가 발생하면 해당 버전은 0.6.13 이상입니다. 특정 버전은 https://github.com/angular/zo... 태그로 이동하여 확인하세요. 이전에 최신 버전을 테스트했는데 오류가 발생했다면 2.0에서 2.1로의 변경 로그에 대한 공식 문서(https://angular.io/docs/ts/la...)를 살펴보세요. 최신 구문은 영어 문서만 직접 공부하시면 됩니다. 심도 깊게 공부하고 싶다면 소스코드 저장소 https://github.com/angular/an... 의 수정 로그를 읽어보시는 걸 추천합니다. 유사한 문제를 해결하는 데 도움이 되기를 바랍니다. 마지막으로, 종속 저장소의 통합 업그레이드를 수행하지 마십시오. 일단 버전 번호가 하드 코딩되어 있으면 업그레이드하지 마십시오. 향후 버그를 정리하세요. 프로젝트 규모가 크고 종속 패키지가 많을수록 문제 해결이 더 어려워집니다.