ng app-shell and SSR pre-renders `app-root` and not just `app-shell`

[jot-hub]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [X] build
- [ ] serve
- [ ] test
- [ ] e2e
- [X] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [X] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

~> node --version
v8.11.1
~> npm --version
6.4.1-next.0
~> ng --version

Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.3.2
typescript                        2.7.2
webpack                           4.8.3

Repro steps

Following the tutorial app shell with ssr:

1. ng new my-app-shell --routing

2. ng generate universal ngu-app-shell --client-project my-app-shell
   ===> did not add a new application as mentioned in the tutorial, but did add a new server section under architect section in angular.json with following values

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/my-app-shell-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        }

3. ng generate app-shell my-loading-shell --universal-project=ngu-app-shell --route=app-shell-path --client-project=my-app-shell
   this added app-shell section in angular.json with below options

"options": {
            "browserTarget": "my-app-shell:build", <== I changed it to `my-app-shell:build:production`
            "serverTarget": "my-app-shell:server",
            "route": "app-shell-path"
          }

4. ng run my-app-shell:app-shell
   ===> This pre-rendered app-root including app-my-loading-shell. The expectation is that it pre-renders only app-my-loading-shell and once the DOM is fully loaded at the browser, the pre-rendered content is replaced by the actual angular app.

5. npm install http-server --global

6. http-server -c-1 ./dist/my-app-shell

Observed behavior:
After step 6 mentioned above
a) localhost:8080 loads the index.html from ./dist/my-app-shell that contains both the app-root and app-my-loading-shell fully rendered
b) After the DOM is fully loaded (after downloading the whole app), there is no visible change in the browser.

Expected behavior:
a) localhost:8080 loads the index.html from ./dist/my-app-shell that contains only the app-my-loading-shell fully rendered
b) After the DOM is fully loaded (after downloading the whole app), the contents of app-my-loading-shell are replaced by the actual angular app app-root.

[jot-hub]

same behavior even with an updated angular-cli - at least I didn't have to do explicit production build - this is now available directly in angular.json (thanks to #12081).

Angular CLI: 6.2.3
Node: 8.11.1
OS: win32 x64
Angular: 6.1.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.3
@angular-devkit/build-angular     0.8.3
@angular-devkit/build-optimizer   0.8.3
@angular-devkit/build-webpack     0.8.3
@angular-devkit/core              0.8.3
@angular-devkit/schematics        0.8.3
@angular/cli                      6.2.3
@ngtools/webpack                  6.2.3
@schematics/angular               0.8.3
@schematics/update                0.8.3
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.19.1

[xban1x]

As far as I know if you use SSR then AppShell is ignored. They are mutually exclusive. SSR already gives you page fully loaded as needed and sends it to client which then loads all your code and fires up and then replaces the dom. AppShell is a loading page of sorts which you can pre-render during build and store it statically.

When running SSR you dont serve static index.html but prerendered.

[jot-hub]

I agree with all your statements except the first 2 because the tutorial based on which I submitted the issue talks exactly about how to serve an app shell with SSR. My expectation was that "index.html" shows the SSR rendered stuff before "DOMContentLoaded" event and bootstraps the angular app after the event is fired. If this assumption is not correct, I want to know what the expected behaviour should be.

[prasannapattam]

Below are my observations with app-shell and SSR:

• App Shell is associated with routing "router-outlet"
• App Shell is something similar to the content being loaded before the routing happens. The difference is that the App Shell content is shown only till DOMContentLoaded and there should not be a default route
• If there is a default route, then App Shell is not shown as the default route is render due to SSR

To achieve the scenario you mentioned above (show SSR before DOMContent load and then angular app) here are the two approaches I think it will work:

• In the AppComponent you should have only router-outlet and in the constructor or ngInit you can do the routing after checking for browser. With this, the AppShellComponent gets loaded in SSR and in the browser AppComponent routing shows the actual page
• In AppServerModule, use a different AppComponent (than the one used in AppModule). Say AppServerComponent. By doing this the AppServerComponent will be shown along with SSR and then once the DOM is loaded AppComponent is loaded.

[jot-hub]

I believe ng generate universal and ng generate app-shell commands mentioned in the description try to do what you described. I didn't do any modification or hack on top of what is mentioned in the tutorial.
app-app-shell component is supposed to be rendered by SSR and app-root is supposed to be rendered in the browser after DomContentLoaded event -but it is not working that way here.

[xban1x]

What do you use to build your app? App can be built in SSR or in AppShell mode...

[jot-hub]

ng run my-app-shell:app-shell builds the app - you can see that it is supposed to build just the 1 route with server and the rest of the app in a regular way. But both update the same index.html - not sure how this is coordinated internally.
The expectation is ng updates index.html with pre-rendered route app-shell-path and the rest of the app remains intact (not pre-rendered) and replaces the pre-rendered route at the DomContentLoaded event in the browser. In my understanding, this is what is described in the tutorial but it does not work that way.

here is the spec in angular.json for this:

.....
"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app-shell",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
....
....
"app-shell": {
          "builder": "@angular-devkit/build-angular:app-shell",
          "options": {
            "browserTarget": "my-app-shell:build",
            "serverTarget": "my-app-shell:server",
            "route": "app-shell-path"
          }
...

        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/my-app-shell-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        }

[jot-hub]

@nguniversal talks about ModuleMapLoaderModule but build:app-shell does not do this - can this be related?

[prasannapattam]

@jot-hub I am also not sure how app-shell works. I think SSR and app-shell should co-exist. I want all the common parts of the page (like headers, footers, menus) be rendered with SSR and the routing related with app-shell

If there is a default route then app-shell is not rendering in the index.html. This I didn't understand. app-shell is only present when there is no default route. This is similar to using html in router-outlet. The only difference I observed is app-shell content is not shown once DOM is loaded.

[jot-hub]

Seems similar to #9202 - but this is closed with no real solution.
Is there any documentation at all for app-shell feature of angular-cli?