角2 - 未捕获的（以诺）的ReferenceError：系统没有定义

Question

我的英语很差，我道歉这个:)

我有角2个问题我想创建一个登录形式，但电话后Web服务并获得响应我在下面有这个错误。

要阻止和授权用户在我的应用程序我基于auth-guard.service.ts的角度教程。

此错误出现在我的路由上的canLoad操作之后。

我使用角2最新版本，我的项目是基于webpack。

我的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" 
    } 

我的错误是：

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) 

你有没有为我的回应？

Answer 1

这个问题的Angular 2 - Uncaught (in promise): Error: XHR error (404 Not Found)

潜在的问题在的WebPack你不需要添加systemjs。

真正的问题是路由的问题......为了这个解决：

要使用该路由器装载器必须安装它：

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

你必须工具“angular2路由器装载机”在你的webpack配置中是这样的：

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

Answer 2

有同样的问题。以下是我的关键：

没关系。我可以发誓它的工作。当我使用非惰性路由时，我的组件可以通过Angular Universal加载。我有{ path: 'lazy', component: LazyViewComponent }而不是懒惰的路线，并且我注意到lazy.module.ts中的我的RouterModule未导出。所以我再次尝试了懒惰的路线，现在用RouterModule出口，我可以发誓它的工作。然后，我删除了angular2-router-loader以查看是否需要这个，并且是，然后测试是否需要模块的本地路由，结果如此。在interwebs上分享我的发现，回来发现它不起作用。我想现在就让我们坚持使用非懒惰路线。

webpack.config.js应包括既@ngtools/webpack和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' } 
    ] 
    } 
}; 

路由模块需要使用到模块的绝对路径：

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 { } 

和关键的是，懒惰的模块需要出口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 { 

}