ng build -aot error 'entry.split is not a function' on lazy loaded modules

OS?

Windows 10

Versions.

1.0.0-beta.20-4

The log given by the failure.

C:\Projects\Cli>ng build -prod -aot
10% building modules 2/2 modules 0 active entry.split is not a function
TypeError: entry.split is not a function
at Function.ModuleRoute.fromString (C:\Projects\Cli\node_modules@ngtools\webpack\src\plugin.js:24:27)
at C:\Projects\Cli\node_modules@ngtools\webpack\src\plugin.js:244:34
at Array.map (native)
at AotPlugin._processNgModule (C:\Projects\Cli\node_modules@ngtools\webpack\src\plugin.js:243:14)
at C:\Projects\Cli\node_modules@ngtools\webpack\src\plugin.js:217:39
at process._tickCallback (internal/process/next_tick.js:103:7)

Mention any other details that might be useful.

I understand that this feature is still under development but FYI...
Line 24 of node_modules/@ngtools/webpack\src\plugin.js
var split = entry.split('#');
Looks like it expects SystemJs module path like my.module#MyModule
But this format doesn't work with webpack. In order to lazy load modules I use es6-promise-loader and it looks like this:

export function loadMyModule() {
  return require('es6-promise!./my.module')('MyModule');
}
export const appRoutes: Routes = [
    {path: 'my', loadChildren: loadMyModule},
]

So, the entry parameter of ModuleRoute.fromString (line 23) is not a string but rather something like this:

activeStaticSymbol {
  filePath: 'C:/Projects/Cli/src/app/app.routing.ts',
  name: 'loadMyModule',
  members: undefined }

The code you referenced is actually allowing the string format to work.
However, it should also allow for using a function if desired.

You don't need to use the function to load modules. The CLI handles this for you if you just provide the string path to the module and its class name.

@brandonroberts

@brandonroberts like this? {path: 'my', loadChildren: 'my.module#MyModule'}
Not sure about AOT but that doesn't work in dev mode. Cannot find module.
It works with SystemJs, but not with webpack

@ctrl-brk

@ctrl-brk You have to provide a relative path e.g. {path: 'my', loadChildren: './path/to/my.module#MyModule'} or a full path e.g. {path: 'my', loadChildren: 'app/full/path/to/my.module#MyModule'}

@brandonroberts

@brandonroberts Doesn't work for me no matter how I try. Same path works with SystemJs and doesn't with cli/webpack. Is there a way to see a full url it's trying to load the module from?
I thought it's a known issue. I've got the idea of es6-promise-loader from here: http://stackoverflow.com/a/39496473/3211221

Are you using the latest version of the CLI? See this commit 27a034d

As far as I know there isn't a "debug" mode for module loading.

Ok, I've got it working in "debug" (I meant non-AOT ;) ) mode. The key is that you HAVE to restart the server (kill ng serve and start it again) for this change to be picked up. Just recompiling on the fly doesn't help. I'll play more with AOT tomorrow.

Well, it's kind of 'tomorrow' now ))
And I'm now facing AppModule is not an NgModule with ng build -prod -aot

Is there a workaround for the 'entry.split is not a function' error? After weeks of trials and errors and various fixes and updates to angular-cli, I still cannot get it to produce separate bundles for loadChildren. Everything ends up in the main bundle. Using the above mentioned method with es6-promise-loader works but produces said error. Using b23.

@achimha

Same problem as @achimha. ERROR in entry.split is not a function No matter what I try I cannot seem to find the source of this error. I am using CLI 1.0.0-beta.24. Anyone know anything? Thanks!

i have the same kind of issue with angular-cli beta-24 and angular 2.4.1

previously i had a errors like this
ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function
but i fixed them using exported functions : loadChildrenXXX

here is what seems to be the source of the error :

`

 import { Routes } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { ExtensionsComponent } from './extensions/extensions.component';
 import { StoryModule } from './story/story.module';
 import { GeneralModule } from './general/general.module';

export function loadChildrenStory() {
    return StoryModule
};
export function loadChildrenGeneral() {
    return GeneralModule
};

export const ROUTES: Routes = [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'story/:id', loadChildren: loadChildrenStory },
    { path: 'general', loadChildren: loadChildrenGeneral },
    { path: 'extensions', component: ExtensionsComponent },
];

`

@Meligy

@Meligy seems to working on a fix for this message in angular/angular#13676.

You don't need to manually load lazy modules, webpack will pick it up correctly. See here for an example:

https://github.com/angular/angular-cli/blob/master/tests/e2e/assets/webpack/test-app/app/app.module.ts#L21

@Rebolon

@Rebolon right now I have exactly your configuration. I use loadChildren but not for lazy loading.
Just to use a module. Have you find a solution or not ? I'm not sure of what you were saying in your last message.

@filipesilva why did you close the issue as it's not fixed yet ?

@maxime1992

@maxime1992 There is a pending PR in the main angular repo to address your loadChildren issue. It will require a new release of angular to be realized however.

@clydin

@clydin I searched loadChildren in PR and nothing came out. Do you have a link so I can follow that ? :)
Thanks

Sure. Both of the following have the fix (second is attempting to fix some other issues as well):

angular/angular#13676
angular/angular#13678

@maxime1992

@maxime1992 need to wait for angular/angular#13676

fix(compiler-cli): avoid handling functions in loadChildren as lazy l…

For those who use AOT, there's still an ongoing error.

A fix has been proposed here angular/angular#13909 but it requires you to change some import(s) in your code.

Another issue has been opened angular/angular#14005 to ask if this could be done at built time, without the need to do it by hand.

Works clear with CLI if we declare full path to the module, include the name of the folder and the module inside + #Hash
loadChildren: './dashboard/dashboard.module#DashboardModule'

fix(compiler-cli): avoid handling functions in loadChildren as lazy l…

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.}

fix(compiler-cli): avoid handling functions in loadChildren as lazy l…

Navigation Menu

Repository navigation

ng build -aot error 'entry.split is not a function' on lazy loaded modules #3204

OS?

Versions.

The log given by the failure.

Mention any other details that might be useful.

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ng build -aot error 'entry.split is not a function' on lazy loaded modules #3204

Description

OS?

Versions.

The log given by the failure.

Mention any other details that might be useful.

Activity

clydin commented on Nov 20, 2016

brandonroberts commented on Nov 20, 2016

ctrl-brk commented on Nov 20, 2016

brandonroberts commented on Nov 20, 2016

ctrl-brk commented on Nov 20, 2016

brandonroberts commented on Nov 20, 2016

ctrl-brk commented on Nov 20, 2016

ctrl-brk commented on Nov 20, 2016

achimha commented on Dec 20, 2016

jwuliger commented on Dec 24, 2016

Rebolon commented on Dec 26, 2016

filipesilva commented on Dec 29, 2016

1 remaining item

maxime1992 commented on Jan 6, 2017

clydin commented on Jan 6, 2017

maxime1992 commented on Jan 6, 2017

clydin commented on Jan 6, 2017

Rebolon commented on Jan 6, 2017

maxime1992 commented on Jan 20, 2017

khryshyn commented on Feb 8, 2017

angular-automatic-lock-bot commented on Sep 6, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions