[Angular Router] Lazy loading Module with Auxiliary router

Found the way to handle Auxiliary router for lazy loading moudle and erge load module are different.

In Erge loading, it is recommended to create a shell component, inside shell component you need to define the router-outlet for each Auxiliary routes and primary route.

const routes: Routes = [
  ...
  { path: ‘speakers‘, component: SpeakersComponent, children: [
    { path: ‘speakersList‘, component: SpeakersListComponent, outlet: ‘list‘ },
    { path: ‘:id‘, component: BioComponent, outlet: ‘bio‘ }
  ] },
];

For example, in the code above, ‘SpeakersComponent‘ is shell component.

<div class="columns">
  <md-card>
    <router-outlet name="list"></router-outlet>
  </md-card>
  <md-card>
    <router-outlet name="bio"></router-outlet>
  </md-card>
</div>

Inside the html, it defines all the auxilliary routes for shell component.



But the story changes when you use lazy loading...

For example, we lazy load a feature module inside our root routes configuration:

  {
    path: ‘preview‘,
    loadChildren: ‘app/preview/preview.module‘
  },

And here is the feature module routes:

const routes = [
  {
    path: ‘‘,
    component: PreviewLeftComponent
  },
  {
    path: ‘:id‘,
    component: PokemonDetailComponent
  },
  {
    path: ‘:id‘,
    outlet:‘aux‘,
    component: PreviewDetailComponent
  }
];

There is one auxiliary route. But here we didn‘t use any shell component.

This is because I found, when using lazy loading, Angular doesn‘t goes into Shell component html to find auxiliary routes‘ router-outlet, it goes to root component,

So we have to define the auxiliary route outlet inside root component:

<!-- aoo.component.html -->

<md-sidenav-layout>
  <md-sidenav align="start" mode="side" opened>
    <app-sidenav></app-sidenav>
  </md-sidenav>
  <div class="main-content">
    <router-outlet></router-outlet>
  </div>
  <md-sidenav align="end" mode="side" [opened]="curtPath === ‘preview‘">
    <router-outlet name="aux"></router-outlet>
  </md-sidenav>
</md-sidenav-layout>

Github, Talk

时间: 12-16

[Angular Router] Lazy loading Module with Auxiliary router的相关文章

[Angular2 Router] Lazy Load Angular 2 Modules with the Router

Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional

[AngularJS] Lazy loading Angular modules with ocLazyLoad

With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading of Angular modules in large applications. 'use strict'; // Declare app level module which depends on filters, and services var App = angular.module('

[AngularJS] Lazy Loading modules with ui-router and ocLazyLoad

We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want to lazy load modules when we change states? angular.module("demo", ["ui.router", "oc.lazyLoad"]) .config(function ($statePro

Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)

概述 Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loading就没法搞了. 因此我使用了webpack2,webpack2自带tree shaking,只要将tsconfig中的module设置成es2015就可以, 虽然效果没rollup好,但支持lazy loading. 另外, angular2目前不支持typescript 2.1.X,所以如果

[Angular 2] Import custom module

The application structure: in app.module.ts: import { NgModule} from "@angular/core"; import {BrowserModule} from "@angular/platform-browser"; import {AppComponent} from './app.component'; import {HomeModule} from './components/home/ho

[Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage the else block of the *ngIf directive to show a simpl

懒加载 lazy loading

懒加载:延迟加载,当程序启动时不加载资源,当程序需要这些资源时再去加载.需要的时候再加载的一种方式,能够减少内存的占用,效率高.其本质是重写get方法. 背景:由于ios内存有限,如果我们一次性将所有资源加载完毕将极大的消耗内存,降低程序运行效率.所以就要将一些比较大的资源,如音频,数据,图片等大资源进行懒加载,就需要                                             先判断是否存在,如果不存在再创建实例化. 1 @property (nonatomic,

思科路由器常用命令

1. switch配置命令(1)模式转换命令用户模式----特权模式,使用命令"enable"特权模式----全局配置模式,使用命令"config t"全局配置模式----接口模式,使用命令"interface+接口类型+接口号"全局配置模式----线控模式,使用命令"line+接口类型+接口号"注:用户模式:查看初始化的信息.特权模式:查看所有信息.调试.保存配置信息全局模式:配置所有信息.针对整个路由器或交换机的所有接口接

路由配置命令

router> enable                    从用户模式进入特权模式router# disable or exit           从特权模式退出到用户模式router# show sessions             查看本机上的TELNET会话router# disconnect                关闭所有的TELNET会话router# show users                查看本机上的用户router# erase startup-