angular.js - 使用ES3写angular2，注入ngRouter模块报错，该怎么解决？-Questions et réponses sur le réseau chinois PHP

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

répondre à tous(1)

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

Pour des problèmes de mise à niveau npm similaires, la première considération est la dépendance de chaque package d'installation. Le fichier sur lequel vous vous trompez est zone.js, alors concentrez-vous sur la modification de son numéro de version. Définissez le numéro de version de zone.js dans package.json. C'est la valeur par défaut 0.6.12 Si vous obtenez toujours l'erreur, la version correspondante sera 0.6.13 ou supérieure. Pour la version spécifique, allez sur la balise de https://github.com/angular/zo... pour voir. si la dernière version a déjà été testée et qu'une erreur se produit, vous pouvez envisager de consulter la documentation officielle du journal des modifications de 2.0 à 2.1 : https://angular.io/docs/ts/la... Pour la dernière syntaxe, vous ne pouvez étudier que la documentation en anglais vous-même. Si vous souhaitez étudier en profondeur, il est recommandé de lire le journal des modifications du référentiel de code source https://github.com/angular/an..., je. j'espère que cela vous aidera à résoudre des problèmes similaires. Enfin, un conseil, n'effectuez pas de mise à niveau unifiée de vos référentiels dépendants une fois le numéro de version initial. Ne mettez pas à niveau s'il est codé en dur, sinon il sera difficile de nettoyer à l'avenir. insectes. Plus le projet est volumineux et plus il comporte de packages dépendants, plus il sera difficile de dépanner.

Comme +0

Ajouter une réponse