Angular - Including CSS File in Index.Html

Angular - including CSS file in index.html

Angular CLI have it's own way to initialize your global css/js.

They are located in .angular-cli.json configuration

Locate "styles": and add your css there

Example :

"styles": [
   "../node_modules/angular2-busy/build/style/busy.css",
   "styles.css"
],

Hope that helps.

index.html not loading local CSS

It's not loading, because you need to use angular-cli.json file to add css files into project, not the index.html. To do so, simply open angular-cli-json and add css files into styles:

"styles": [
        "styles.css",
        "another-styles.css"
]

angular2: how to manually add css files by condition to index.html?

To dynamically load or change your CSS, you can do the following:

1. In index.html:

   You will have a stylesheet link as follows:

   <link id="theme" href="assets/light.css" rel="stylesheet" >

   Note that there is "id" for the link element.

2. In your component you will have as follows:

   Import the DOCUMENT from platform-browser

   import { DOCUMENT } from "@angular/platform-browser";

   then, in your action or on init you will change your css accordingly:

   this.document.getElementById('theme').setAttribute('href','assets/dark.css');

By default, you will load one CSS file.. lets say desktop.css. In your application's root component, you can look for the device or cookie or setup some conditions to change from desktop.css to mobile.css. Like you said, you will NOT use angular-cli.json to load your CSS.

Angular 9 - Always add an / in front of the styles.css path in index.html after building --prod

I'm sure you can get it done using an npm-script in your package.json, but there's probably a better Angular/webpack way of doing it.

In package.json:

{
  ...
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "my-build": "ng build --prod && node prepend_slashes.js"
  }
}

And then in prepend_slashes.js you can use something like cheerio.js to manipulate your HTML file and replace all the occurences you're looking for.

You can then run your script using npm my-build.

Here's a small example to get you started:

const cheerio = require('cheerio');
const fs = require('fs');

const indexFilePath = './path/to/build/index.html';

// Read `index.html`
fs.readFile(indexFilePath, 'utf8', function (err,data) {
    if (err) {
      return console.log(err);
    }

    // Load `index.html` into cheerio object.
    const $ = cheerio.load(data);

    // Use jquery-like syntax to manipulate cheerio object.
    // Find all links whose href starts with `styles.`
    $("link[href^='styles.']").each(function() {
      // Prepend the /
      $(this).attr('href', '/' + $(this).attr('href'));
    })
    // Overwrite the index file.
    fs.writeFile(indexFilePath, $.html(), function (err) {
      if (err) return console.log(err);
      console.log('Successfully rewrote', indexFilePath);
    });
}

Why is the index.html in Angular not applying the stylesheet?

In angular, any asset you add you need to add its reference in angular.json file also. You will find "styles": [ ] in angular.json. You can add your stylesheet reference there.

Angular add custom .css files to Angular-CLI project

An angular-cli project contains by default a styles.css file under the src folder of the project (myAngularCliProjectName/src/styles.css).

In this file you'll be able to add global styles and also import other style files.

There's no need at all to link them from the index.html file.

Loading css files in index.html in between certain css files defined in angular cli-json

I guess you always want to get the current anotherapp.css, otherwise you could of just save the file in the folder like app/legacy/css and modify styles config accordingly. So to always get the current anotherapp.css you can do by using npm package download-cli and modifying some npm scripts and cli configs. Here is the setps:

• npm install -g download-cli
• add new npm script to your package.json
download": "download --out ./src/app/legacy/css www.anotherapplication.com/css/anotherapp.css"
• modify your ng serve/build/etc script like
  
  "build": "npm run download && ng build",
"serve": "npm run download && ng serve"

• modify your styles config like:

  "styles": [
"../node_modules/foundation-sites/assets/foundation.scss",
"app/legacy/css/anotherapp.css",
"my-application.scss"
],

To test the download script separately just run npm run download

Tip:
For debugging purposes you can name your global style bundles like so:

"styles": [
    { "input": "../node_modules/foundation-sites/assets/foundation.scss", "output": "foundation" },
    { "input": "app/legacy/css/anotherapp.css", "output": "anotherapp" }
    { "input": "my-application.scss", "output": "application" }
  ],

So this way angular cli instead of just producing one single styles.bundle.js will produce separate bundles like foundation.bundle.js, anotherapp.bundle.js and application.bundle.js

---

Related Topics