Javascriptservices: Lazy loading doesn't seem to be working

[frederikprijck]

Hi,

I've been looking into ASP.NET Core 2.0 and the Angular template available in VS 2017.
A fresh install works fine, but it looks like there's no example using lazy-loading.

I wanted to try implement it based on https://github.com/aspnet/JavaScriptServices/commit/7ded0a0b60ce3a5356417a5d6102a376fe5f6802 .
In order to do so I've created a repository (using the default starter from VS2017) and added the following commit: https://github.com/frederikprijck/aspnet-angular-lazy-loading/commit/0edaa0889e1084dfad47d1674641b86c0e45332c

Note: I've disabled development build to ensure @ngtools/webpack was used.

Running the project available in the repository (https://github.com/frederikprijck/aspnet-angular-lazy-loading) results in the following error when navigating to counter.

Error: Uncaught (in promise): Error: Cannot find module './components/counter/counter.module.ngfactory'.
Error: Cannot find module './components/counter/counter.module.ngfactory'.
at webpackEmptyContext

Does the template require more changes in order to enable Lazy Loading?

Thanks

[frederikprijck]

I managed to find the cause of the error.

First of all, it was incorrect of me to try and use @ngtools/webpack. According to @MarkPieszak the starter does not support it in dev build.

So in order to use Lazy Loading in dev mode, I had to npm install angular2-router-loader and add it to the webpack config. This seems to be missing from the template.

I added a PR which fixes it.

[MarkPieszak]

We can't make any updates until the next quarter to the templates provided with dotnetcore 2.0, right @SteveSandersonMS ?

It'd be nice to have angular2-router-loader as a default for the Dev builds so others won't run into the same thing. I must of missed that one when looking at everything, apologies!

[SteveSandersonMS]

Thanks for reporting this! Closing this one in favour of #1195.

We can't make any updates until the next quarter to the templates provided with dotnetcore 2.0, right @SteveSandersonMS ?

We can make changes in the repo here any time, but when they actually ship in an updated .NET SDK depends on the .NET SDK shipping schedule :)

[MarkPieszak]

Excellent, yeah that's what I figured, great 👍

[ilennert]

Yes, had this problem. Glad I found this thread.... Dropped in the code as per #1195. Worked like a charm!

[naveedahmed1]

It seems that angular2-router-loader is now angular-router-loader. But I tried to install angular-router-loader by following the instructions mentioned at https://www.npmjs.com/package/angular-router-loader, but it didnt work.

It seems that this package has a dependency on loader-utils , which npm was unable to install.

Can you please take a look?

[chsakell]

I used the same template ASP.NET Core 2 & Angular in VS 2017 with lazy loading. It works good in dev mode after adding angular2-router-loader, it passes the production build (dotnet publish -c Release) but when deployed on Azure App Service I get the same error (_ERROR Error: Uncaught (in promise): Error: Cannot find module './product/product.module.ngfactory'_.).

webpack.config.js has the following line:

{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' }

Doesn't this mean that ngtools/webpack causes the problem? Is there any workaround for this?

[fen89]

@chsakell I have exact the same problem, dev build mode fine, production build builds fine but as soon as I start the generated project and call my lazy module I get the same error... did you find a solution?

[chsakell]

Yes @fen89 , just use the same config for both dev and prod in _webpack.config.js._
```javascript
{ test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] },
````
That worked for me.

[darlontrofy]

Is there any solution to this? I'm having the same problem today for the past 1 week..

[JihedHalimi]

We have the exact same problem with angular 6.1 AspNet Core and Azue App Service. @darlontrofy did you find a solution?

[naveedahmed1]

Try the new template.