Error while Lazy Loading Angular Modules With MVC5 Application

Question

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

The problem is that the application is running on port 7076 while angular app using angular cli using a port 4200. When I run the MVC application everything work fine except lazy loaded module. For all *.chunk.js files the browser looks those file directly in the application root directory, whereas these files are under /dist/ directory.

How can we make the *.chunk.js files be loaded from dist folder?

@trichetriche: Already all the *.bundle.js files are referred from dist folder. But the *.module.chunk.js files are generated for lazy loaded modules. And these *.module.chunk.js files are referred from directly the solution. So what configuration/setting is required to refer the *.module.chunk.js files from /dist/ folder — Quest
– Quest, Commented Jun 11, 2018 at 11:28
All of your built files will be in the dist folder. Per definition, you can simply take that dist folder, and move it around : that's like a .jar in Java or a .exe in Windows. If your files aren't in it, don't seek how to put them in it : seek why they aren't in it. — user4676340
– user4676340, Commented Jun 11, 2018 at 11:30
@trichetriche: The question is why the lazy loaded module files *.module.chunk.js files are not referenced from dist folder. All other bundles like vendor.bundle.js etc are referenced from dist folder but not chunk files. How can we make the chunk files load from dist folder — Quest
– Quest, Commented Jun 11, 2018 at 13:31
I'm telling you they are. I have 6 lazy loaded modules on my current project, so I am pretty sure they are. That's why I'm telling you, find out why they're not in your dist folder on your side. — user4676340
– user4676340, Commented Jun 11, 2018 at 13:40

Dadasaheb Karande · Accepted Answer · 2018-11-28 11:32:36Z

3

I've read the above, realize this is an old question, but it's unresolved so trying to give an answer that helps who is facing similar issue.

To read lazy loading chunk files from 'dist' folder you need to set 'deployUrl' property from angular.json (Angular CLI) file.

"deployUrl" : "dist/",

Please make sure "/" should be there at end of dist folder path or url.

answered Nov 28, 2018 at 11:32

Dadasaheb Karande

1651 silver badge11 bronze badges

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

2 Comments

Quest Over a year ago

Thanks for the accurate and precise answer. This saved me a lot of time.

ntziolis Over a year ago

This works. The only thing is that the lazy loaded modules do NOT make use of the MVC hashing that comes with bundling. So dependent on the cache policy on the server you might be served with an old version of your lazy loaded modules. The only way around that is enable hashing during angular builds. This means for the other files you use MVC hashing and for lazy loaded modules you use angular hashing to prevent loading old files.

Collectives™ on Stack Overflow

Error while Lazy Loading Angular Modules With MVC5 Application

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related