Angular-cli: Lazy loading is not working together with 'import *' syntax

[areijngoudt]

Please provide us with the following information:

OS?

Mac OSX El Capitan

Versions.

angular-cli: 1.0.0-beta.16
node: 5.7.1
os: darwin x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.
The app was not created using the CLI. When upgrading to Angular 2 I choose to use the CLI as serving and building tool

I have this route in my app.routing.ts:

``` const ROUTES: Routes = [ { path: '', redirectTo: 'analyse', pathMatch: 'full' }, { path: 'annotate', component: AnnotateComponent }, { path: 'fraud', component: FraudComponent }, { path: 'info', loadChildren: 'app/info/info.module#InfoModule' }, ];

the InfoModule should be loaded lazily when navigating to it's path. But even in de --prod build there's no seperate bundle. The InfoModule is still part of the main.bundle.js.

Note that I'm still importing the InfoModule in the app.module.ts otherwise the info route does not work at all.
``````

[neilhem]

You should not import InfoModule nowhere else. Only reference in routes' loadChildren

[areijngoudt]

When ommitting the import in app.modules, an error occurrs that route info is unknown.
I'm using the angular-cli webpack version btw.

[wrosb]

If you import your InfoModule into app.module.ts then, you will not be using LazyLoad. Your module will be compile as main part of your app.

Could you please post your info.routing.ts?

[areijngoudt]

info.routing.ts:

import { ModuleWithProviders }  from '@angular/core';
import { RouterModule } from '@angular/router';

import { InfoComponent } from './info.component';

const ROUTES = [
  { path: '', component: InfoComponent}
];
export const routing: ModuleWithProviders = RouterModule.forChild(ROUTES);

[wrosb]

I could not find anything unusual in your code.
I recreated a sample with your code and works fine for me. Your ROUTES const should has a type def, but even without a type def, routing works fine in my test.

Try this, just as best practice:
import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { InfoComponent } from './info.component';

const ROUTES: Routes = [
{ path: '', component: InfoComponent}
];
export const routing: ModuleWithProviders = RouterModule.forChild(ROUTES);

I'm also using angular-cli@beta16, but over ubuntu 16.
Maybe you should try a clean project and test it.

[Richard87]

Hi all, I have the same problem. I have all the routes "inlined" in a DashboardModule file that I wish to lazyload... When I removed the import in my AppModule, my app crashed with a EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'dashboard' error message... If I add DashboardModule to my @NgModule's imports, it works as expected.

Also, ng serve --prod creates 2 sets of main.*.bundle.js and styles.*.bundle.js as expected when DashboardModule is _not_ imported

My AppModule:

@NgModule({
    imports:      [
        BrowserModule,
        HttpModule,
        CommonModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', component: LandingpageModule},
            { path: 'dashboard', loadChildren: `app/dashboard/dashboard.module#DashboardModule`}
        ]),
        LandingpageModule,
    ],
    bootstrap:    [AppComponent],
    providers:    [
        LoggedInGuard,
        authConfigProvider,
        JwtHelper,
        AuthHttp,
        AuthService
    ],
    declarations: [AppComponent],
})
export class AppModule {}

And my DashboardModule:

@NgModule({
    imports: [
        FormsModule,
        RouterModule.forChild([{
            path: 'dashboard',
            component: DashboardComponent,
            children: [
                { path: '', component: HomeComponent,canActivate: [LoggedInGuard]},
                { path: 'profile', component: ProfileComponent, canActivate: [LoggedInGuard] },
                { path: 'billing', component: BillingComponent, canActivate: [LoggedInGuard, AdminGuard] },
                { path: 'administration', component: AdministrationComponent, canActivate: [LoggedInGuard, AdminGuard] },
            ],
            canActivate: [LoggedInGuard]
        }]),
        CommonModule,
    ],
    providers: [
        AdminGuard
    ],
    declarations: [
        HomeComponent, StatusPanelComponent,DashboardComponent,
        ProfileComponent,AdministrationComponent,BillingComponent
    ]
})
export class DashboardModule {}

[neilhem]

@Richard87 you should set root path in DashboardModule as path: ''. So it will be

RouterModule.forChild([{
  path: '',
  component: DashboardComponent,
  children: [

[Richard87]

@neilhem Thanks! The routing works, but I still don't get lazy loading? (There are no reference to DashboardModule in AppModule except for the loadChildren string)...

Also, it doesn't seem like ng serve --prod produces 2 bundle js files (I might have been wrong earlier, it looks like 1 of them where gzipped...)

                                              Asset       Size  Chunks             Chunk Names
                       assets/fonts/FontAwesome.otf     125 kB          [emitted]
                main.ef31a7b0feb1135ed298.bundle.js     1.2 MB    0, 2  [emitted]  main
                                          inline.js    1.39 kB       2  [emitted]  inline
           styles.667c85c265538fc61bbe.bundle.js.gz    26.6 kB          [emitted]
             main.ef31a7b0feb1135ed298.bundle.js.gz     285 kB          [emitted]
                                         index.html  542 bytes          [emitted]
                                  assets/.npmignore    0 bytes          [emitted]
               assets/fonts/fontawesome-webfont.eot    76.5 kB          [emitted]
               assets/fonts/fontawesome-webfont.svg     392 kB          [emitted]
               assets/fonts/fontawesome-webfont.ttf     153 kB          [emitted]
              assets/fonts/fontawesome-webfont.woff    90.4 kB          [emitted]
             assets/fonts/fontawesome-webfont.woff2    71.9 kB          [emitted]
              styles.667c85c265538fc61bbe.bundle.js     162 kB    1, 2  [emitted]  styles

Any tips on how to troubleshoot?

[neilhem]

You should not import files from other lazy modules in your lazy module

[Richard87]

What do you mean? Like my AuthService or AuthHttp?

Also, I only have 1 lazy module, DashboardModule. my other 2 modules, AppModule and LandingpageModule doesnt import anything from DashboardModule or its components...

[neilhem]

Double check that global & local versions of angular-cli is the latest.

[Richard87]

Thanks, should work:

C:\Users\richa\Prosjekt\phono-frontend>ng --version
angular-cli: 1.0.0-beta.16
node: 6.3.0
os: win32 x64

C:\Users\richa\Prosjekt\phono-frontend>node_modules\.bin\ng --version
angular-cli: 1.0.0-beta.16
node: 6.3.0
os: win32 x64

C:\Users\richa\Prosjekt\phono-frontend>cd ..

C:\Users\richa\Prosjekt>ng --version
angular-cli: 1.0.0-beta.16
node: 6.3.0
os: win32 x64

[Richard87]

Hmm, I think there are some strange "residual" files after I run ng serve --prod

I was trying to clean up the project, so I deleted all *.ngfactory.ts-files, aaand angular stopped finding my dashboard module again (didn't complain about route or anything, just couldn't find the module).

Then I added DashboardModule to AppModules imports, and ofcourse it works again.. BUT when I removed DashboardModule's import (both inside @NgModule and javascript import {} from ... it _still_ works.

So my conclusion is that _I am_ importing DashboardModule in some old files, and that's why it doesnt work, but when I clean out the build files, why doesn't angular find my DashboardModule?

I can't reproduce the error where angular can't find dashboard module, so I have literary no idea whats going on..

[aaronleeucla]

Same issue with 1.0.0-beta.16

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';
import { RouterModule } from '@angular/router';
import { DocumentsPage } from "./documents";

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([{ path: '', component: DocumentsPage}])
  ],
  declarations: [ DocumentsPage ],
})

export class DocumentsModule { }

and in my RouterModule.forRoot([...]):
{ path: 'documents', loadChildren: '/documents.module#DocumentsModule' }

When I replace loadChildren with component: fooCmp, DocumentsPage is not included in the main.bundle.js. Otherwise, using loadChildren includes the component in main.bundle.js

[aaronleeucla]

figured out the culprit; import * as moment from 'moment' anywhere in the eagerly-loaded module will prevent lazy loading, and instead loadChildren modules will be included in the main bundle. I suspect importing d3 and other libraries will have the same issue.

The work around is to define the library in angular-cli.json' scripts definitions, and add a declare var moment: any in the typescript code, instead of an import.

However, workaround fails if other imported libraries has that import * as moment in its source code. For example, ng2-bootstrap's datepicker module : /

Workaround to that workaround is to fork valor's ng2-bootstrap datepicker...

[Richard87]

So in other words, if there is a import * from xxx anywhere we are f**?

What about the 100+ that exist in my node_modules folder?

EDIT Is it solvable (by angular-cli or webpack), or must all modules specify their imports?

[aaronleeucla]

I did not yet investigate, but I made a repo that can reproduce this issue:
https://github.com/aaronleeucla/angular-cli-lazy-load-bug-repro/blob/master/src/app/app-routing.module.ts

Running ng serve on this project, you can see that when either DatepickerModule is imported into NgModule or when moment() is used in the eagerly loaded MainPage component, lazy loading fails silently.

[filipesilva]

Great work figuring out the cause @aaronleeucla! This definitely should not happen and is a bug.

[ciesielskico]

Can confirm, @aaronleeucla 's workaround makes angular-cli create multiple bundles again :+1:

[sasxa]

For nested routing setup (Gist here) like this:

export const eagerAppRoutes: Routes = [
  { path: '', children: [
      { path: 'home' },
      { path: '', 
        children: [

          { path: '',  /* loadChildren: './viewer/viewer.module#ViewerModule', */ 
            children: [

              { path: '_',
                children: [

                  { path: '', /* loadChildren: '../editor/editor.module#EditorModule', */
                    children: [

                      { path: '', component: EditorComponent },
                      { path: ':model', component: EditorComponent },],},]},]},]},
      { path: '**', redirectTo: 'home' },
    ]}];

only one chunk will be created (with ViewerModule), but EditorModule route will be ignored. There will be runtime errors cannot find module './editor/editor.module#EditorModule'.

If I add this to the app-routing.module.ts, (a route _ will never be matched here) both chunks will be created and routing will work:

{ path: '', canLoad: [AuthGuard], loadChildren: './viewer/viewer.module#ViewerModule' },
{ path: '_', canLoad: [AuthGuard], loadChildren: './editor/editor.module#EditorModule' }

Also note that _loadChildren_ url in Viewer module should be ../editor/etc since this module is in sibling folder to the viewer module, but it does work with ./editor/etc (just one dot) if I include link in both places.

I'm using cli beta.17; angular 2.1.0; router 3.1.0

To recap: For nested lazy loaded routes (Gist here) only one chunk is created if I don't add both route definitions to the root; if I do, both chunks are generated and routing works as expected.

[wheredoesyourmindgo]

Thanks a lot @aaronleeucla (may you get struck with good fortune today). I couldn't figure out why Webpack was no longer generating separate chunk.js files for my lazy routes. Your solution worked for me. Moving import * as moment ... components into lazy loaded modules/routes (thus removing them from the eager ones) fixed this.

[JiriBalcar]

Any progress with this issue @filipesilva? It has label "priority: 1 (urgent)" almost one month. It is blocking me to update my project to newest angular-cli version.

[EmmanuelDemey]

I have the same problem with angular-cli beta18.

With beta16, with an application using momentjs (and import * as moment from ''), I did not have any issues.

@aaronleeucla Which version of angular-cli are you using ?

Manu

[daco]

For what's worth, I've the same problem too using angular-cli beta18

[Mihai-B]

Is this related only to importing moment.js ? Because I am using angular-cli 18 and everything seems to work fine regarding lazy loading

[daco]

@Mihai-B Sorry, yes it is related to importing moment.js.

[a5hik]

This is really breaking everything.. I'm facing the exact same issue. A Fix for this is much appreciated.

I even tried with angular-cli: 1.0.0-beta.19-3 .. but the issue still exists.

Looks like this issue was introduced in beta.18

[serhiisol]

@a5hik

Looks like this issue was introduced in beta.18

I also tried with beta.17 and even 16 and have the same issue =)

[VinayLeaf]

Help plz, trying to lazy load one module getting same issue

Error: Cannot match any routes. URL Segment: 'admin'

i am using:

angular-cli: 1.0.0-beta.19-3 node: 6.7.0 os: win32 x64

"ng2-bootstrap": "^1.1.16",

_package.json_

"dependencies": { "@angular/common": "2.1.2", "@angular/compiler": "2.1.2", "@angular/core": "2.1.2", "@angular/forms": "2.1.2", "@angular/http": "2.1.2", "@angular/platform-browser": "2.1.2", "@angular/platform-browser-dynamic": "2.1.2", "@angular/router": "~3.1.0", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "ng2-bootstrap": "^1.1.16", "ng2-sidebar": "^1.6.2", "rxjs": "5.0.0-beta.12", "ts-helpers": "^1.1.1", "zone.js": "^0.6.23" }, "devDependencies": { "@types/jasmine": "^2.2.30", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.19-3", "codelyzer": "1.0.0-beta.1", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.9", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "~2.0.3", "webdriver-manager": "10.2.5" }

[achimha]

You will have to wait for beta 20, lazy loading isn't really working yet.

[ciesielskico]

@achimha What do you mean? Of course it's working, even with 3rd party libs using the workaround mentioned above.

@VinayLeaf post your question with code on stackoverflow and I can help you there

[achimha]

The workaround means modifying the library and if the library depends on a library which depends on a library etc. the workaround isn't really workable.

However, beta 20 is probably out very soon and then things should be much better.

[serhiisol]

agree with @ciesielskico, it's really working with workaround. Tried with latest cli

[VinayLeaf]

Can anyone tell me that how to use that workaround???

On 11-Nov-2016 3:45 pm, "Serhii Sol" [email protected] wrote:

agree with @ciesielskico https://github.com/ciesielskico, it's really
working with workaround. Tried with latest cli

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/2496#issuecomment-259926017,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQo1nUyqcETorUxa08j3-wesrSvDsn4fks5q9EBWgaJpZM4KNcjN
.

[serhiisol]

@VinayLeaf All you need to do is to avoid wildcard imports e.g.:

import * as moment from 'moment'

instead you need to include import into angular-cli.json e.g.:

"scripts": [
"../node_modules/moment/moment.js"
]

and then add typing for moment e.g.:

declare var moment: any;

And that's pretty it. I hope that will help you :)

PS. also you can try to import it as polyfill, but declaration of variable still should be added somewhere in types

[VinayLeaf]

Need to declare var instead of import * as momment from 'moment'?? Every
where??

On 11-Nov-2016 3:51 pm, "Serhii Sol" [email protected] wrote:

@VinayLeaf https://github.com/VinayLeaf All you need to do is to avoid
wildcard imports e.g.:

import * as moment from 'moment'

instead you need to include import into angular-cli.json e.g.:

"scripts": ["../node_modules/moment/moment.js"
]

and then add typing for moment e.g.:

declare var moment: any;

And that's pretty it. I hope that will help you :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/2496#issuecomment-259926983,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQo1nYYjRRUqXfsSGuhD3q8jyjpjcwmTks5q9EGfgaJpZM4KNcjN
.

[serhiisol]

@VinayLeaf only once in typings somewhere (where's your types) and then use moment as global.

[VinayLeaf]

@serhiisol i found 2 occurrences of import * as moment from 'moment' in following location

node_modules\awesome-typescript-loader\issues\product-designer\src\components\products
node_modules\awesome-typescript-loader\issues\product-designer\src\constants

than i have replaced import * as moment from 'moment' to import * from 'moment'

i have included following code in angular-cli.json

"scripts": [ "../node_modules/moment/moment.js" ]

than i have declared declare var moment: any; in typings.d.ts

still i am getting following error

error_handler.js:47 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'admin'

am i doing something wrong?

if you want to look at my file how they looks: than got this link http://stackoverflow.com/questions/40531095/lazy-loading-not-working-with-angular-cli-webpack

[VinayLeaf]

@serhiisol i found that if i am not using ng2-bootstrap module than my lazy loading is working fine. and i also looked for import * as moment from 'moment' but i foundvar moment = require('moment'); i also tried to user workaround but still its not working.

[VinayLeaf]

@serhiisol i found solution i was doing mistake in my code, its my bad.

look at here: http://stackoverflow.com/questions/40531095/lazy-loading-not-working-with-angular-cli-webpack

[slubowsky]

Anybody get the workaround working with AOT? (I'm using 1.0.0-beta.20-4) Without AOT it just shows warning "Cannot find namespace 'moment'." for each component file that I use moment in but app still runs, With AOT I get

ERROR in ./src/app/app.module.ngfactory.ts
Module build failed: Error: <my component that uses moment>): Cannot find namespace 'moment'.)
.....

And app doesnt start.

[monojack]

I've just read this thread up to the first comment mentioning momentjs. I remembered that I had this similar issue once, declaring moment in angular-cli.json scripts fixed it.

I don't know if this solution has been provided, as I said, I haven't read the entire thing. If not, you could try that.

[a5hik]

angular-cli: 1.0.0-beta.20-4 node: 7.0.0 os: darwin x64

The lazy loading still not working.. with aot I was able to generate the map files for all the modules. But only getting one main chunk created.. no module chunks. So everything gets loaded when the app loads with one big main chunk.

[a5hik]

Adding simply the below Fixed the issue..

"../node_modules/moment/moment.js" in angular-cli.json

But this should be a workaround.. and not the actual Fix.

[Sanderand]

Lazy loading is still not working for me...

angular-cli: 1.0.0-beta.21
node: 6.9.1
os: win32 x64

[aaronleeucla]

PSA: My previously suggested workaround (declare var moment instead of importing moment) should also be applied to code in lazy modules as well. Per my issue reference above, I found that if one were to use import * as moment from 'momemt in a lazy module, that module will then duplicate the code from all other lazy chunks. bad!

However, even if you don't import moment, if one of the dependency in a lazy module uses such import, such as ng2-bootstrap's datepicker, the module will still duplicate. sad!

[aaronleeucla]

@Gillespie59 I've been running beta.22 / angular 2.2.3 and this bug still appears.

Correction, when I say it appears, I mean in the form of lazy chunks code being duplicated, per #3410 . I have not reproducing this bug by having import moment the eager module.

[cladera]

Just upgraded to beta.22 from beta.18. Lazy loading is still not working but instead of not generating the chunks now my application does not run at all.

As my project comes from several angualr-cli upgrades I created a brand new project to be sure the error is not related to my code. When I try to navigate to a lazy route I get this error:

error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/my-route/my-route.module'.
Error: Cannot find module 'app/my-route/my-route.module'.
    at webpackEmptyContext (http://localhost:4200/main.bundle.js:41:8)
    at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/vendor.bundle.js:51252:40)
    at SystemJsNgModuleLoader.load (http://localhost:4200/vendor.bundle.js:51244:60)
    at RouterConfigLoader.loadModuleFactory (http://localhost:4200/vendor.bundle.js:66070:128)
    at RouterConfigLoader.load (http://localhost:4200/vendor.bundle.js:66061:81)
    at MergeMapSubscriber.project (http://localhost:4200/vendor.bundle.js:68848:111)
    at MergeMapSubscriber._tryNext (http://localhost:4200/vendor.bundle.js:66195:27)
    at MergeMapSubscriber._next (http://localhost:4200/vendor.bundle.js:66185:18)
    at MergeMapSubscriber.Subscriber.next (http://localhost:4200/vendor.bundle.js:41971:18)
    at ScalarObservable._subscribe (http://localhost:4200/vendor.bundle.js:68111:24)

[sclausen]

I also struggled with loadChildren a whole workday and discovered in the source code, that using backticks ` will not work, because it's not ts.SyntaxKind.StringLiteral.
You have to use double- \" or singlequotes \' for enclosing the loadChildren path.
Maybe some of you stepped into the same pitfall than me.

[cladera]

@sclausen I am already using single quotes. I've tested with double quotes and I get the same error...

[aaronleeucla]

@filipesilva thanks for all your hardwork on improving the cli. Do you or anyone know whether this bug is on the angular-cli side or on the angular framework side? If the latter, I might look to open a bug on their github issues instead.

[vthinkxie]

Lazy loading is still not work [angular-cli beta.24]

[serhiisol]

super urgent ticket :)

[achimha]

I solved it by getting rid of everything importing moment.js. Could not find any other way.

[deebloo]

It seems that importing any lib via * as thing. Will cause bundles not to be created

[tomasznastaly]

@deebloo
but you mean using * in lazy modules only? or wherever you use "import *" in app, it will crush creating bundles?

i am trying to add lazy load, i have no errors and Augury dev tool shows that i have lazy route. But when i enter a lazy module, then in Network in dev tools, i don't see any bundle being downloaded.

It's normal? i see only main.bundle.js

[deebloo]

Whenever you use import * (at least in my experience)

[tomasznastaly]

@deebloo but only in our app, or in Node_modules too? if in Node_modules too, then it's impossible to use lazy load...

[deebloo]

@tomasznastaly I cannot speak with 100% certainty but that is what it seems like

[tomasznastaly]

@deebloo

I removed * from my moment usages. No errors, Augury shows the route is lazy, i can enter these module.
But still the separated bundle is not created, only main.bundle.js on app loading: /

i use Angular 2.4.1 and Angular-CLI-1.0.0.25-5
you achieved working lazy routes?

[achimha]

Look for 3rd party modules that perform such imports. Best is to strip them out until you get the lazy route bundles and then isolate the offending one.

To use moment.js, add it as a script to your angular-cli config and do

declare const moment: any;

in your components. This works around the problem.

[tomasznastaly]

@achimha
How to strip them out? i don't want to interfere into node_modules file. I have +100 usages of "import *"
in node modules.

I added moment to scripts and declare to typings

[achimha]

If you're not importing the "wrong" way, then it must be one of your third party modules. The only way to find it is by commenting code out until bundles get generated. I am not aware of an easier way. It's a major PITA and I do not understand the root of the problem now whether it can/will every be fixed.

[deebloo]

I believe it is a webpack issue. @TheLarkInn is the bundles not being created when using * a cli problem or a webpack problem?

[born2net]

problem

I am using ng-cli with lazy loading:

...
{path: 'studioweb', pathMatch: 'full', redirectTo: '/App1/Dashboard'},  // IE/FF compatibility
    {
        path: 'App1', component: Appwrap,
        children: [
            {path: '', component: Appwrap, canActivate: [AuthService]},
            {path: 'Dashboard', component: Dashboard, data: {title: 'Dashboard'}, canActivate: [AuthService]},
            {path: 'Campaigns', loadChildren: '../app/campaigns/index#CampaignsLazyModule', data: {title: 'Campaigns'}, canActivate: [AuthService]},
            {path: 'Fasterq', loadChildren: '../app/fasterq/index#FasterqLazyModule', data: {title: 'Fasterq'}, canActivate: [AuthService]},
...

I generate the build dist with:

ng build --target=production --base-href ./

and I don't see any chunks.
and while all "seems" to work, I am not sure lazy loading is working, almost as if Webpack bundles it all in?!?!?!

How can I confirm if lazy loading is working?
Why are chunks not created? bug?

OS?

angular-cli: 1.0.0-beta.25.5
node: 6.5.0
os: win32 x64
@angular/common: 2.4.4
@angular/compiler: 2.4.4
@angular/core: 2.4.4
@angular/forms: 2.4.4
@angular/http: 2.4.4
@angular/language-service: 2.4.4
@angular/platform-browser: 2.4.4
@angular/platform-browser-dynamic: 2.4.4
@angular/router: 3.2.1
@angular/compiler-cli: 2.4.4

snap:

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,

Sean

[achimha]

It doesn't matter if the offending import is in a lazy bundle, the main bundle or a 3rd party module. As soon as it appears somewhere, bundling is broken.

[born2net]

yes I do have the following all over my code:

import * as Immutable from "immutable";
import * as _ from "lodash";
import * as moment_ from "moment";

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,

Sean

[rodneyjoyce]

I can confirm this behaviour too in CLI 25.5 - lazy loading and chunking work fine until I add any of these in a Feature module and then chunking stops chunking so to speak...
import { Moment } from 'moment';
import { MomentModule } from 'angular2-moment';

[rodneyjoyce]

FYI, for those who are using Angular2-moment and moment, I have come to the conclusion that while I can get moment to work (with Locales, using the workarounds above) - it is not possible to use with angular2-moment pipes at this stage: https://github.com/urish/angular2-moment/issues/114

[intellix]

Not a fix for import * as breaking Lazy loading, but I have a workaround for those using angular2-moment.

I was previously using angular2-moment for the DateFormatPipe (for cross-browser formatting). That adds 50kb of code for one pipe and currently breaks Lazy-loading:

Solution: switch to date-fns instead, it's modern, modular, smaller and works with lazy-loading:

Site: https://date-fns.org/
Project: https://github.com/date-fns/date-fns
Example pipe for formatting a date:

import { Pipe, PipeTransform } from '@angular/core';
import { format } from 'date-fns';

@Pipe({
  name: 'fnsDateFormat'
})
export class DateFormatPipe implements PipeTransform {
  transform(value: Date | string | number, ...args: any[]): any {
    if (!value) return '';
    return format(value, args[0]);
  }
}

And from switching, now it uses 27.8kb and I have lazy-loading again:

[rodneyjoyce]

Yes, I did the exact same thing.

[filipesilva]

https://github.com/angular/angular-cli/pull/4153 should fix this problem.

[jwuliger]

@born2net Are you using the current master directly with something like npm link angular-cli or traditionally installing/using the CLI? Thanks!

[born2net]

ha sorry I installed via npm, I figured it was latest as I saw .26, I guess its its not published yet? if so I will wait, np

[jwuliger]

@born2net You can do what I have been doing to use the latest changes in my project.

Check out: https://github.com/angular/angular-cli#development-hints-for-hacking-on-angular-cli

I am setting up to test this new change myself.

[born2net]

tried it but I could not get the symlink to work. prob cause I am on windows, will wait for npm relase to check, tx!

[rodneyjoyce]

FYI, here is another TimeAgo filter if you are looking to swap Moment for DateFNS and need a pipe for the template (including localisation). This replaces the angular2-moment pipes which are not currently compatible with chunking
Usage: <div>Date with TimeAgo DateFNS Pipe : {{this.exampleDateTime | timeAgo : true }}</div>

import { Pipe, PipeTransform } from '@angular/core';
import * as distanceInWordsToNow from 'date-fns/distance_in_words_to_now'
import * as esLocale from 'date-fns/locale/es/index.js'

@Pipe({
    name: 'timeAgo'
})
export class TimeAgoPipe implements PipeTransform {
    transform(value: Date | string | number, ...args: any[]): any {
        if (!value) return '';
        return distanceInWordsToNow(value, { addSuffix: args[0], locale: esLocale });
    }
}

[born2net]

seems like .28 fixed chunks, but AOT broken so can't 100% test yet.

[born2net]

looks like build .28-3 still does not generate any chunks for lazy loading
so .28 worked with chunks (had diff issues) and 28-3 looks good (no crashes) but no chunks
just want to make sure devs are aware of this
regards

Sean

[JiriBalcar]

@born2net for me it does and I have lot of import * as moment in my code. Try to update @ngtools/webpack to latest version.

[born2net]

ha ok... let me try

[artaommahe]

@filipesilva i'm trying to migrate to @ngtools/webpack usage (without ng-cli) instead of ATL and with #4153 changes (1.2.7 lib vesrion) there is no lazy routes chunks on build. As i investigated this check never passes
https://github.com/angular/angular-cli/blob/29b134d7018c7d4e2eed74715b30b28e56fdcd49/packages/%40ngtools/webpack/src/plugin.ts#L247
Does not see any @angular/core/src/linker resource value here. If i comment it out, bundles created but with a lot of overhead as i understand (included all imported modules despite they are included in main bundle).
Tried 1.2.4/3 - does not work too, no chunks at all.
Cleared all export default/import * from code.

everything i added to webpack config related to @ngtools/webpack

        {
          test: /\.ts$/,
          use: [
            '@ngtools/webpack',
          ]
        },
...
    plugins: [
      new AotPlugin({
        tsConfigPath: 'tsconfig.json',
        entryModule: path.resolve(CONFIG.APP_PATH, 'app-module', 'module#AppModule'),
        skipCodeGeneration: true, // for dev mode
      }),

@angular/compiler-cli version 2.4.6

Update: added new issue with this bug https://github.com/angular/angular-cli/issues/4431

[kossov]

try this:
app.module

import { QuickStatsModule } from './quick-stats/quick-stats.module';

const appRoutes: Routes = [
        { path: 'quick-stats', loadChildren: () => QuickStatsModule },
];

imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
]

quick-stats.module

const ROUTES = [
    { path: '', component: QuickStatsComponent },
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(ROUTES)
    ],
    declarations: [
            QuickStatsComponent,
        ],
        exports: [QuickStatsComponent]
})

_This worked out for me._
Source

[kuncevic]

avoid wildcard imports e.g.:

import * as moment from 'moment'
instead you need to include import into angular-cli.json e.g.:

"scripts": [
"../node_modules/moment/moment.js"
]
and then add typing for moment e.g.:

declare var moment: any;

How would you do lazy loading in such case, say you have lazy loaded component that rely on moment, you do load moment with a scripts like above + "lazy": true https://github.com/angular/angular-cli/wiki/stories-global-scripts so you got moment.bundle.js produced. Then how would moment.bundle.js figure out when to get loaded?

I tried to do something like that with powerbi-client and have an issue https://github.com/angular/angular-cli/issues/6018

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}