Angular-cli: Once I have created a lazy loaded css file, how do I lazy load it?

Created on 14 Jun 2018 · 3Comments · Source: angular/angular-cli

Among the many awesome things in the Angular CLI is the ability to lazy load a CSS file. My problem is that the documentation doesn't specify how to load it once you create it. When you run the build, the file that gets created for your css has a hash in the name, like foo.asdf908a7sd0as7g.bundle.css. Because the name of the production file isn't a static name, I can't figure out how to lazy load it. If there is a known way to do this, please show me, and I will help out and PR the docs.

Bug Report or Feature Request (mark with an `x`)

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

Area

- [ maybe ] devkit
- [ ] schematics
- [ X ] documentation

Versions

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

@angular/cdk: 5.2.5
@angular/cli: 1.7.4
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.4.9
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

Repro steps

Create a css file called foo.css.
Edit the '.angular-cli.json` (I know in v6 it is called something else) to include the following in styles:

"styles":[
   ...
   {"input": "foo.css", "lazy": true}
]

The log given by the failure

There is no log, cause there is no failure.

Desired functionality

I would love to see a way to lazily load these css files.

Mention any other details that might be useful

5880 was a similar question that never got answered and was closed. A few people suggested some work arounds that don't work for production mode when the css file gets the hash included in it's name. The suggestions only work in dev mode.

In a separate issue @filipesilva acknowledges that while a way to create lazily loaded css files exists, there is no provided way to load these created files. We need to get a way to allow people to load these created css files. In that issue, the participants are using native webpack functionality to load these css files. I don't want to use Webpack directly, because that will make it harder for me to upgrade my CLI one day when it switches to Bazel.

RFC / discussion / question

Source