0

I use systemjs-builder with angular2.
I want builder bundle files by each module file.
Ex: I have the structure as below

Main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './AppModule';

AppModule.ts

import {NgModule, CUSTOM_ELEMENTS_SCHEMA, ErrorHandler} from "@angular/core";
import {CommonModule, LocationStrategy, HashLocationStrategy} from "@angular/common";
import {appRoutingProviders, routing} from "./Routes";
import {LoginComponent} from "./components/user/LoginComponent";
import {ErrorComponent} from "./components/common/errorPage/ErrorComponent";

Routes.ts 

{path: "accounts",loadChildren: 'app/components/account/AccountModule#AccountModule'},
{path: "contacts",loadChildren: 'app/components/contact/ContactModule#ContactModule'}

Now I used builder.bundle('[app/**/*]',bundle.js) to build all component to one file, so the size is very large.
I want to build all dependencies in Main.ts (AppModule.ts, all component in AppModule....) extra libraries (angular2/core...) to 'bundle.js'.
And all dependencies of AccountModule to AccountModule.js, all dependencies of ContactModule to ContactModule.js.
To use lazy load on production.
Any solution for this issue, thanks

ThuyNguyen
  • 1,127
  • 3
  • 14
  • 24

1 Answers1

0

If you generate a single bundle... Only can load it. You have to create differents bundles.

For example, a bundle for angular and rxjs, other for the main ng-module and other for each lazy ng-module.

I have been testing it the last days, take a look to this branch:

https://github.com/tolemac/systemjs-test/tree/bundle-format-system?files=1

It's a sample of a little angular app, using bundles for vendor, app and a lazy module.

Clone the repo, checkout "bundle-format-system" branch, "npm install" and "gulp bundle"

Javier Ros
  • 3,511
  • 2
  • 21
  • 41
  • Thanks @Javier Ros, I aranged code into many folders and builder bundles for each folder. – ThuyNguyen Mar 20 '17 at 11:35
  • 1
    Why don't you update your question or add a comment to share your solution with the rest of community? – Javier Ros Mar 20 '17 at 12:19
  • oh, sorry about that, I found some answers that I could builder bundles for each folders before, but I don't like this solution so I asked question here. And long time I don't have any answer so I have to arrange my code. So sorry again. – ThuyNguyen Mar 20 '17 at 14:51
  • your app is combining all data in single bundle vendor.js including app data and polyfills. and it's not showing any output neither showing any error. – YASH DAVE Mar 25 '17 at 12:19
  • See issue #1. There are several branchs. – Javier Ros Mar 26 '17 at 00:06