Angular 2 - Uncaught (in promise): ReferenceError: System is not defined
Angular 2 - Uncaught (in promise): ReferenceError: System is not defined
我的英语很差，对此我深表歉意:)
我遇到了 angular 2 的问题。我会创建一个登录表单，但在调用 Web 服务并获得响应后，我遇到了以下错误。
为了在我的应用程序上阻止和授权用户，我基于 angular 教程的 auth-guard.service.ts。
这个错误发生在我的路由上的 canLoad 操作之后。
我用的是angular2最新版本，我的项目是基于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)
你有回复我吗？
这个问题是
的一个潜在问题
在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']
},
...
],
有同样的问题。以下是我的关键：
没关系。我可以发誓它有效。当我使用非惰性路由时，我的组件可以很好地加载 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 {
}
您只需将 属性 路径匹配：'full' 添加到下面的空延迟加载 route.Like 中：
{
path: '',
loadChildren: './modules/home-page/home-page.module#HomePageModule',
pathMatch: 'full',
data: {
id: 'homePage'
}
}
尽情享受吧！
奥马尔
我的英语很差，对此我深表歉意:)
我遇到了 angular 2 的问题。我会创建一个登录表单，但在调用 Web 服务并获得响应后，我遇到了以下错误。
为了在我的应用程序上阻止和授权用户，我基于 angular 教程的 auth-guard.service.ts。
这个错误发生在我的路由上的 canLoad 操作之后。
我用的是angular2最新版本，我的项目是基于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)
你有回复我吗？
这个问题是
在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']
},
...
],
有同样的问题。以下是我的关键：
没关系。我可以发誓它有效。当我使用非惰性路由时，我的组件可以很好地加载 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 {
}
您只需将 属性 路径匹配：'full' 添加到下面的空延迟加载 route.Like 中：
{
path: '',
loadChildren: './modules/home-page/home-page.module#HomePageModule',
pathMatch: 'full',
data: {
id: 'homePage'
}
}
尽情享受吧！
奥马尔