带有 MVC5 应用程序的 Angular Cli 延迟加载 [英] Angular Cli Lazy Load WIth MVC5 Application

问题描述

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

我面临的问题是我有 MVC5 应用程序在端口 5011 上运行，而角度应用程序使用 angular cli 使用端口 4200.当我运行 MVC 应用程序时，除了延迟加载模块外，一切正常.

因为延迟加载模块创建了 chunks.js 并且这些块给出了未找到的错误.但是所有其他js都加载成功.

这是加载 chunks.js 的问题

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

<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 加载

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

为什么块端口与 Angular cli 端口不同?如何解决这个问题?

解决方案

1) 在 web.config 中添加以下内容

<modules runAllManagedModulesForAllRequests="true"/><处理程序><add name="ApiURIs-ISAPI-Integrated-4.0_2"路径="/*"动词="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS"type="System.Web.Handlers.TransferRequestHandler"preCondition="integratedMode,runtimeVersionv4.0"/></处理程序></system.webServer>

<块引用>

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

2) 在 App_Start/RouterConfig.cs 中添加以下内容

public static void RegisterRoutes(RouteCollection routes){routes.IgnoreRoute("{resource}.axd/{*pathInfo}");路线.MapRoute(name: "重定向",网址:{*.url}"，默认值:新 { 控制器 =主页"，动作 =索引"});}

<块引用>

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

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

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

<块引用>

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

实际发生的事情是我们的 index.cshtml 正在向自己发出请求，而我们的块正在其他服务器上提供，即 localhost:4200 ，所以我们在这里做的是，我们将所有包含路径中的块的请求重定向到 localhost:4200.

经过测试验证的有效解决方案.

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

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.

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

Here is the problem loading chunks.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>

While chunks.js try to load from this url automatically

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

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

解决方案

1) Add Following in 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>

Tell iis to handle paths with dots i.e 0.chunk.js

2) Add Following in 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) Add Following in HomeController Index Method

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

Tell index method to redirect any request containing any other file name to 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.

It is tested verified and working solution.

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