angular.js - Angular 2: How to automatically include normalize.css file at runtime?

Question

When I was learning Angular 2 recently, I found that the common problems of HTML 5 body margin:8px still exist, just like introducing normalize.css to discard these unnecessary styles.

The traditional way is to directly import the .css file, such as: <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />, but now I want Angular to automatically introduce the normalize.css style sheet for index.html by importing the module.

I first followed the way I introduced Material 2 before:

// 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 prompt:

Cannot find module 'normalize-path'.

And the compilation does not pass, maybe my starting point is wrong.

I tried to find the answer on stackoverflow but couldn't find it, and Google couldn't find any blog posts or discussions on related issues.

Answer 1

oc.lazyLoad try it

Answer 2

It is recommended to use angular-cli for development
Configure in .angular-cli.json:

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