New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy load libraries with router - bring new workaround to the attention #13386

Closed
klemenoslaj opened this Issue Jan 9, 2019 · 1 comment

Comments

Projects
None yet
2 participants
@klemenoslaj
Copy link

klemenoslaj commented Jan 9, 2019

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular CLI: 7.2.0
Node: 10.15.0
OS: darwin x64
Angular: 7.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.12.0
@angular-devkit/build-angular 0.12.0
@angular-devkit/build-ng-packagr 0.12.0
@angular-devkit/build-optimizer 0.12.0
@angular-devkit/build-webpack 0.12.0
@angular-devkit/core 7.2.0
@angular-devkit/schematics 7.2.0
@angular/cdk 7.2.1
@angular/flex-layout 7.0.0-beta.22
@angular/material 7.2.1
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.2.0
@schematics/angular 7.2.0
@schematics/update 0.12.0
ng-packagr 4.4.5
rxjs 6.3.3
typescript 3.2.2
webpack 4.23.1

Repro steps

There are already reports about this bug, but I would like to bring a new workaround to your attention because I have a feeling that Angular CLI is very close to fixing this bug without knowing it.

The problem is, that libraries loaded from dist or node_modules cannot be lazily loaded with router unless we apply a workaround in form of a wrapping module.
This wrapping module statically imports a library with routing configuration and instead of lazy loading the library we lazy load this module.


The workaround I found is demonstrated in angular-demo-lazy-route-libraries repo.

I accidentally discovered that (at least with 7.1.4) I do not need a wrapper module, instead, I can just statically import the library in some random file, but I DON'T import this file anywhere.
This file in the shared repo is called __fake-imports.ts in the application. Note the comment, it should never be imported.

By doing this I can keep imports in my routes simple:

{
  path: 'lazy',
  loadChildren: 'lazy-component#LazyComponentModule',
}

Mention any other details that might be useful

I am very sorry for intentional duplicate, but as I said, I would like to bring the new workaround to your attention, since it feels like the real solution is not far.

Duplicate of #6373

@klemenoslaj klemenoslaj changed the title Lazy load libraries with router Lazy load libraries with router - bring new workaround to the attention Jan 9, 2019

@alan-agius4

This comment has been minimized.

Copy link
Collaborator

alan-agius4 commented Jan 9, 2019

Hi, thanks for taking the time into putting a reproduction and opening an issue.

Nice work, indeed the problem is that libraries which are not referenced will not be adding as part of the compilation which causes ngfactories not to be created.

There is also a similar reproduction: #12859 (comment)

In reality you don't even need to add the fake-imports.ts file as you can include the files via the include option in the tsconfig.app.json.

Such as

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "include": [
    "**/*.ts",
    "../dist/lazy-library/**/*.ts",
  ],
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

That said, this will only work AOT.

Duplicate of #6373 and #12859.

@alan-agius4 alan-agius4 closed this Jan 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment