Angular 2: How to correctly automatically import normalize.css

Update for Angular 8

1. Install the normalize.css library:

   npm install --save normalize.css

2. Import it in your styles.css

   @import '~normalize.css';

With the current (1.0.0-beta.15) version of angular-cli, the solution is quite easy:

1. npm i normalize.css
2. add "../node_modules/normalize.css/normalize.css" in apps[0].styles in the config file angular-cli.json

Note: If using Angular 7, the config file is now angular.json, and the path to normalise.css in apps[0].styles should be "../node_modules/normalize.css/normalize.css".

Example:

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

Based on this answer, all needed to do was:

1. Install the normalize.css library:

   npm install --save normalize.css

2. Import it in your styles.css

   @import '~normalize.css';

The accepted response doesn't seem to be working on app. I needed to remove the ../ in the path name.

The angular.json styles bit should be something like this:

"styles": [    "node_modules/normalize.css/normalize.css",    "styles.css"  ],