我正在尝试使用angular2 RC6与最新的angular-cli(主分支)进行异步路由 . 但是我被困了......
这是代码:
应用程序/ 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
bundle异步加载” . 但是没有来自仪表板组件的内容(不会调用构造函数和ngOnInit) .
在'login'路径上,我有:“ Login
bundle异步加载” . 但是没有来自登录组件的内容(不会调用构造函数和ngOnInit) .
2 回答
使用截至今天的最新angular-cli,beta.21,我们可以使用绝对路径和相对路径来处理延迟加载模块,如下所示:
{path: 'lazy-module', loadChildren: 'app/lazy-module/lazy.module#LazyModule'}
或{path: 'lazy-module', loadChildren: './lazy-module/lazy.module#LazyModule'}
假设相对于路由器配置文件的相对路径 .我们现在需要了解一个问题:
每次我们编辑延迟模块路由配置时,我们都需要通过停止当前的
npm start
手动重启webpack并重新运行npm start
.Angular-cli在重新启动时对延迟加载模块进行了一些代码操作,但是由于性能问题,它不能在webpack的自动重新编译上执行此操作 .
有一天可能不是这样 . 我很期待 .
用Angular快乐编码!
通过删除桶使用解决...