recherche

Maison  >  Questions et réponses  >  le corps du texte

angulaire.js - Utiliser ES3 pour écrire angulaire2 et injecter le module ngRouter signale une erreur. Comment le résoudre?

J'ai trouvé une démo angulaire2 (angular2-es5-website-routes) écrite en ES5 sur github, mais après avoir mis à niveau la version associée à angulaire2 vers 2.1, j'ai injecté le module de routeur fourni avec angulaire2. Une erreur s'est produite. 

zone.js:158 Uncaught Error: Component class0 is not part of any NgModule or the module has not been imported into your module.

Mon code est le suivant :

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"
  }
}
ringa_leeringa_lee2778 Il y a quelques jours735

répondre à tous(1)je répondrai

  • 大家讲道理

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

    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.

    répondre
    0
  • Annulerrépondre