Lazy load application theme styles with Angular CLI

Question

I am trying to switch the href of a <link /> for theming purposes and the SCSS themes live in a packages folder of my monorepo that are symlinked in node_modules. I need to be able to compile and reference these.

I came across the following fixed issue: angular/angular-cli#3401 and have been trying to implement something similar:

"styles": [     "styles.scss",     {         "input": "../node_modules/@org/themes/dark.scss",         "output": "dark",         "lazy": true     } ], 

My understanding (perhaps incorrect) was that this would compile the dark.scss file into dist/dark.bundle.css and that I would be able to load it via http://localhost:4200/dist/dark.bundle.css but it is not working as expected. Am I misunderstanding something or doing this completely wrong?

How do I compile an SCSS file from node_modules that I can then lazy load in the app? Is there another/better approach I could try instead?

Additional notes:

• Using Angular version 4.2.4
• Using Angular CLI version 1.3.0
• The documentation for this approach
• I am working in a monorepo so node_modules/@org/themes is a symlink
• I have tried using ng serve --preserve-symlinks option in case the above was the issue. It made no difference

I have looked into the way that the Angular Material docs website approaches this problem and it seems they have a custom build script that compiles the SCSS files to CSS files in the assets directory before serving the application. I thought the fixed issue above removed the need for this step but perhaps not. Is this the only way it can be done?

SOLVED

Thanks to @Kuncevic. I was missing the --extract-css flag.

Working config:

"styles": [     "styles.scss",     {         "input": "../node_modules/@org/themes/src/dark.scss",         "output": "themes/dark",         "lazy": true     } ], 

And with the following serve script, I can access it via http://localhost:4200/themes/dark.bundle.css:

ng serve --extract-css --preserve-symlinks

Answer 1

By setting "lazy": true means it won't appear in index.html but there is no mechanism that will lazy load that bundle for you, check that comment:

The lazy option doesn't actually lazy load anything. It just prevents it from being executed on application startup.

I agree "lazy": true is a bit confusing at first.

If you run ng build you can actually see what's gets outputed in your build and analyze all the files produced by cli.

When you do:

{     "input": "../node_modules/@org/themes/dark.scss",     "output": "dark",     "lazy": true } 

You should be able to access your file directly at http://localhost:4200/dark.bundle.js but it wont appear in index.html as you set "lazy": true

If you want to get dark.bundle.css bundle instead of dark.bundle.js in dev mode you can use --extract-css flag.

The reason why cli generating styles in to js bundle in dev mode is because this way is much quicker. Bud when you do prod build like ng buld --prod it will output in to .css by default anyway.