Angular-cli: how to lazy load a module from a package ?

[jjlgjkkl]

we have some modules published as package, and in this project we need to lazy load the module

if the module in the target project, it's ok , like :

export const routes: Routes = [
{ path: '', redirectTo: 'test01', pathMatch: 'full'},
{ path: 'test01', loadChildren: 'app/testing01/test01.module' },
]

but, how can i load modules from package , like this:
{ path: 'test01', loadChildren: '@xxx/testing01/test01.module' },

i am using

"angular-cli": "1.0.0-beta.15",
@angular 2.0.0

thank you and being in touch

[filipesilva]

This is a very relevant question. I don't think we support it in the CLI atm.

[AshMcConnell]

+1 for lazy loading from a package

[lorenjerickson]

+1 here too, would love to be able to do this. working on a huge project with potentially dozens (hundreds?) of modules that may or may not ever be loaded, the decision is made at runtime. having them packaged as npm dependencies helps with the development process.

[tsluijter]

+1 for lazy loading from a package too

[odannyboy000]

+1 for lazy loading from a package

[sclausen]

+1

[Destreyf]

I'm not sure if its supposed to do it this way, but in my testing i'm setup with a nested lazy loading setup that has app -> admin -> content as the module tree, including a 3rd party module into the content module, this bundles the 3rd party module with my content module, so this could be a work around for this approach.

[sclausen]

@Destreyf that sounds great. Could you be more specific on how you actually did it? For example provide a plunkr? That would be awesome.

[waltherp]

+1

[furydam]

@Destreyf Yep, I did this in the same way, but what's about singleton services for a module ? As I understand when we provide a feature module from package the angular creates new instances of module. Am I right ?

[Destreyf]

@vdzundza When you use a feature module, it does create a new instance of singleton services (Or any Injectable service) based on my understanding whenever a lazy loaded module is created in order to prevent possible issues, however I've not run into any problems so maybe my understanding is outdated.

[maciejtreder]

+1

[miladchamo]

I have the same need, i.e., lazy load a feature module that I have published to npm as a package. Is this still not supported?

[ghost]

this below works for me, but i don't know why it works.

copy *.module.ts to your dist(ngc compile outDir) directory.
and then use lazy load as you know,

...
{
  path: 'your_route_path',
  loadChildren: '../../../node_modules/your_package_name/...'
}
...

i m using
@angular/cli: 1.0.3
angular: 4.1.3

[spagenny]

@l2m can you be more explicit about your example?

how you set this -> loadChildren: '../../../node_modules/your_package_name/...'

[ghost]

@spagenny , in my project.

loadChildren: '../../../node_modules/@topibd/sys-conf/dist/lib/sys-conf.module#SysConfModule'

'topibd/sys-conf' is my npm package name.

[dfbaskin]

I tried using direct references to modules in node_modules or in a sibling packages path, but I couldn't get either to work:
https://github.com/dfbaskin/lerna-angular-cli-monorepo/issues/2

[stefdelec]

Do you think
doing a npm i, then move to src/app the module you need for lazy load is a good idea ?

[flavio-henrique]

+1 for lazy loading from a package

[filipvh]

+1 for TA LAZY loading da package module thinggy

[erkanarslan]

I didn't test it yet but this idea may work. We can import external modules from npm to local modules. Create a dummy local module which will be lazy-loaded. Make this module import the external module from npm. This should be enough.

[AshMcConnell]

@erkanarslan That might just do the business :+1:

[AshMcConnell]

Although does the Angular CLI not package all the vendor (npm modules) into a single bundle?

[tiwarirahul]

@erkanarslan I did use this approach of importing external lazy loaded modules from NPM package into local module in my app, and load that local module lazily using load Children. This works perfect for me.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyModule} from 'my-lib';

@ NgModule({
imports: [
CommonModule,
MyModule
],
declarations: []
})

export class MyLibLoaderModule { }

import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'load',
loadChildren: 'app/my-lib-loader.module#MyLibLoaderModule'
},

];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }

[nicovanbelle]

Is this still an open issue? I need to lazy-load my feature module in order to allow it's own translation configuration using angular-l10n. Without, it is not possible according the documentation and that's also what I'm seeing in practice. I'm wrapping it now but I wonder .. is this still required?

[SerkanSipahi]

@tiwarirahul thank you so much. This works fine for me (you can also define your routes in the npm lib package) :)

[cristhiank]

+1 for this.

[SerkanSipahi]

@filipesilva: the suggested workaround from @tiwarirahul seems to be valid/valid solution. Do you think we could add a PR for that (see below)?

Proposal:

ng generate module @my/lib --type library

structure something like this:

.
├── src
│   ├── app
│   │   ├── module
│   │   │   ├── library
│   │   │   │   └── my-lib.module.ts

generated code in src/app/module/library/my-lib.module.ts

// generated code in src/app/module/library/my-lib.module.ts
import { NgModule } from '@angular/core';
import { FooModule } from '@my/foo';

@NgModule({
  imports: [FooModule]
})
export class LibFooModule { }

[maxime1992]

Bumped into that issue today.

Using new angular cli 6.0, trying to build a library.

Not sure it's helpful or not but the library uses the router.

How I build the whole Angular project:

• ng new demo-lib-name
• ng g library lib-name

So basically the main project is the demo and also where I make sure with E2E tests that the lib is working well by using some service and component from the lib, testing the edge cases.

Now, I'm done building it and wanted to build it for prod.

Now, vicious circle for that use case:
In the main demo:
If I'm not using lazy loaded modules I get an error Module build failed: Error: ENOENT: no such file or directory which is related to https://github.com/angular/angular-cli/issues/4192 where the issue has been closed after the following comment:

I don't think we'll be able to correctly analyze in a static way what such a function would return.

Only remaining solution is to lazy load then.

But when I lazy load I end up with an other error: ERROR in Could not resolve module.

So right now completely stuck there.

_Also, it might be related to this issue: https://github.com/angular/angular-cli/issues/10750_

[klemenoslaj]

Issue is probably related to #6373 as well.

[micronyks]

is there any update for this issue?
I have also plenty of angular libraries which I use as packages and I want to lazy load them?

I don't want to have a wrapper module which imports requires module from node_modules folder and then wrapper module can be lazy loaded.

is it resolved in other referenced links?

Will any one provide any update on this issue?

[klemenoslaj]

@micronyks, I researched the topic quite a lot (_dozen of similar issues out there - unresolved_) and it seems like this issue just receives no love :(
I really depend on this right now, and it's making me rethink the whole ecosystem.

Currently, the only way around this is really wrapping a module, but this is of course extremely bad.

[micronyks]

First of all thanks for the update @klemenoslaj . Even I feel like that I am stuck after developing so many libraries and I don't want to go with a wrapper module approach.
@filipesilva : Guys do you have any update on this issue?
This issue is probably making people insane. Please provide a way or at least update in which release we should expect the resolution?

[wiikka]

+1

[micronyks]

Any Update?
When should we expect this feature?
Some information will really be helpful.

[bharu12345]

Hi,

Me too got stuck with same issue, any update on this?

Thanks,

[alan-agius4]

Duplicate of #6373

[bionara]

Any updates on this issue?

[deepthan]

this work for me, you can try it #6373

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