Javascript 如何将webpack.cshtml视图打包为Angular 2中的templateUrl

我已经在.NET Core解决方案中设置了Angular 2项目，我遇到了这样一种情况：我需要使用.cshtml视图文件从服务器渲染，并将它们用作Angular组件中的模板。我正在使用webpack将它们打包

如何排除templateUrl或要排除的模板（不编译到output.js文件），而是动态解析

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

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命令时，它会给我错误：

“node_modules/.bin/ngc-p tsconfig aot.json”&&webpack--configeback.config.js

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

---

AOT旨在编译“angular template”（角度模板）逻辑并将其打包为优化的JavaScript，而不包括在运行时解析这些模板的引擎。这在构建中为您节省了一些空间。如果您想使用在“服务器请求”上呈现的模板内容，那么AOT不适合您，因为您需要运行时引擎来解释响应。所以我认为你有一个很大的概念性理解需要去理解。非常感谢尼尔。这是有道理的，是的，我对Angular 2和Webpack+AOT非常陌生。我只是想弄清楚是否有任何方法可以动态加载MVC视图，但我同意AOT不适合这样做。

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
        })
    ]
};