How to bundle lazy loaded components inside the production dist folder in angular-cli?

Question

I am using angular-cli for development and I have used the following commands and code to build my project.

npm install angular-cli (angular-cli: 1.0.0-beta.10)

ng new my-app

ng g component lazy-me

Then added a file app.router.ts with the following script

import { provideRouter, RouterConfig } from '@angular/router';
import { AppComponent } from './app.component';
// import { LazyMeComponent } from './+lazy-me/lazy-me.component';

const appRoutes : RouterConfig = [
  {path: '', component: AppComponent},
//   {path: 'lazyme', component: LazyMeComponent}
  {path: 'lazyme', component: 'app/+lazy-me#LazyMeComponent'}
];

export const APP_ROUTER_PROVIDER = [
    provideRouter(appRoutes)
];

And changed my main.ts as following

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode,
    SystemJsComponentResolver, 
    ComponentResolver } from '@angular/core';
import {RuntimeCompiler} from '@angular/compiler';
import { AppComponent, environment } from './app/';

import { APP_ROUTER_PROVIDER } from './app/app.router';

if (environment.production) {
    enableProdMode();
}

bootstrap(AppComponent,[
  APP_ROUTER_PROVIDER,
  {
    provide: ComponentResolver,
    useFactory: (r) => new SystemJsComponentResolver(r),
    deps: [RuntimeCompiler]
  },
]);

And to do a production build I have used the following command ng build -prod

When I deploy my code to a webserver and navigate to lazyme path, I get 404 error for app/lazy-me/lazy-me.component.js

The folder exists but lazy-me.component.js is missing as expected as everything gets bundled in main.js except .css and .html files. However, I want ng build -prod to include lazy-me.component.js in dist/app/lazy-me/.

Is there any settings in system-config.ts or anywhere else where I can include lazy loaded components to be part of the dist folder when doing a -prod build?

Answer 1

It appears your 'lazy' component is not actually loaded lazily in your router configuration. First, you need to wrap it in its own module, which you want to load lazily. Then, you need the 'loadChildren' property in your router configuration to refer to that module, rather than referring to the component directly.

This article might shed some more light onto the entire issue, hope it doesn't go stale and helps: https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee

Also, to debug issues like this: if you are willing to upgrade your version of Angular CLI to at least beta.32, they have added an 'eject' command similar to create-react-app. Using that, you get access to the webpack config file. Using this, you can change the production build to fit your needs, if the default CLI is not working as expected. I'm aware this is kind of a work-around though. Good luck!