- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
Saya menjumpai angular2demo (angular2-es5-website-routes) yang ditulis dalam ES5 pada github Demo ini boleh dijalankan secara tempatan, tetapi selepas saya menaik taraf versi berkaitan angular2 kepada 2.1, saya menyuntik modul penghala yang disertakan dengan angular2. Ralat berlaku.
zone.js:158 Uncaught Error: Component class0 is not part of any NgModule or the module has not been imported into your module.
Kod saya adalah seperti berikut:
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>
pakej.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
Untuk isu peningkatan npm yang serupa, pertimbangan pertama ialah kebergantungan setiap pakej pemasangan Fail yang anda salah ialah zone.js, jadi fokus pada mengubah nombor versinya. Ia adalah lalai 0.6.12 Jika anda masih mendapat ralat, versi yang sepadan ialah 0.6.13 atau lebih tinggi Untuk versi tertentu, pergi ke teg https://github.com/angular/zo... untuk melihat jika versi terkini telah diuji sebelum ini dan ralat berlaku, anda boleh mempertimbangkan untuk melihat dokumentasi rasmi untuk log perubahan dari 2.0 hingga 2.1: https://angular.io/docs/ts/la... Untuk sintaks terkini, anda hanya boleh mengkaji sendiri dokumentasi bahasa Inggeris Jika anda ingin mengkaji secara mendalam Adalah disyorkan untuk membaca log pengubahsuaian repositori kod sumber https://github.com/angular/an..., saya. harap ia akan membantu anda menyelesaikan masalah yang sama Akhir sekali, nasihat, jangan lakukan peningkatan bersatu untuk repositori bergantung anda Setelah nombor versi pada mulanya Jangan naik taraf jika ia dikodkan, jika tidak, sukar untuk membersihkan masa hadapan. pepijat. Semakin besar projek dan semakin banyak pakej yang bergantung padanya, semakin sukar untuk menyelesaikan masalah.
