Question

我正在尝试使用webpack 4.4将我的angular 5，webpack 2.2项目升级到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”时，会显示一些类似的错误： Uncaught Error: Expected 'styles' to be an array of strings.

Answer 1

@Component({
    selector: "app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

您无需require()来具体说明模板或templateUrl。只需提供正确的相对路径即可。另请注意，我使用的是templateUrl，而不是template。 styleUrls也是如此。

Answer 2

如果仍然有此错误，请在您的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',
    ],
}

Answer 3

该错误可能与不兼容的TypeScript版本有关。

首先，您不应该直接在多个主要版本上进行升级。从Angular 5升级到7时，请先升级到Angular 6，然后再升级到v7（请参见https://angular.io/guide/releases#supported-update-paths）。

使用CLI更新功能也很舒适：https://angular.io/guide/releases#supported-update-paths 请注意，所有相关软件包和依赖项（例如正确的打字稿版本）均已安装，卸载不再使用的角度软件包（例如，当它们合并到其他软件包中时），并提供有关必须重构或重构某些代码的信息。自动（如果可能）。

无论如何，遵循《 Angular升级指南》是一个好主意：https://update.angular.io/ 它还会告诉您必须采取哪些步骤以及为成功升级Angular可能需要手动执行的操作。

但是关于具体问题： 在问题描述的情况下，Angular团队可能更改了template的处理方式（即实际上必须是一个真实的字符串）。并且require("./app.component.html")不是字符串。因此，@ Peter Kim的答案应该已经解决了您的问题。

从Angular 7升级到Angular 8时，我遇到了类似的情况：我们为templateUrl使用了正确的字符串和正确的路径，但是得到了错误

错误：为组件XXX指定的模板不是字符串

我不确定是TypeScript版本还是从commonjs到esnext以及从"target": "es5"到es2015的更改（请参阅tsconfig.json），但我的猜测是第一个。当那些与Angular Compiler使用的版本不匹配时，字符串的解释（或更确切地说，它们的类型）可能会有所不同。因此，尽管路径是正确的字符串，您仍会遇到该错误。

在我的情况下，这有点“明显”，因为尽管我们使用templateUrl，但遇到了template错误，该错误由编译器首先处理。

Answer 4

如果有人偶然发现了这一点，您应该使用原生 angular '@ngtools/webpack' 插件作为加载器而不是 'angular2-template-loader'：

const { AngularWebpackPlugin } = require('@ngtools/webpack');
...
module: {
    rules: [
        {
            test: /\.tsx?$/,
            loader: '@ngtools/webpack'
        },
    ...    
    ]
},
plugins: [
    new AngularWebpackPlugin({
        jitMode: true, // false=AOT by default
    }),
    ...
]

在 JIT 模式下，它的工作方式类似于 angular2-template-loader，并在运行时使用 raw-loader，但 AOT 模式更可取。更多在https://www.npmjs.com/package/@ngtools/webpack 问题是在 AOT 模式下，大多数 angular compilerOptions 不起作用（特别是 defaultEncapsulation） - Angular 使用默认值（从 12.0.0-rc.1 开始）

未捕获的错误：为组件AppComponent指定的模板不是字符串

4 个答案: