Angular Cli Lazy Load WIth MVC5 Application

Question

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?

I am confused why you have angular dev server running along with local IIS Express? I assume your workflow is that you build your angular app via ng build then run it on IIS Express via port 5011? — penleychan
– penleychan, Commented Jul 19, 2017 at 14:53

Waleed Mohsin · Accepted Answer · 2017-09-24 12:32:33Z

1

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.

answered Sep 24, 2017 at 12:32

Waleed Mohsin

1,1531 gold badge10 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Waleed Mohsin Over a year ago

i would have been more happy if it solved your problem, i have tested it and it works, did it work for you ?

Collectives™ on Stack Overflow

Angular Cli Lazy Load WIth MVC5 Application

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related