1

I'm trying to make asynchronous routing with latest angular-cli (master branch) with angular2 RC6. But I'm stuck...

Here's the code :

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(['/']));
  }

}

There is no error on compilation nor runtime. But the async components are not loaded.

On '' path, in console I have: "Dashboard bundle loaded asynchronously". But no content from dashboard component (The constructor and ngOnInit are not called).

On 'login' path, I have: "Login bundle loaded asynchronously". But no content from login component (The constructor and ngOnInit are not called).

2
  • Did you follow a guide to lazy load modules with new angular-cli@webpack somewhere? I'm also having problems with lazy loading... Commented Sep 14, 2016 at 12:57
  • @ImNotAnUser I followed here angular.io/docs/ts/latest/guide/router.html Commented Sep 15, 2016 at 8:02

2 Answers 2

4

With the latest angular-cli as of today, beta.21, we can use both absolute path and relative path for lazy load modules like this:

{path: 'lazy-module', loadChildren: 'app/lazy-module/lazy.module#LazyModule'} or {path: 'lazy-module', loadChildren: './lazy-module/lazy.module#LazyModule'} assuming the relative path relative to the router configuration file.

There is a gotcha we need to aware of for now:

Every time we edit lazy module route configurations, we need to manually restart webpack by stopping the current npm start and re-run npm start.

Angular-cli does some code manipulation for lazy load modules on fresh start, but it does not do this on webpack's auto-recompilations on changes due to performance issues.

It may not be the case one day. I look forward to it.

Happy coding with Angular!

Sign up to request clarification or add additional context in comments.

Comments

2

Resolved by removing barrels usage...

3 Comments

You mean all barrels?
@ImNotAnUser I removed barrels inside sub modules directories and shared folders. And it worked after that...
How are you able to tell if it is working or not? I can see that my module IS lazy loaded (console.log in the constructor) however I cannot work out if Angular CLI is only loading the JS chunk it needs (there is only 1 bundle when I build in prod target mode)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.