Angular 2: Come importare correttamente normalize.css

Question

Sono un nuovo utente Angular 2 e ho alcuni problemi con esso.

Tradizionalmente, è possibile utilizzare <link rel="stylesheet" href="node_modules/normalize.css/normalize.css" /> per importare un file css, ma desidero rendere Angular 2 in grado di importarlo automaticamente utilizzando import.

ho cercato di utilizzare lo stesso modo quando usato Materiale 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';

L'editore si lamenterà:

Impossibile trovare il modulo 'normalizzare-path'.

E il codice non verrà compilato. Ma non ho davvero idea di cosa c'è che non va.

Answer 1

Con la (1.0.0-beta.15) versione corrente angolare cli, la soluzione è abbastanza semplice:

1. npm i normalize.css
2. aggiungere "../node_modules/normalize.css/normalize.css" in apps[0].styles nel file 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' 
 
    ] 
 
    }); 
 
};

e semplice aggiungere il collegamento css a index.html

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

Answer 3

Sulla base this answer, tutto doveva fare era:

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

Nel file styles.css.