如何修复“为组件 AppComponent 指定的模板不是字符串”

Question

我一直在关注https://github.com/me-12/single-spa-portal-example 这篇文章以满足我的要求，并使用新的 angular 6 应用程序实现了相同的功能，并且工作正常，但是当我尝试将其与旧的现有应用程序和templateUrl 组件集成时遇到问题没有说“为组件AppComponent 指定的模板不是字符串”。

我已经浏览了下面的链接Loading second component causes "The template specified for component SidebarComponent is not a string"，但它不符合我的要求

我认为我在设置规则时在我的webpack.config.js 中遗漏了一些内容，您可以在其完整的webpack.config.js 文件下方查看

const path = require('path');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = function (env) {
    const analyzeBundle = !!(env && env.analyzeBundle);
    const prodMode = !!(env && env.prod);


    const plugins = [
        new ContextReplacementPlugin(
            /(.+)?angular(\\|\/)core(.+)?/,
            path.resolve(__dirname, './src')
        ),
        new AngularCompilerPlugin({
            mainPath: path.resolve(__dirname, 'src/singleSpaEntry.ts'),
            tsConfigPath: path.resolve(__dirname, 'tsconfig.json'),
            sourceMap: !prodMode,
            skipCodeGeneration: !prodMode,
            platform: 0,
            hostReplacementPaths: {
                "environments/environment.ts": prodMode ? "environments/environment.prod.ts" : "environments/environment.ts"
            }
        })
    ];

    if (analyzeBundle) {
        plugins.push(new BundleAnalyzerPlugin());
    }

    const devTypescriptLoader = [
        {
            test: /\.ts$/,
            loader: '@ngtools/webpack'
        }
    ];

    const prodTypescriptLoader = [
        {
            "test": /\.js$/,
            "use": [
                {
                    "loader": "@angular-devkit/build-optimizer/webpack-loader",
                    "options": {
                        "sourceMap": false
                    }
                }
            ]
        },
        {
            test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
            use: [
                {
                    "loader": "@angular-devkit/build-optimizer/webpack-loader",
                    "options": {
                        "sourceMap": false
                    }
                },
                '@ngtools/webpack'
            ]
        }
    ];

    const typescriptLoader = prodMode ? prodTypescriptLoader : devTypescriptLoader;

    return {
        entry: {
            singleSpaEntry: 'src/singleSpaEntry.ts',
            // store: 'src/store.ts'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'release'),
            libraryTarget: 'umd',
            library: 'DoneApp'
        },
        module: {
            rules: [
                {
                    test: /\.html$/,
                    loader: "raw-loader"
                },
                {
                    test: /\.css$/,
                    use: ["style-loader", 'css-loader', 'postcss-loader', 'to-string-loader']
                },
                {
                    test: /\.(jpe?g|png|webp|gif|otf|ttf|woff2?|ani)$/,
                    loader: "url-loader",
                    options: {
                        name: "[name].[ext]",
                        limit: 10000,
                        publicPath: '/DoneApp/'
                    }
                },
                {
                    test: /\.(eot|svg|cur)$/,
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        publicPath: '/DoneApp/'
                    }
                },
                {
                    exclude: [
                        path.join(process.cwd(), "src/styles.scss")
                    ],
                    test: /\.scss$|\.sass$/,
                    use: ["exports-loader?module.exports.toString()", "css-loader", "sass-loader", 'postcss-loader', 'to-string-loader']
                },
                {
                    include: [
                        path.join(process.cwd(), "src/styles.scss")
                    ],
                    test: /\.scss$|\.sass$/,
                    use: ["style-loader", "css-loader", "sass-loader", 'postcss-loader', 'to-string-loader']
                }
                //,{ test: /\.(html)$/, loader: "raw-loader" },
            ].concat(typescriptLoader)
        },
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    sourceMap: false,
                    parallel: true,
                    uglifyOptions: {
                        ecma: 6,
                        warnings: false,
                        ie8: false,
                        mangle: true,
                        compress: {
                            pure_getters: true,
                            passes: 2
                        },
                        output: {
                            ascii_only: true,
                            comments: false
                        }
                    }
                })
            ]
        },
        resolve: {
            extensions: [".ts", ".js"],
            modules: [
                __dirname,
                'node_modules'
            ]
        },
        mode: 'development',
        devtool: prodMode ? 'none' : 'inline-sourcemap',
        externals: [],
        plugins: plugins,
    }
};

我除了那个templateUrl在

 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',   
  styles: ['./app.component.css']
})

应该能够像在我新创建的项目中一样工作。

Answer 1

我看到你定义了

{
    test: /\.html$/,
    loader: "raw-loader"
},

和

{ test: /\.(html)$/, loader: "raw-loader" }

但是 Angular 需要 to-string-loader 用于高级版本。 你可以尝试像下面这样替换它：

npm install to-string-loader

还有：

{
    test: /\.html$/,
    loader: "to-string-loader"
},
{ test: /\.(html)$/, loader: "to-string-loader" }