Question

我已经在.NET Core解决方案中设置了我的Angular 2项目，我有一种情况需要使用 .cshtml 视图文件从服务器呈现并将它们用作Angular组件中的模板。我正在使用webpack AOT 捆绑它们。

如何排除要排除的templateUrl或模板（不要编译成输出.js文件），而是动态解决？

我的延迟加载组件（notfound.component.ts）：

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

@Component({
    templateUrl: "/Home/PageNotFound" // This is my Controller/Action
})
export class NotFoundComponent
{
}

webpack.config.js：

var webpack = require("webpack");
var clean = require("clean-webpack-plugin");
var compression = require("compression-webpack-plugin");
var path = require("path");
var analyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        "app": "./Client/main-aot.ts" // AoT compilation
    },

    devtool: "source-map",

    output: {
        path: __dirname + "/wwwroot/dist/bundle",
        //filename: "[name]-[hash:8].bundle.js",
        filename: "[name].js",
        chunkFilename: "[id]-[hash:8].chunk.js",
        publicPath: "/dist/bundle/",
    },

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

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    "awesome-typescript-loader",
                    "angular-router-loader?aot=true&genDir=aot/"
                ]
            }
        ],
        exprContextCritical: false
    },
    plugins: [
        new clean(
            [
                __dirname + "/wwwroot/dist/bundle"
            ]
        ),
        new analyzer(),
        new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                comments: false
            },
            sourceMap: true
        }),
        new compression({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
};

当我运行以下NPM命令时，它给我错误：

＆＃34; node_modules / .bin / ngc -p tsconfig-aot.json＆＃34; ＆安培;＆安培; webpack --configebpack.config.js

错误：编译失败。找不到资源文件： C：/ Users / Saad / Documents / Visual Studio 2017 / Projects / HelloAngular / HelloAngular / Client / notfound / dist / template / notfound / notfound.html

如何在Angular 2中将webpack .cshtml视图视为templateUrl

0 个答案: