As I understand, using App Shell have a meaning only if I don't use server-side rendering. If I use Universal-app for server-side rendering, my web-server returns not blank page, so using App Shell is redundant.

But I need some kind of App Shell for PWA, so I have to provide some URL with App Shell by myself without using ng generate app-shell ...

Please correct me, if I missed something.

Hi,

I have investigated this issue to a degree. I also cannot find any way of using app-shells with Universal...

Sorry i wrote a novel, feel free to skip down to the solutions

Conflict:

• Prerendering the app shell is done with the app server module
• The ModuleMapLoaderModule requires a module map, without it the app shell wont render
• It seems extraProviders during bootstrap are the bottom layer of providers
  • Providing a dummy module map or the app shell rendering will fix that but break lazy loaded routes on the server as mentioned by @krivochenko

Solutions:

• Yes, you can have a normal server app with an app shell route and have the ngsw-config point to the route with the app shell instead of index.html
  • When someone installs a version of the PWA, it will go to the server rendered route and you will have your app shell
  • You can do this today but it's a little wasteful to have the server generate it at request time
  • It should be possible to prerender the app shell at build time AND server render
• You can write your own post process script to render the app shell but this is what the CLI intends to do for you
• These are possible solutions for the CLI
  • When rendering the app shell, it provides a dummy module map.
    • This should be the simplest/ easiest solution but it adds a (Angular team controlled) dependency to the CLI
  • The ModuleMapNgFactoryLoader is modified to have the module map be optional so that DI doesn't break
    • I had some trouble with this having a null module map even though one was provide in extraproviders in the server executable
    • This also isn't exactly kosher because the module map is pretty much require for the provider to work

@krivochenko Your solution should work, if you need an example, let me know

@hansl @Brocco Should we pursue providing a dummy moule map here?

It would look like

    const html = await renderModuleFactory(AppServerModuleNgFactory, {
        url: options.url,
        document: index,
        extraProviders: [
            provideModuleMap({})
        ]
    });

@Brocco you mentioned that app shell feature in CLI is not documented when we spoke in ng-atl. Can you tell me what is the process to get that documented? Thanks.

Any update on this?

I looked into this and the problem is that when using the RouterModule.forRoot() in app.server.module.ts NgModuleFactoryLoader is not being provided as ModuleMapNgFactoryLoader from @nguniversal/module-map-ngfactory-loader but rather NgModuleFactoryLoader from @angular/core as the RouterModule is bootstrapped in prior to ModuleMapLoaderModule

To fix this one need to add the following in AppServerModule so that the provider is updated across the board;

  providers: [{
    provide: NgModuleFactoryLoader,
    useClass: ModuleMapNgFactoryLoader
  }],

That said, this only works with the latest packages of the dependencies.

Created an example repo here: https://github.com/alan-agius4/universal-lazy-loading-app-shell

//cc @vikerman

@alan-agius4 - The provider should be used at the platform providers level and not the ServerAppModule

https://github.com/angular/universal-starter/blob/master/server.ts#L28

@vikerman that does work as well. Thanks for your input

@alan-agius4 your solution does not work for me. I keep getting the error: Cannot find module 'app/pages/contacts/contacts.module.ngfactory'

I solve my problem doing the following:

ng run my-app:app-shell:production
sed -i -e "s/RouterModule.forRoot/\\/\\/ RouterModule.forRoot/g" path/to/app.server.module.ts
ng run my-app:server
sed -i -e "s/\\/\\/ RouterModule.forRoot/RouterModule.forRoot/g" path/to/app.server.module.ts

Hi @csbenjamin, please note that this issue is closed.

If this issue is still happening even with changes stated in the documentation, please open a new issue with a minimal reproduction and a step by step guide. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

@alan-agius4 Thanks for the reply. Here is the new issue
#12921
There I put a repo as you ask
https://github.com/csbenjamin/app-shell-plus-univeral-plus-lazy-routing

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}