angulaire 2 - Uncaught (en promesse): ReferenceError: Le système n'est pas défini

Question

mon anglais est pauvre, mes excuses pour cette :)

J'ai un problème avec angulaire 2. Je voudrais créer un formulaire de connexion, mais après appel service Web et obtenir une réponse j'ai eu cette erreur ci-dessous.

Pour les utilisateurs bloqués et autorisés sur mon application, je suis basé sur auth-guard.service.ts de tutoriel angulaire.

Cette erreur est survenue après l'action canLoad sur mon routage.

J'utilise angulaire 2 dernière version, mon projet est basé sur webpack.

Ma configuration est package.json:

"dependencies": { 
    "@angular/common": "~2.1.1", 
    "@angular/compiler": "~2.1.1", 
    "@angular/core": "~2.1.1", 
    "@angular/forms": "~2.1.1", 
    "@angular/http": "~2.1.1", 
    "@angular/platform-browser": "~2.1.1", 
    "@angular/platform-browser-dynamic": "~2.1.1", 
    "@angular/router": "~3.1.1", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "^0.6.25" 
    }, 
    "devDependencies": { 
    "@types/core-js": "^0.9.34", 
    "@types/node": "^6.0.45", 
    "@types/jasmine": "^2.5.35", 
    "angular2-template-loader": "^0.4.0", 
    "awesome-typescript-loader": "^2.2.4", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.8.5", 
    "html-loader": "^0.4.3", 
    "html-webpack-plugin": "^2.15.0", 
    "jasmine-core": "^2.4.1", 
    "karma": "^1.2.0", 
    "karma-jasmine": "^1.0.2", 
    "karma-phantomjs-launcher": "^1.0.2", 
    "karma-sourcemap-loader": "^0.3.7", 
    "karma-webpack": "^1.8.0", 
    "null-loader": "^0.1.1", 
    "phantomjs-prebuilt": "^2.1.7", 
    "raw-loader": "^0.5.1", 
    "rimraf": "^2.5.2", 
    "style-loader": "^0.13.1", 
    "typescript": "^2.0.3", 
    "webpack": "^1.13.0", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-merge": "^0.14.0" 
    } 

Mon erreur est:

core.umd.js?e2a5:3004 EXCEPTION: Uncaught (in promise): ReferenceError: System is not defined 
ReferenceError: System is not defined 
    at SystemJsNgModuleLoader.loadAndCompile (eval at <anonymous> (http://localhost:9090/vendor.js:100:2), <anonymous>:7151:20) 
    at SystemJsNgModuleLoader.load (eval at <anonymous> (http://localhost:9090/vendor.js:100:2), <anonymous>:7144:64) 
    at RouterConfigLoader.loadModuleFactory (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:168:76) 
    at RouterConfigLoader.load (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:160:52) 
    at MergeMapSubscriber.eval [as project] (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:904:82) 
    at MergeMapSubscriber._tryNext (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:110:27) 
    at MergeMapSubscriber._next (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:100:18) 
    at MergeMapSubscriber.Subscriber.next (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:89:18) 
    at EverySubscriber.notifyComplete (eval at <anonymous> (http://localhost:9090/vendor.js:367:2), <anonymous>:47:26) 
    at EverySubscriber._complete (eval at <anonymous> (http://localhost:9090/vendor.js:367:2), <anonymous>:64:14) 
    at EverySubscriber.Subscriber.complete (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:114:18) 
    at MergeAllSubscriber._complete (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:94:30) 
    at MergeAllSubscriber.Subscriber.complete (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:114:18) 
    at MapSubscriber.Subscriber._complete (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:132:26) 
    at MapSubscriber.Subscriber.complete (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:114:18) 
    at ArrayObservable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:289:2), <anonymous>:116:24) 
    at ArrayObservable.Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:56:27) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MergeAllOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:63:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at EveryOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:367:2), <anonymous>:27:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at CatchOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:391:2), <anonymous>:30:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Object.subscribeToResult (eval at <anonymous> (http://localhost:9090/vendor.js:349:2), <anonymous>:21:27) 
    at MergeAllSubscriber._next (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:85:42) 
    at MergeAllSubscriber.Subscriber.next (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:89:18) 
    at MapSubscriber._next (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:83:26) 
    at MapSubscriber.Subscriber.next (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:89:18) 
    at ArrayObservable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:289:2), <anonymous>:114:28) 
    at ArrayObservable.Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:56:27) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MergeAllOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:63:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at FirstOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:403:2), <anonymous>:70:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at CatchOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:391:2), <anonymous>:30:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Object.subscribeToResult (eval at <anonymous> (http://localhost:9090/vendor.js:349:2), <anonymous>:21:27) 
    at MergeAllSubscriber._next (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:85:42) 
    at MergeAllSubscriber.Subscriber.next (eval at <anonymous> (http://localhost:9090/vendor.js:130:2), <anonymous>:89:18) 
    at ScalarObservable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:295:2), <anonymous>:49:24) 
    at ScalarObservable.Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:56:27) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MergeAllOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:379:2), <anonymous>:63:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at LastOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:415:2), <anonymous>:38:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at CatchOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:391:2), <anonymous>:30:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:373:2), <anonymous>:54:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at Observable._subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:114:28) 
    at MergeMapOperator.call (eval at <anonymous> (http://localhost:9090/vendor.js:343:2), <anonymous>:75:23) 
    at Observable.subscribe (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:53:22) 
    at eval (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:87:38) 
    at new ZoneAwarePromise (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:518:29) 
    at Observable.forEach (eval at <anonymous> (http://localhost:9090/vendor.js:112:2), <anonymous>:86:16) 
    at eval (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:2630:22) 
    at new ZoneAwarePromise (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:518:29) 
    at Router.runNavigate (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:2595:20) 
    at eval (eval at <anonymous> (http://localhost:9090/vendor.js:253:2), <anonymous>:2586:71) 
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:232:26) 
    at Object.onInvoke (eval at <anonymous> (http://localhost:9090/vendor.js:100:2), <anonymous>:6206:41) 
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:231:32) 
    at Zone.run (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:114:43) 
    at eval (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:502:57) 
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:265:35) 
    at Object.onInvokeTask (eval at <anonymous> (http://localhost:9090/vendor.js:100:2), <anonymous>:6197:41) 
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:264:40) 
    at Zone.runTask (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:154:47) 
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:401:35) 
    at XMLHttpRequest.ZoneTask.invoke (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:339:25) 

Avez-vous une réponse pour moi?

Answer 1

Ce problème est un problème sous-jacent de Angular 2 - Uncaught (in promise): Error: XHR error (404 Not Found)

En webpack vous n'avez pas besoin d'ajouter systemjs.

Le vrai problème est un problème de routage ... Pour résoudre ceci:

Pour utiliser ce chargeur de routeur, vous devez l'installer:

npm install angular2-router-loader -- save-dev 

Et vous devez outils de angular2-routeur-loader ' dans votre config webpack comme ceci:

loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader', 'angular2-template-loader','angular2-router-loader'] 
     }, 
... 
], 

Answer 2

eu le même problème. Ce qui suit était la clé pour moi:

Nevermind. J'aurais pu jurer que ça a marché. Lorsque j'utilise des routes non paresseuses, mes composants se chargent correctement avec Angular Universal. J'ai eu { path: 'lazy', component: LazyViewComponent } au lieu de la route paresseuse, et j'ai remarqué que mon RouterModule dans lazy.module.ts n'a pas été exporté. J'ai donc essayé à nouveau la route paresseuse, maintenant avec RouterModule exporté, et j'aurais juré que cela a fonctionné. J'ai ensuite supprimé angular2-router-loader pour voir si cela était nécessaire, et il a été, puis testé si un itinéraire local pour le module était nécessaire, et il l'était. Partagé mes conclusions sur les interwebs, est revenu pour trouver que ça ne fonctionnait pas. Je suppose que nous allons rester avec des routes non paresseux pour l'instant.

webpack.config.js doit inclure à la fois @ngtools/webpack et angular2-router-loader:

const ngtools = require('@ngtools/webpack'); 
const path = require('path'); 
const nodeExternals = require('webpack-node-externals'); 

module.exports = { 
    entry: { 
    main: './src/main.server.ts' 
    }, 
    resolve: { 
    extensions: ['.ts', '.js'] 
    }, 
    target: 'node', 
    externals: [nodeExternals({ 
    modulesFromFile: true 
    })], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: '[name].js' 
    }, 
    plugins: [ 
    new ngtools.AotPlugin({ 
     tsConfigPath: './tsconfig.json', 
    }) 
    ], 
    module: { 
    rules: [ 
     { 
     test: /\.ts$/, 
     loaders: [ 
      '@ngtools/webpack', 
      'angular2-router-loader' 
     ], 
     }, 
     { 
     test: /\.scss$/, 
     use: ['raw-loader', 'sass-loader'] 
     }, 
     { test: /\.css$/, loader: 'raw-loader' }, 
     { test: /\.html$/, loader: 'raw-loader' } 
    ] 
    } 
}; 

Le module de calcul d'itinéraire doit utiliser un chemin absolu au module:

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { HomeViewComponent } from './home-view/home-view.component'; 

const routes: Routes = [ 
    { path: '', component: HomeViewComponent, pathMatch: 'full'}, 
    { path: 'lazy', loadChildren: 'app/lazy.module#LazyModule'} 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

Et surtout, le module paresseux doit exporter le RouterModule

import { NgModule, Component } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

@Component({ 
    selector: 'os-lazy-view', 
    template: `<h3>i'm lazy</h3>`, 
}) 
export class LazyViewComponent { 
} 

@NgModule({ 
    declarations: [LazyViewComponent], 
    imports: [ 
    RouterModule.forChild([ 
     { path: '', component: LazyViewComponent, pathMatch: 'full' }, 
    ]), 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class LazyModule { 

}