Borak - software developer illustrational
Blog
3.4. 2019 / 00:00

javascript

front end

Angular

Angular 8

Angular 8 AOT and component styles handling.

The text is aiming to explain, how Angular 8 handles StyleUrls array in the @Component decorator.
This is piece of work is being done during the compilation phase of the source code (Mostly written in Typescript).
To enable the explanation, I need mention some facts about webpack loaders first.

Webpack loaders

As mentioned in the webpack documentation

„A loader is a node module that exports a function. This function is called when a resource should be transformed by this loader.“

More about it here:
https://webpack.js.org/contribute/writing-a-loader/

If you are considering writting a loader of your own, you should probably start here:
https://webpack.js.org/contribute/writing-a-loader/

Angular AOT template loader

As mentioned in:
http://borakpetr.cz/blog/angular-8---component-decorator-and-url-resolving-in-jit-compilation?lang=en

Angular uses loader, to transform, parse and compile the css mentioned in the StyleUrls @Component decorator. To be conrrete: Angular 2 template loader.
As depicted above, it’s a regular loader. If you peek into its inner workings, you will se a really simple file of only about 200 lines.
It is implemented exactly in the way elaborated above. It’s a function accepting a source stream from the webpack and replaces urls in the definition of the class by the require string, which means, that the css and templates are passed to the apropriate loaders (in the case of css to the post css loader for example). The other loaders then take care of the inlining and exporting the appropriate styles.

Here is the excerpt of the most important lines, where the above mentioned is taken care of.


.replace(stylesRegex, function (match, urls) {
// replace: stylesUrl: ['./foo.css', "./baz.css", "./index.component.css"]
   // with: styles: [require('./foo.css'), require("./baz.css"), require("./index.component.css")]
   // or: styleUrls: [require('./foo.css'), require("./baz.css"), require("./index.component.css")]
   // if `keepUrl` query parameter is set to true.
return styleProperty + ":" + replaceStringsWithRequires(urls);
 });

The magic then happens in the replaceStringsWithRequires function.
function replaceStringsWithRequires(string) {
return string.replace(stringRegex, function (match, quote, url) {
if (url.charAt(0) !== ".") {
       url = "./" + url;
     }
return "require('" + url + "')";
   });
 }

So, there is not much more Angular 8 does to ensure the templates and styles are handled properly. To be brief, it passes the responsibility to the common Webpack loaders by replacing the urls from the decorator with
require()
keyword.


More by Borak

To maximalize your user experience during visit to my page, I use cookies.More info
I understand

#BORAKlive

This page is subjected to the Creative Common Licence. Always cite the Author - Do not use the page's content on commercial basis. Comply with the licence 3.0 Czech Republic.
go to top