Angular-cli Webpack 3rd part css files

Question

I just moved to angular-cli 1.0.0-beta.11-webpack.2
There are so many annoying things but the biggest problem which I`m facing is with external css files (probably I will have the problem with js files too).

In my project is used Angular2 material and the menu component is requiring the overlay.css. When I am including it in index.html:

<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">

And after ng serve or ng build the overlay css files are missing in the dist folder.

There is as issue on angular-cli github. I did everything exactly how it's mentioned but is still not working.

I crated an assets folder and styles.css file in

• src
• src/app

and my angular-cli.json files look like:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "cli-webstorm"
  },
  "apps": [
    {
      "root":"src",
      "assets":"assets",
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "styles": "styles.css",
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

I would like to ask how can I include an library css files(3rd part css) in my project in a way that I can use the benefits of angular-cli webpack?

Caeoma

Answer 1

Your answer lies within the new styles and scripts config settings available in angular-cli.json. There are two options to solve css injection:

External Styles

Option 1

Just include the path to the css file directly in the styles array like so:

//-- angular-cli.json --//

{
   //... 
 “apps”: [
   {
   //... 
   “styles”: [
     “styles.css”,
     “../node_modules/@angular2-material/core/overlay/overlay.css”
   ],
   “scripts”: [],

     // ...
    }
   }
 ], 

Option 2

You can import overlay.css into src/styles.css file generated by the cli:

/* scr/styles.css */

@import "../node_modules/@angular2-material/core/overlay/overlay.css";

If you use Option 2, make sure to remove reference to overlay.css illustrated in Option 1.

Note: angular-cli.json is a configuration file so you'll need to restart the server when making changes to it.

You can find more angular-cli 1.0.0-beta.11-webpack.2 details here.

External Scripts

Similar to injecting external styles, you can inject external scripts by using the scripts:[] array in angular-cli.json. Any scripts added here will get loaded to the window object. This is particularly handy with plugins that require jQuery to be accessed from the window object. More on this here.

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
],

Partridge

How about including whole folders? Will this ever be possible with angular-cli ? – Nickerson

Answer 2

If you upgrade to 1.0.0-beta.11-webpack.3 or higher, you can use the apps[0].styles property of angular-cli.json to list external stylesheets for import.

To upgrade from 1.0.0-beta.11-webpack.2, run:

npm uninstall -g angular-cli
npm cache clean
npm install -g [email protected]

Note: you may need Node.js 6 to get [email protected] working if you get SyntaxError: Unexpected token ... errors on running ng version. See https://github.com/angular/angular-cli/issues/1883 for details.

If you generate a new project, your angular-cli.json should look something like this (note the styles property):

{
  "project": {
    "version": "1.0.0-beta.11-webpack.3",
    "name": "demo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

Boisleduc

Answer 3

The Angular CLI Wiki Stories page has a "Thirdparty Installation" section:

ng new my-todo-app
ng install sass

---

Also, see the Global Library Installation section of the ReadMe:

npm install bootstrap@next

Then add the needed script files to angular-cli.json's apps[0].scripts:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally add the Bootstrap CSS to the apps[0].styles array:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

Staw

Answer 4

I don't think that you need to include your css file in index.html instead in your ts files. You can simply do import on your css file like this

import "yourcssfile.css"

if you wish to use them only in components then you may use styleUrl

 styleUrls: ['yourfile.css']

angular2 webpack seed with angular2material

Servility

I am not using angular2 webpack. Please check angular-cli As much as I can see it will be available in the next release of angular-cli link – Caeoma

even if you are not using angular2 webpack but angular-cli you should be able to do a import on css in your main file which will be available in your whole project. it's the same as it says in that issue having css global. – Servility

Thank you @MrJSingh. This is not the result which I was looking for but with some some changes I make it working. Angular2 material is creating a <div class="md-overlay-container"> which is pushed before the closing body tag. This mean that we have to disable the encapsulation of our component encapsulation: ViewEncapsulation.None. I hope that next version of angular-cli will resolve this problems – Caeoma

I think I had this in my seed. I will update my answer as well. Please accept the answer if it helped it can help others as well 😊 – Servility

Answer 5

It Works for me, finally, on

[email protected]

and

[email protected]

...both install locally with

npm install --save-dev

The combination of the right Versions was the key to make it work.

Gallenz

Answer 6

I had the same problem when i wanted to import PrimeNG from primefaces But i found a styles.scss in my folder...

@import './../your_file_path/your_file_name';

Should do the trick

Teratogenic