CODEWITHSUNDEEP
javascriptcssangularangular-cliuncss
Ole
Ole

Reputation: 47088

Generating a built angular index.html page with all the CSS rules used by the templates?

In order to run uncss to remove unused css rules I need to generate a single page containing all the the css rules used by the angular templates. I think Rendertron might fit this usecase, but was wondering whether it's possible to do the same with the Angular CLI?

For example if we run ng build angular will generate a dist/index.html file with the custom element selectors in the dist/index.html file. However this cannot be targeted with uncss because the template has not been rendered. It is still represented by for example <app-root>, thus uncss cannot see the css rules applied by the <app-root> template.

Upvotes: 1

Views: 1600

Answers (1)

Nitishkumar Singh
Nitishkumar Singh

Reputation: 1839

Yes, by default all the compiled CSS and js files will be generated into dist folder via angular cli.If required, you can configure this using angular-cli.json present in your project. As you can see in below sample of index.html, it contains the path for all the css and JS files. Usually it creates one css file, as it's good to load entire css in one request.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My APP</title>
  <base href="/">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="styles.3e523e6b74c68b0940ab.bundle.css" rel="stylesheet" />
</head>

<body>
  <app-root></app-root>
  <script type="text/javascript" src="inline.5d1afc94d5922f9e85f3.bundle.js"></script>
  <script type="text/javascript" src="polyfills.45da1a3263e1321501bf.bundle.js"></script>
  <script type="text/javascript" src="scripts.4d46a754e6ffe4a0ff23.bundle.js"></script>
  <script type="text/javascript" src="main.cec0d2d86e8c98d02873.bundle.js"></script>
</body>

</html>

You can also instruct cli to separate any vendor specific CSS/js into separate files. Follow the link to know more about configuration.

Since, you would be specifying all your css and js in uncss, so you can go with dist folder content.

Upvotes: 2

Related Questions