Anuglar2-錯誤找不到模塊

Question

我正在使用Angular2 rc4當前可以使用ExtractTextPlugin導入css文件。 我正在使用html-loader，沒有任何問題。 但是，當我嘗試加載css文件時，出現錯誤：找不到模塊“ ./app.component.css”或Expected'styles'是字符串數組 。 我該如何解決？ app.comonent.ts

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

const template = require('./app.component.html'); 
const sytles = require('./app.component.css'); 

// Components
import {NavComponent} from './nav/nav.component';
import {FooterComponent} from './footer/footer.component';

@Component({
    selector: 'my-app',
    template: template,
    directives: [ROUTER_DIRECTIVES, NavComponent, FooterComponent],
    styles: [sytles],
    precompile: [NavComponent, FooterComponent]
})

export class AppComponent {
}

webpack.config.js

var webpack = require("webpack");
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
  entry: {
    "vendor": "./src/vendor",
    "app": "./src/boot"
  },
  output: {
    path: __dirname,
    filename: "./dist/[name].bundle.js"
  },
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.ts/,
        loaders: ['ts-loader'],
        exclude: /node_modules/
      },
      {
          test: /\.html$/,
          loader: 'html'
      },
      {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader")

      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"./dist/vendor.bundle.js"),
new ExtractTextPlugin('[name].css')

  ]
}

Answer 1

是

styles:[sytles];

應該是

styles:[styles];,

Answer 2

使用import代替require ，它將為您和模板創建一個單獨的app.css文件，您需要angular2-template-loader ，然后在模板上無需使用require它將為您編譯。

注意：-當您確實在css上導入時，不需要將其添加到組件樣式中，您可以直接在html中使用它。 例如，當您使用引導程序時，您不想將其添加到每個組件的每種樣式中，而只希望加載一次，則只需在app.ts中將其作為入口點import "bootstrap"並且可以在任何地方使用它。

webppack

{test: /\\.ts$/, loaders: ["ts-loader","angular2-template-loader"]}

零件

templateUrl :"path"