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

[klemenoslaj]

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

[alan-agius4]

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.

[angular-automatic-lock-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.}