angular - Uncaught Error : The template specified for component AppComponent is not a string

Question

我正在尝试将我的 Angular 5、Webpack 2.2 项目升级到带有 Webpack 4.4 的 Angular 7。这是我更新的 package.json:

"dependencies": {
    "@angular/animations": "^7.1.0",
    "@angular/cdk": "^7.1.0",
    "@angular/common": "^7.1.0",
    "@angular/compiler": "^7.1.0",
    "@angular/compiler-cli": "^7.1.0",
    "@angular/core": "^7.1.0",
    "@angular/flex-layout": "7.0.0-beta.19",
    "@angular/forms": "^7.1.0",
    "@angular/http": "^7.1.0",
    "@angular/material": "^7.1.0",
    "@angular/platform-browser": "^7.1.0",
    "@angular/platform-browser-dynamic": "^7.1.0",
    "@angular/platform-server": "^7.1.0",
    "@angular/router": "^7.1.0",
    "@types/chart.js": "^2.7.20",
    "@types/datatables.net": "1.10.13",
    "@types/handsontable": "^0.35.0",
    "@types/jquery": "^3.3.5",
    "@types/node": "^10.12.10",
    "angular2-csv": "^0.2.9",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^3.0.0",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.7.2",
    "core-js": "2.5.7",
    "css": "^2.2.4",
    "d3": "^4.7.3",
    "datatables.net": "^2.1.1",
    "datatables.net-bs": "^2.1.1",
    "datatables.net-select": "^1.2.7",
    "datatables.net-select-bs": "^1.2.7",
    "es6-shim": "^0.35.1",
    "event-source-polyfill": "1.0.4",
    "expose-loader": "^0.7.5",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "3.3.1",
    "json-loader": "^0.5.7",
    "ng2-handsontable": "^2.1.0-rc.3",
    "popper.js": "^1.14.6",
    "preboot": "6.0.0-beta.6",
    "reflect-metadata": "0.1.10",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "shepherd.js": "2.0.0-beta.35",
    "to-string-loader": "^1.1.5",
    "typescript-watcher": "0.0.4",
    "url-loader": "1.1.2",
    "webpack-hot-middleware": "^2.24.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@types/jasmine": "3.3.0",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "html-loader": "1.0.0-alpha.0",
    "html-webpack-plugin": "^4.0.0-beta.4",
    "jasmine-core": "^3.3.0",
    "karma": "^3.1.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^2.0.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^4.0.0-rc.4",
    "null-loader": "^0.1.1",
    "raw-loader": "0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "0.20.3",
    "typescript": "3.1.6",
    "webpack": "4.4.1",
    "webpack-cli": "2.0.12",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  }

我尝试了各种加载器来加载 HTML(有些仍然包含在 package.json 中)。我使用像 raw-loader 和 to-string-loader 这样的加载器来看看它是否会产生任何影响(实际上没有)。

这是我的 webpack 通用配置:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

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

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

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

    optimization:
    {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)fesm5/,
            helpers.root('ClientApp'), //./
            {}
        ),

        new HtmlWebpackPlugin({
            template: 'Views/Home/Index.cshtml'
        })
    ]
};

这就是我包含组件所有模板的方式:

@Component({
    selector: "app",
    template: require("./app.component.html"),
    styles: ["./app.component.css"]
})

(以前是templateUrl: "./app.component.html"，好像没有什么区别)

现在我陷入了这个错误:

我希望有人可以帮助我解决这个问题，因为我已经被这个错误困扰了一个星期了。谢谢!

编辑 当我使用“styleUrls”而不是“styles”时，会显示类似的错误: 未捕获错误:预期“样式”是字符串数组。

Answer 1

如果有人仍然遇到此错误，请在您的 app.component.ts 中添加此行

styleUrls: ['./app.component.css']

如果这会生成“未捕获错误:预期‘样式’是字符串数组。”然后添加以下加载器希望它能解决所有问题

{
    test: /\.html$/,
    use: 'html-loader' //raw-loader
},
{
    test: /\.css$/,
//  include: path.join(__dirname, 'src', 'app'),
    use: [
        'to-string-loader', 'css-loader',
    ],
}