Угловая 2: Как правильно автоматически импортировать normalize.css

Question

Я новый пользователь Angular 2, и у меня есть некоторые проблемы с ним.

Традиционно мы можем использовать <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" /> для импорта файла css, но я хочу, чтобы Angular 2 автоматически импортировал его с помощью import.

Я пытался использовать один и тот же путь, когда я использовал материал 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';

Редактор будет жаловаться:

Не удается найти модуль 'нормализовать-путь'.

И код не компилируется. Но я действительно не знаю, что случилось.

Answer 1

с текущими (1.0.0-beta.15) версиями углового кли, решение довольно просто:

1. npm i normalize.css
2. добавить "../node_modules/normalize.css/normalize.css" в apps[0].styles в файле angular-cli.json

{ 
    "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": [ 
     "styles.css", 
     "../node_modules/normalize.css/normalize.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 
    } 
} 

Answer 2

// 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' 
 
    ] 
 
    }); 
 
};

и просто добавить ссылку на CSS index.html

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

Answer 3

на основе this answer, все нужно было сделать:

@import '~normalize.css/normalize.css'; 

В файле styles.css.