angular.js - 使用ES3写angular2，注入ngRouter模块报错，该怎么解决？-PHP中国語ネットワークQ&A

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

全員に返信(1)

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

同様の npm アップグレードの問題については、最初に考慮すべきは、各インストールパッケージの依存関係です。そのため、package.json 内のzone.js のバージョン番号を変更することに重点を置いてください。バージョン番号はデフォルトの 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. の修正ログを読むことをお勧めします。最後に、バージョン番号が最初にハードコーディングされている場合は、アップグレードを行わないでください。そうしないと、クリーンアップが困難になります。その後のバグをアップします。プロジェクトが大きくなり、依存するパッケージが増えるほど、トラブルシューティングが難しくなります。

いいねを押す +0

返信を追加