Question

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

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

因为延迟加载的模块创建了chunks.js，并且这些块没有找到错误。但所有其他js成功加载。

这是加载chunks.js

的问题

我的MVC应用程序使用端口5011 Angular cli app使用端口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尝试自动从此网址加载

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

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

Answer 1

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

    }

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

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

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

经过测试验证并正常工作。

Angular Cli Lazy Load与MVC5应用程序

1 个答案: