Angular Cli Lazy Load與MVC5應用程序

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嘗試自動從此URL加載

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

告訴index方法將包含任何其他文件名的任何請求重定向到localhost：4200

實際發生的是我們的index.cshtml向其自身發出請求，其中我們的塊在其他服務器上提供，即localhost：4200，所以我們在這里做的是，我們將所有包含塊的請求重定向到localhost：4200。

經過測試驗證和工作解決方案。