构建angular5应用程序.该应用程序需要一些备用布局.
我的方法是处理主app模块路由文件中的高级路由.所述文件将路由映射到模块.对于非必要的速度驱动页面,模块将延迟加载,而不是为速度关键页面延迟加载:
app-layout-router.module.ts 文件:
import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {PublicLayoutModule} from '@modules/layouts/public/public-layout.module';
import {AuthenticatedLayoutModule} from '@modules/layouts/authenticated/authenticated-layout.module';
const routes: Routes = [{
path: '',
loadChildren: () => PublicLayoutModule,
},{
path: 'dashboard',
loadChildren: () => AuthenticatedLayoutModule,
}];
@NgModule({
imports: [RouterModule.forRoot(
routes,
{
useHash: false,
preloadingStrategy: PreloadAllModules
}
)],
exports: [RouterModule],
})
export class AppLayoutRouter {
}
Run Code Online (Sandbox Code Playgroud)
不在仪表板下的所有路线都将根据SEO原因进行预渲染.但是,在经过身份验证的布局中,我可以选择通过延迟加载后续模块来中断应用程序.例如,这是经过身份验证的模块路由器文件的内容:
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AuthenticatedLayoutComponent} from './authenticated-layout.component';
const routes: Routes = [{
path: …Run Code Online (Sandbox Code Playgroud)