Garfield550 Garfield550 - 2 months ago 180
AngularJS Question

Angular 2: How to correctly automatically import normalize.css

I am a new Angular 2 user, and I have some problems with it.

Traditionally, we could use

<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
to import a css file, but I want to make Angular 2 to automatically import it using
import
.

I tried to use the same way when I used Material 2:



// angular-cli-build.js

module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'normalize-path/index.js',
]
});
};







// system-config.ts

const map: any = {
'normalize': 'vendor/normalize-path',
};

/** User packages configuration. */
const packages: any = {
'normalize': {main: 'index.js'},
};







// app.component.ts

import { normalize } from 'normalize-path';





The editor will complain:


Cannot find module 'normalize-path'.


And the code won't compile. But I really have no idea what was wrong.

Answer

// angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      '@angular2-material/**/*.+(js|js.map)',
      'normalize.css/normalize.css'
    ]
  });
};

and simple add the css link to index.html

// index.html
<link href="vendor/normalize.css/normalize.css" rel="stylesheet">