Asp.net mvc 如何使用mvc页面作为angular 5 templateUrl

我正在迁移使用systemjs的旧项目，以开始使用webpack，但现在我在加载templateUrl时遇到了问题

我的旧项目在angular Components的templateUrl属性上使用mvc视图，但在我的新项目中这不起作用

当我使用templateUrl调用html文件时，一切都很好

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

但是，当我调用提供页面的mvc路由时，它不起作用。（如果在浏览器中手动写入，则管线将正常工作）

我的mvc控制器类：

public class TesteController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

---

因此，我需要将我的mvc视图加载为templateUrl，有人能帮我吗？

这可以做到，它需要使用您自己的webpack配置，而不是angular cli，这样您就可以使用webpack中的一个标准typescript编译器，在构建时不会尝试访问templateUrl路径

假设您当前正在使用angular cli构建angular应用程序（您没有提到您当前的配置？），那么您需要弹出angular cli配置，以便angular创建一个webpack.config.js文件，然后您可以着手更改配置以满足您的需要

以下2个命令将使您脱离angular cli并准备好直接使用webpack（如果您使用angular 6，则我认为弹出功能可能已禁用，但它应适用于angular 4/5）：

ng eject

告诉Angular CLI生成webpack.config.js文件

npm install

然后安装直接使用webpack配置构建应用程序所需的新依赖项

然后，您需要浏览webpack.config.js并对其进行更改，以使其适用于您（您需要在webpack上仔细阅读，因为当您第一次浏览它时，大部分内容都没有多大意义，但值得一试，以便正确配置它），要使mvc视图正常工作，您需要更改模块配置，更新typescript文件的加载程序（我们使用ts加载程序，因为它提供了扩展，允许使用线程加快构建速度，但也有其他扩展），并添加html/cshtml文件的加载程序

下面是一个配置片段，它让我们使用组件模板的mvc视图路径：

    module: {
        rules: [
            {
                test: /\.aspx$/i,
                loader: 'raw-loader'
            },
            {
                test: /\.(cs)?html$/,
                loader: 'raw-loader'
            },
            {
                test: /\.(eot|svg|cur)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:20].[ext]',
                    limit: 10000
                }
            },
            {
                test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[hash:20].[ext]',
                    limit: 10000
                }
            },
            {
                test: /\.ts$/,
                use: [
                    { loader: 'cache-loader' },
                    {
                        loader: 'thread-loader',
                        options: {
                            // there should be 1 cpu for the fork-ts-checker-webpack-plugin
                            workers: require('os').cpus().length - 1
                        }
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            happyPackMode: true // IMPORTANT! use happyPackMode mode to speed-up compilation and reduce errors reported to webpack
                        }
                    },
                ]
            },
            {
                test: /\.(ts|js)$/,
                loaders: [
                    'angular-router-loader'
                ]
            }
        ]
    }

这是一个有点痛苦的过程，但绝对可以做到

---

请记住，使用此配置，您将无法使用AOT compliation来提高性能…

这样您就可以在实际使用组件时而不是在加载角度时获取模板URL来加载mvc视图。我遇到的问题是，当角度加载时，所有组件都向asp.net mvc发出http请求。我必须有很多页，这是有效的。

    module: {
        rules: [
            {
                test: /\.aspx$/i,
                loader: 'raw-loader'
            },
            {
                test: /\.(cs)?html$/,
                loader: 'raw-loader'
            },
            {
                test: /\.(eot|svg|cur)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:20].[ext]',
                    limit: 10000
                }
            },
            {
                test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[hash:20].[ext]',
                    limit: 10000
                }
            },
            {
                test: /\.ts$/,
                use: [
                    { loader: 'cache-loader' },
                    {
                        loader: 'thread-loader',
                        options: {
                            // there should be 1 cpu for the fork-ts-checker-webpack-plugin
                            workers: require('os').cpus().length - 1
                        }
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            happyPackMode: true // IMPORTANT! use happyPackMode mode to speed-up compilation and reduce errors reported to webpack
                        }
                    },
                ]
            },
            {
                test: /\.(ts|js)$/,
                loaders: [
                    'angular-router-loader'
                ]
            }
        ]
    }