具有MVC5应用的角Cli延迟负载 [英] Angular Cli Lazy Load WIth MVC5 Application

问题描述

我正在使用Angular 4构建MVC5应用程序，并且正在使用Angular Cli创建角度应用程序.

I am building MVC5 application with Angular 4 and I am using Angular Cli to create angular app.

我面临的问题是我的MVC5应用程序在端口5011上运行，而Angular应用程序在4200端口上使用angular cli运行.当我运行MVC应用程序时，除了延迟加载的模块之外，其他所有功能都可以正常工作.

The problem I am facing I have MVC5 application running on port 5011 while angular app using angular cli using a port 4200. When I run the MVC application everything work fine except lazy loaded module.

因为延迟加载的模块创建了chunks.js，而这些chunk却给出了未找到的错误.但是所有其他js均已成功加载.

Because lazy loaded module create chunks.js and those chunks are giving error not found. But all other js loaded successfully.

这是加载chunks.js的问题

Here is the problem loading chunks.js

我的MVC应用程序使用端口5011 Angular CLI应用程序使用端口4200 我在_Layout.cshtml中引用js文件如下

My MVC application use port 5011 Angular cli app use port 4200 I reference js files in my _Layout.cshtml are as follows

<script type="text/javascript" src="http://localhost:4200/inline.bundle.js"></script>
        <script type="text/javascript" src="http://localhost:4200/polyfills.bundle.js"></script>
        <script type="text/javascript" src="http://localhost:4200/styles.bundle.js"></script>
        <script type="text/javascript" src="http://localhost:4200/vendor.bundle.js"></script>
        <script type="text/javascript" src="http://localhost:4200/main.bundle.js"></script>

chunks.js尝试自动从该URL加载

While chunks.js try to load from this url automatically

http://localhost:5011/0.chunk.js

为什么块端口与Angular cli端口不同?该如何解决?

Why is chunks port different than Angular cli port? how to resolve this issue?

推荐答案

1)在web.config中添加关注

<system.webServer>
<modules runAllManagedModulesForAllRequests="true" />
<handlers>
<add name="ApiURIs-ISAPI-Integrated-4.0_2"
path="/*"
verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS"
type="System.Web.Handlers.TransferRequestHandler"
preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>

告诉iis处理带点的路径，即 0.chunk.js

2)在App_Start/RouterConfig.cs中添加关注

public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.MapRoute(
        name: "Redirect",
        url: "{*.url}",
        defaults: new { controller = "Home", action = "Index" }
        );

    }

告诉路由器将所有请求重定向到家庭控制器的索引

Tell Router to redirect all requests to index of home controller

3)在HomeController索引方法中添加以下内容

public ActionResult Index()
    {
        var a = Request.Url.AbsoluteUri.ToString();
        var b = Request.RawUrl.ToString();
        if(b!="/") return Redirect("http://localhost:4200"+b);
        return View();
    }

告诉索引方法将包含任何其他文件名的任何请求重定向到 本地主机:4200

Tell index method to redirect any request containing any other file name to localhost:4200

实际上发生的是我们的index.cshtml向自身发出请求，因此我们的数据块正在其他服务器(例如localhost:4200)处提供服务， 所以我们在这里要做的是，将所有包含其路径中的块的请求重定向到localhost:4200.

What actually happening is our index.cshtml is making request to itself wherease our chunks are being served at other server i.e localhost:4200 , So what we are doing here is , we are redirecting all request containing chunks in their path to localhost:4200.

这是经过测试且可正常使用的解决方案.

这篇关于具有MVC5应用的角Cli延迟负载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！