Question

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

我的旧项目在angular componentes的templateUrl属性上使用mvc视图，但是我的新项目不起作用。

当我使用templateUrl调用html文件时，一切正常。

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

但是，当我打电话给提供页面的mvc路线时，不行。（如果您在浏览器中手动编写，则路由可以正常工作）

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

我的mvc控制器类：

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

所以，我需要将我的mvc视图加载为templateUrl，任何人都可以帮助我吗？

Answer 1

这是可以做到的，它需要使用您自己的webpack配置而不是angular-cli，以便您可以使用webpack中的一种标准打字稿编译器，而不会在构建时尝试访问templateUrl路径。

假设您当前正在使用angular-cli来构建您的角度应用程序（您还没有提到您的当前配置？），那么您需要弹出angular-cli配置，以便角度创建一个webpack.config.js文件，然后您可以根据自己的需要更改配置。

以下2条命令将使您脱离angular-cli并准备直接使用webpack（如果您使用的是Angle 6，则我认为弹出功能可能已被禁用，但它应在angular 4/5上工作）： / p>

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

npm install然后安装直接使用webpack配置来构建应用所需的新依赖项。

然后您需要遍历webpack.config.js并对其进行更改，以使其适合您（您需要对webpack进行大量阅读，就像第一次阅读时一样）没什么意义，但是值得一试，以便您可以正确配置它），要使mvc视图正常工作，您需要更改模块配置，更新Typescript文件的加载程序（我们使用ts-loader提供了扩展程序，这些扩展程序允许使用线程进行更快的构建以加快速度，但是那里也有其他程序），并为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修正来提高性能...

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

1 个答案: