Angular-cli webpack 延迟加载不工作
Angular-cli webpack lazy loading not working
我正在尝试使用带有 angular2 RC6 的最新 angular-cli(主分支)进行异步路由。
但是我卡住了...
代码如下:
app/app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuardService } from './shared';
const routes: Routes = [
{
path: '',
loadChildren: () => require('es6-promise!./+dashboard/dashboard.module')('DashboardModule'),
canActivate: [AuthGuardService],
pathMatch: 'full'
},
{
path: 'login',
loadChildren: () => require('es6-promise!./+login/login.module')('LoginModule'),
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
app/+dashboard/dashboard.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './';
const routes: Routes = [
{
path: '',
component: DashboardComponent
}
];
export const dashboardRouting: ModuleWithProviders = RouterModule.forChild(routes);
app/+login/login.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './';
const routes: Routes = [
{
path: '',
component: LoginComponent
}
];
export const loginRouting: ModuleWithProviders = RouterModule.forChild(routes);
app/+dashboard/dashboard.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent, dashboardRouting } from './';
console.log('`Dashboard` bundle loaded asynchronously');
@NgModule({
imports: [
CommonModule,
dashboardRouting
],
exports: [
DashboardComponent
],
declarations: [DashboardComponent]
})
export class DashboardModule { }
app/+login/login.module.ts
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { LoginComponent, loginRouting } from './';
import { MdModule } from '../shared';
console.log('`Login` bundle loaded asynchronously');
@NgModule({
imports: [
CommonModule,
loginRouting,
FormsModule,
ReactiveFormsModule,
MdModule.forRoot()
],
exports: [
LoginComponent
],
declarations: [LoginComponent]
})
export class LoginModule { }
app/+dashboard/dashboard.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
app/+login/login.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { UserService } from '../shared';
@Component({
selector: 'my-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
private loginForm: FormGroup;
private usernameCtrl: FormControl;
private passwordCtrl: FormControl;
constructor(private fb: FormBuilder, private userService: UserService, private router: Router) {
this.usernameCtrl = fb.control('', Validators.required);
this.passwordCtrl = fb.control('', Validators.required);
this.loginForm = fb.group({
username: this.usernameCtrl,
password: this.passwordCtrl
});
}
ngOnInit() {
if (this.userService.isAuthenticated()) {
this.router.navigate(['/']);
}
}
authenticate() {
this.userService.authenticate(this.usernameCtrl.value, this.passwordCtrl.value)
.then(() => this.router.navigate(['/']));
}
}
编译和运行时都没有错误。但是没有加载异步组件。
在“”路径上,在控制台中我有:“Dashboard
包异步加载”。但是仪表板组件没有内容(未调用构造函数和 ngOnInit)。
在 'login' 路径上,我有:“Login
包异步加载”。但是没有来自登录组件的内容(未调用构造函数和 ngOnInit)。
通过删除桶的使用解决...
使用今天最新的 angular-cli,beta.21,我们可以像这样对延迟加载模块使用绝对路径和相对路径:
{path: 'lazy-module', loadChildren: 'app/lazy-module/lazy.module#LazyModule'}
或 {path: 'lazy-module', loadChildren: './lazy-module/lazy.module#LazyModule'}
假定相对于路由器配置文件的相对路径。
我们现在需要注意一个问题:
每次编辑lazy模块路由配置时,需要手动重启webpack,停止当前npm start
,重新运行npm start
。
Angular-cli 会在新启动时对延迟加载模块进行一些代码操作,但它不会在 webpack 因性能问题而自动重新编译更改时进行此操作。
未必有那么一天。很期待。
使用 Angular 编码愉快!
我正在尝试使用带有 angular2 RC6 的最新 angular-cli(主分支)进行异步路由。 但是我卡住了...
代码如下:
app/app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuardService } from './shared';
const routes: Routes = [
{
path: '',
loadChildren: () => require('es6-promise!./+dashboard/dashboard.module')('DashboardModule'),
canActivate: [AuthGuardService],
pathMatch: 'full'
},
{
path: 'login',
loadChildren: () => require('es6-promise!./+login/login.module')('LoginModule'),
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
app/+dashboard/dashboard.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './';
const routes: Routes = [
{
path: '',
component: DashboardComponent
}
];
export const dashboardRouting: ModuleWithProviders = RouterModule.forChild(routes);
app/+login/login.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './';
const routes: Routes = [
{
path: '',
component: LoginComponent
}
];
export const loginRouting: ModuleWithProviders = RouterModule.forChild(routes);
app/+dashboard/dashboard.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent, dashboardRouting } from './';
console.log('`Dashboard` bundle loaded asynchronously');
@NgModule({
imports: [
CommonModule,
dashboardRouting
],
exports: [
DashboardComponent
],
declarations: [DashboardComponent]
})
export class DashboardModule { }
app/+login/login.module.ts
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { LoginComponent, loginRouting } from './';
import { MdModule } from '../shared';
console.log('`Login` bundle loaded asynchronously');
@NgModule({
imports: [
CommonModule,
loginRouting,
FormsModule,
ReactiveFormsModule,
MdModule.forRoot()
],
exports: [
LoginComponent
],
declarations: [LoginComponent]
})
export class LoginModule { }
app/+dashboard/dashboard.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
app/+login/login.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { UserService } from '../shared';
@Component({
selector: 'my-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
private loginForm: FormGroup;
private usernameCtrl: FormControl;
private passwordCtrl: FormControl;
constructor(private fb: FormBuilder, private userService: UserService, private router: Router) {
this.usernameCtrl = fb.control('', Validators.required);
this.passwordCtrl = fb.control('', Validators.required);
this.loginForm = fb.group({
username: this.usernameCtrl,
password: this.passwordCtrl
});
}
ngOnInit() {
if (this.userService.isAuthenticated()) {
this.router.navigate(['/']);
}
}
authenticate() {
this.userService.authenticate(this.usernameCtrl.value, this.passwordCtrl.value)
.then(() => this.router.navigate(['/']));
}
}
编译和运行时都没有错误。但是没有加载异步组件。
在“”路径上,在控制台中我有:“Dashboard
包异步加载”。但是仪表板组件没有内容(未调用构造函数和 ngOnInit)。
在 'login' 路径上,我有:“Login
包异步加载”。但是没有来自登录组件的内容(未调用构造函数和 ngOnInit)。
通过删除桶的使用解决...
使用今天最新的 angular-cli,beta.21,我们可以像这样对延迟加载模块使用绝对路径和相对路径:
{path: 'lazy-module', loadChildren: 'app/lazy-module/lazy.module#LazyModule'}
或 {path: 'lazy-module', loadChildren: './lazy-module/lazy.module#LazyModule'}
假定相对于路由器配置文件的相对路径。
我们现在需要注意一个问题:
每次编辑lazy模块路由配置时,需要手动重启webpack,停止当前npm start
,重新运行npm start
。
Angular-cli 会在新启动时对延迟加载模块进行一些代码操作,但它不会在 webpack 因性能问题而自动重新编译更改时进行此操作。
未必有那么一天。很期待。
使用 Angular 编码愉快!