I found an angular2demo (angular2-es5-website-routes) written in ES5 on github. This demo can be run locally, but after I upgraded the angular2 related version to 2.1, I injected the router module that comes with angular2. An error occurred.
zone.js:158 Uncaught Error: Component class0 is not part of any NgModule or the module has not been imported into your module.
My code is as follows:
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"
}
}
大家讲道理2017-05-15 17:09:53
For similar npm upgrade issues, the first consideration is the dependency of each installation package. The file you are wrong about is zone.js, so focus on modifying its version number. Set the version number of zone.js in package.json. It is the default 0.6.12. If you still get the error, the corresponding version will be 0.6.13 or higher. For the specific version, go to the tag of https://github.com/angular/zo... to see if the latest version has been tested before. and an error occurs, you can consider taking a look at the official documentation for the change-log from 2.0 to 2.1: https://angular.io/docs/ts/la... For the latest syntax, you can only study the English documentation yourself. If you want to study in depth It is recommended to read the modification log of the source code repository https://github.com/angular/an..., I hope it will help you solve similar problems. Finally, a word of advice, do not perform a unified upgrade of your dependent repositories. Once the version number is the first Don't upgrade if it's hardcoded, otherwise it will be difficult to clean up future bugs. The larger the project and the more dependent packages it has, the more difficult it will be to troubleshoot.
