ASP MVC Areas and Angular Lazy Loading paths

Question

I have this working but in an inelegant fashion

(1) Angular

This puts it's output in the folder

~/Areas/AreaName/Views/ControllerName/ClientApp/(all angular files here)

It has paths like

<button class="k-button" routerLink="AreaName/ControllerName/LazyLoad">LazyLoad</button>&nbsp;
<button class="k-button" [routerLink]="['AreaName/ControllerName/Home']">Home</button>&nbsp;

The route for lazy loading looks like this

{
    path: 'AreaName/ControllerName/LazyLoad',
    loadChildren: './lazyLoad/lazyLoad.module#LazyLoadedModule'
}

(2) MVC

In the AreaRegistration I have this additional route for Angular code

        context.MapRoute(
            "Angular",
            "AreaName/ControllerName/{*.}",
            new { controller = "ControllerName", action = "Index", id = UrlParameter.Optional });

And it runs ok, when it tries to load the lazy loading section it looks in the path

/AreaName/lazyLoad-lazyLoad-module.js

I could understand if it looked in '/' or 'AreaName/ControllerName' or something similar but not that path

To make this work I have code in Global.ascx.cs Application_Error which detects the 404 and redirects it to the correct path, i.e.

~/Areas/AreaName/Views/ControllerName/ClientApp/

Which then works, it loads the lazy loaded file

I'm assuming there's something I need to do on the Angular side but I'm not sure what?

NB This is not the core version of ASP MVC

(Edit, more info) I have found deployUrl in Angular.json. Unfortunately our site can be hosted in any of these ways:

https://OurSite/TopLevel
https://OurSite/_FurtherDown/TopLevel

the href will be set in the index.html, perhaps there's an equivalent for the deployUrl?

score 1 · Answer 1 · answered Feb 23 '19 at 09:39

This is more or less a duplicate of

Changing Angular 5 publish url at runtime

but specific to ASP MVC areas so I'll let it stand

I've removed the 404 code from Global.ascx

In the Index.cshtml file I have added this

window.DeployUrlFromMyProduct = "@(Request.ApplicationPath)/Areas/MyArea/Views/ControllerName/Ang/";

And in the app.module.ts,

declare var __webpack_public_path__: any;
__webpack_public_path__ = (<any>window).DeployUrlFromKiosk;

I know the other question said that the public var webpack_public_path doesn't work but it seems to for me

Minimal testing so far, any issues and I'll add them as a comment

ASP MVC Areas and Angular Lazy Loading paths

1 Answers1