angular.js - 使用ES3写angular2，注入ngRouter模块报错，该怎么解决？-Soal Jawab Rangkaian PHP Cina

在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"
  }
}

membalas semua(1)

大家讲道理2017-05-15 17:09:53 Tingkat 1

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.

Suka +0

Tambah Balasan