Uncaught Error: шаблон, указанный для компонента AppComponent, не является строкой

Question

Я пытаюсь обновить мой angular 5, проект webpack 2.2 до angular 7 с помощью webpack 4.4.Вот мой обновленный 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, чтобы посмотреть, будет ли это иметь какое-то значение (а это не так).

Вот мой общий конфиг веб-пакета:

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

Если у кого-то все еще есть эта ошибка, тогда добавьте эту строку в ваш app.component.ts

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

, если это генерирует "Uncaught Error: Ожидаемые 'styles' будут массивом строк".затем добавьте следующие загрузчики, надеюсь, это решит все проблемы

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

Answer 2

Ошибка, скорее всего, связана с несовместимыми версиями TypeScript.

Прежде всего, вам НЕ следует обновлять сразу несколько основных версий.при обновлении с Angular 5 до 7 сначала обновите до Angular 6, а затем до v7 (см. https://angular.io/guide/releases#supported-update-paths).

. Также очень удобно использовать функцию обновления CLI: https://angular.io/guide/releases#supported-update-paths.соответствующие пакеты и зависимости (например, правильная версия машинописного текста) устанавливаются, удаляют угловые пакеты, которые больше не используются (например, когда они были включены в другие пакеты), и предоставляют информацию о том, что должно быть подвергнуто рефакторингу, или, если это возможно, автоматически изменяют код.

В любом случае рекомендуется следовать Руководству по угловому обновлению: 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, интерпретация строк (или их тип, если быть более точным) может отличаться.Итак, хотя путь является правильной строкой, вы можете получить эту ошибку.

В mycase это было немного "очевидно", потому что, хотя мы используем templateUrl, я получил ошибку template, которую компиляторобрабатывает первым.

Answer 3

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

Вам не нужно require() шаблон или templateUrl, чтобы быть более конкретным.Просто укажите правильный относительный путь.Обратите внимание, что я использую templateUrl, а не template.То же самое касается styleUrls.