Angular 2 - Uncaught (in promise): ReferenceError: System is not defined答案

【问题标题】：Angular 2 - Uncaught (in promise): ReferenceError: System is not definedAngular 2 - Uncaught (in promise): ReferenceError: System is not defined
【发布时间】：2016-11-08 21:59:29
【问题描述】：

我的英语很差，对此我深表歉意:)

我在使用 Angular 2 时遇到问题。我会创建一个登录表单，但在调用 Web 服务并获得响应后，我在下面出现此错误。

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

此错误发生在我的路由上的 canLoad 操作之后。

我用的是angular 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)

你有回复我吗？

【问题讨论】：

您的 html 根页面中是否引用了您的 system.js 文件？以<script src="https://npmcdn.com/systemjs@0.19.31/dist/system.js"></script> 为例
好的，谢谢我添加了这个：
这为您解决了问题？
是的，但现在又出现了一个新问题

标签： angular referenceerror

【解决方案1】：

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

在 webpack 中你不需要添加 systemjs。

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

要使用这个路由器加载器，你必须安装它：

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

你必须像这样在你的 webpack 配置中实现 'angular2-router-loader'：

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

【讨论】：

【解决方案2】：

~~遇到了同样的问题。以下是我的关键：~~

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

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 {

}

【讨论】：

【解决方案3】：

您只需将属性 pathMatch: 'full' 添加到您的空延迟加载路由。如下所示：

  {
      path: '',
      loadChildren: './modules/home-page/home-page.module#HomePageModule',
      pathMatch: 'full',
      data: {
       id: 'homePage'
      }
 }

享受吧！

奥马尔

【讨论】：