未捕获的错误:预期“样式”为字符串数组-Angular

时间:2018-08-29 20:44:27

标签: javascript angular webpack

我是Angular的新手,并尝试按照教程进行操作,但是使用 styleUrls 属性时出现以下错误:

  

“未捕获的错误:预期'样式'是字符串数组”

我的组件文件如下:

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

@Component({
    selector: 'app-entry',
    templateUrl: 'entry.component.html',
    styleUrls: ['entry.component.css']
})

export class EntryComponent {
    title: string = 'My First Photo';
    photo: string = 'http://placehold.it/800x500?text=Angular Basics';
    description: string = 'A description of My First Photo';
}

我的配置文件如下:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].css');

const ROOT = path.resolve(__dirname, '..');

function root(pathParts) {
  if (typeof pathParts === 'string') {
    pathParts = pathParts.split('/');
  }
  return path.join.apply(path, [ROOT, ...pathParts]);
}

const context = root('src');

module.exports = {
    context,
    entry: {
        polyfills: './polyfills.ts',
        vendor: './vendor.ts',
        app: './main.ts'
    },

    output: {
        path: root('wwwroot'),
        publicPath: '/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[hash].chunk.js'
    },

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader?configFileName=' + root('src/tsconfig.json'), 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file?name=/assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: root('src'),
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
            },
            {
                test: /\.css$/,
                include: root('src'),
                loader: 'raw'
            },
            {
                test: /\.css$/,
                include: root('src/styles'),
                loader: extractCSS.extract(['css'])
            }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'index.html'
        }),

        extractCSS
    ]
};

我已经搜索过,但是目前我没有尝试过,因此没有任何帮助。

0 个答案:

没有答案