Angular 4通用延迟加载错误
我已经创建了一个新的Angular CLI项目，以了解如何使用Angular Universal启用服务器端渲染。
我已经设置好了，一切都很好，但我决定懒加载一个名为“lazy”的模块。
我这样做，当使用ng serve它的工作，但当通用运行（与AOT），当我去懒惰的路线和刷新页面我得到这个错误，虽然我看到浏览器中的懒惰组件：
ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined
at SystemJsNgModuleLoader.loadFactory (C:UsersshacharDesktopuniversalpackagescoresrclinkersystem_js_ng_module_factory_loader.ts:67:1)
at SystemJsNgModuleLoader.load (C:UsersshacharDesktopuniversalnode_modules@angularcorebundlescore.umd.js:5724:35)
at RouterConfigLoader.loadModuleFactory (C:UsersshacharDesktopuniversalpackagesroutersrcrouter_config_loader.ts:71:1)
at RouterConfigLoader.load (C:UsersshacharDesktopuniversalnode_modules@angularrouterbundlesrouter.umd.js:3402:52)
at MergeMapSubscriber.project (C:UsersshacharDesktopuniversalnode_modules@angularrouterbundlesrouter.umd.js:1570:74)
at MergeMapSubscriber._tryNext (C:UsersshacharDesktopuniversalnode_modulesrxjssrcoperatormergeMap.ts:125:21)
at MergeMapSubscriber._next (C:UsersshacharDesktopuniversalnode_modulesrxjssrcoperatormergeMap.ts:115:12)
at MergeMapSubscriber.Subscriber.next (C:UsersshacharDesktopuniversalnode_modulesrxjssrcSubscriber.ts:95:12)
at ScalarObservable._subscribe (C:UsersshacharDesktopuniversalnode_modulesrxjssrcobservableScalarObservable.ts:51:18)
at ScalarObservable.Observable._trySubscribe (C:UsersshacharDesktopuniversalnode_modulesrxjssrcObservable.ts:113:19)
at resolvePromise (C:UsersshacharDesktopuniversalnode_moduleszone.jsdistzone-node.js:770:31)
at resolvePromise (C:UsersshacharDesktopuniversalnode_moduleszone.jsdistzone-node.js:741:17)
at C:UsersshacharDesktopuniversalnode_moduleszone.jsdistzone-node.js:818:17
at ZoneDelegate.invokeTask (C:UsersshacharDesktopuniversalnode_moduleszone.jsdistzone-node.js:424:31)
at Object.onInvokeTask (C:UsersshacharDesktopuniversalpackagescoresrczoneng_zone.ts:257:1)
at ZoneDelegate.invokeTask (C:UsersshacharDesktopuniversalnode_moduleszone.jsdistzone-node.js:423:36)
at Zone.runTask (C:UsersshacharDesktopuniversalnode_moduleszone.jsdistzone-node.js:191:47)
at drainMicroTaskQueue (C:UsersshacharDesktopuniversalnode_moduleszone.jsdistzone-node.js:584:35)
at Server.ZoneTask.invoke (C:UsersshacharDesktopuniversalnode_moduleszone.jsdistzone-node.js:490:25)
at emitTwo (events.js:106:13)
rejection:
{ ReferenceError: System is not defined
at SystemJsNgModuleLoader.loadFactory (C:UsersshacharDesktopuniversalpackagescoresrclinkersystem_js_ng_module_factory_loader.ts:67:1)
at SystemJsNgModuleLoader.load (C:UsersshacharDesktopuniversalnode_modules@angularcorebundlescore.umd.js:5724:35)
at RouterConfigLoader.loadModuleFactory (C:UsersshacharDesktopuniversalpackagesroutersrcrouter_config_loader.ts:71:1)
at RouterConfigLoader.load (C:UsersshacharDesktopuniversalnode_modules@angularrouterbundlesrouter.umd.js:3402:52)
at MergeMapSubscriber.project (C:UsersshacharDesktopuniversalnode_modules@angularrouterbundlesrouter.umd.js:1570:74)
at MergeMapSubscriber._tryNext (C:UsersshacharDesktopuniversalnode_modulesrxjssrcoperatormergeMap.ts:125:21)
at MergeMapSubscriber._next (C:UsersshacharDesktopuniversalnode_modulesrxjssrcoperatormergeMap.ts:115:12)
at MergeMapSubscriber.Subscriber.next (C:UsersshacharDesktopuniversalnode_modulesrxjssrcSubscriber.ts:95:12)
at ScalarObservable._subscribe (C:UsersshacharDesktopuniversalnode_modulesrxjssrcobservableScalarObservable.ts:51:18)
at ScalarObservable.Observable._trySubscribe (C:UsersshacharDesktopuniversalnode_modulesrxjssrcObservable.ts:113:19)
__zone_symbol__currentTask:
ZoneTask {
_zone: [Object],
runCount: 0,
_zoneDelegates: null,
_state: 'notScheduled',
type: 'microTask',
source: 'Promise.then',
data: undefined,
scheduleFn: undefined,
cancelFn: null,
callback: [Function],
invoke: [Function] } },
promise:
ZoneAwarePromise {
__zone_symbol__state: 0,
__zone_symbol__value:
{ ReferenceError: System is not defined
at SystemJsNgModuleLoader.loadFactory (C:UsersshacharDesktopuniversalpackagescoresrclinkersystem_js_ng_module_factory_loader.ts:67:1)
at SystemJsNgModuleLoader.load (C:UsersshacharDesktopuniversalnode_modules@angularcorebundlescore.umd.js:5724:35)
at RouterConfigLoader.loadModuleFactory (C:UsersshacharDesktopuniversalpackagesroutersrcrouter_config_loader.ts:71:1)
at RouterConfigLoader.load (C:UsersshacharDesktopuniversalnode_modules@angularrouterbundlesrouter.umd.js:3402:52)
at MergeMapSubscriber.project (C:UsersshacharDesktopuniversalnode_modules@angularrouterbundlesrouter.umd.js:1570:74)
at MergeMapSubscriber._tryNext (C:UsersshacharDesktopuniversalnode_modulesrxjssrcoperatormergeMap.ts:125:21)
at MergeMapSubscriber._next (C:UsersshacharDesktopuniversalnode_modulesrxjssrcoperatormergeMap.ts:115:12)
at MergeMapSubscriber.Subscriber.next (C:UsersshacharDesktopuniversalnode_modulesrxjssrcSubscriber.ts:95:12)
at ScalarObservable._subscribe (C:UsersshacharDesktopuniversalnode_modulesrxjssrcobservableScalarObservable.ts:51:18)
at ScalarObservable.Observable._trySubscribe (C:UsersshacharDesktopuniversalnode_modulesrxjssrcObservable.ts:113:19) __zone_symbol__currentTask: [Object] } },
zone:
Zone {
_properties: { isAngularZone: true },
_parent:
Zone {
_properties: {},
_parent: null,
_name: '<root>',
_zoneDelegate: [Object] },
_name: 'angular',
_zoneDelegate:
ZoneDelegate {
_taskCounts: [Object],
zone: [Circular],
_parentDelegate: [Object],
_forkZS: null,
_forkDlgt: null,
_forkCurrZone: [Object],
_interceptZS: null,
_interceptDlgt: null,
_interceptCurrZone: [Object],
_invokeZS: [Object],
_invokeDlgt: [Object],
_invokeCurrZone: [Circular],
_handleErrorZS: [Object],
_handleErrorDlgt: [Object],
_handleErrorCurrZone: [Circular],
_scheduleTaskZS: [Object],
_scheduleTaskDlgt: [Object],
_scheduleTaskCurrZone: [Circular],
_invokeTaskZS: [Object],
_invokeTaskDlgt: [Object],
_invokeTaskCurrZone: [Circular],
_cancelTaskZS: [Object],
_cancelTaskDlgt: [Object],
_cancelTaskCurrZone: [Circular],
_hasTaskZS: [Object],
_hasTaskDlgt: [Object],
_hasTaskDlgtOwner: [Circular],
_hasTaskCurrZone: [Circular] } },
task:
ZoneTask {
_zone:
Zone {
_properties: [Object],
_parent: [Object],
_name: 'angular',
_zoneDelegate: [Object] },
runCount: 0,
_zoneDelegates: null,
_state: 'notScheduled',
type: 'microTask',
source: 'Promise.then',
data: undefined,
scheduleFn: undefined,
cancelFn: null,
callback: [Function],
invoke: [Function] } }
不，我根本没有使用SystemJS。
app.module.ts：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { LazyModule } from './lazy/lazy.module';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'universal' }),
RouterModule.forRoot([
{
path: '',
component: HomeComponent
},
{
path: 'lazy',
loadChildren: './lazy/lazy.module#LazyModule'
}
])
],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
bootstrap: [AppComponent]
})
export class AppModule { }
lazy.module.ts：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: LazyComponent }
])
],
declarations: [LazyComponent]
})
export class LazyModule { }
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
ServerModule,
AppModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }
server.ts：（快递）
import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import * as Express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
const { AppServerModuleNgFactory } = require('../dist/ngfactory/src/app/app.server.module.ngfactory');
const app = Express();
enableProdMode();
const PORT = 4000;
const template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();
app.engine('html', (_, options, callback) => {
const opts = { document: template, url: options.req.url };
renderModuleFactory(AppServerModuleNgFactory, opts)
.then(html => callback(null, html));
});
app.set('views', join(__dirname, '..', 'dist'));
app.set('view engine', 'html');
app.get('*.*', Express.static(join(__dirname, '..', 'dist')));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});
我很高兴万能工作正常，但每次刷新都会得到这个错误信息是不好的。
使用服务器端呈现的Angular AOT CLI延迟加载存在问题。 服务器不知道“系统”是角度的默认加载器。 所以在这种情况下，需要通过webpack配置为服务器端的模板加载添加angular2-template-loader'和'angular2-router-loader'。
目前不支持使用CLI捆绑器进行延迟加载，请参见此处。 它计划在即将发布的版本中进行，并且正在积极开发中，所以在此期间只需要紧张。
链接地址: http://www.djcxy.com/p/31403.html