Skip to content

Commit

Permalink
docs: update app-shell to reflect actual content (#55550)
Browse files Browse the repository at this point in the history
fixes #55507

PR Close #55550
  • Loading branch information
JeanMeche authored and AndrewKushnir committed Apr 26, 2024
1 parent 507d83d commit 967bbc1
Showing 1 changed file with 19 additions and 50 deletions.
69 changes: 19 additions & 50 deletions adev/src/content/ecosystem/service-workers/app-shell.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ It can improve the user experience by quickly launching a static rendered page (

This gives users a meaningful first paint of your application that appears quickly because the browser can render the HTML and CSS without the need to initialize any JavaScript.

Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell).

<docs-workflow>
<docs-step title="Prepare the application">
Do this with the following Angular CLI command:
Expand All @@ -15,7 +17,7 @@ ng new my-app --routing

</docs-code>

For an existing application, you have to manually add the `RouterModule` and defining a `<router-outlet>` within your application.
For an existing application, you have to manually add the `Router` and defining a `<router-outlet>` within your application.
</docs-step>
<docs-step title="Create the application shell">
Use the Angular CLI to automatically create the application shell.
Expand All @@ -28,57 +30,24 @@ ng generate app-shell

For more information about this command, see [App shell command](cli/generate#app-shell-command).

After running this command you can see that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.

<docs-code language="json">

"server": {
"builder": "@angular-devkit/build-angular:server",
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/my-app/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"development": {
"outputHashing": "none",
},
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"app-shell": {
"builder": "@angular-devkit/build-angular:app-shell",
"defaultConfiguration": "production",
"options": {
"route": "shell"
},
"configurations": {
"development": {
"browserTarget": "my-app:build:development",
"serverTarget": "my-app:server:development",
},
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
}
}
}
The command updates the application code and adds extra files to the project structure.

<code-example language="text">

src
β”œβ”€β”€ app
β”‚ β”œβ”€β”€ app.config.server.ts # server application configuration
β”‚ └── app-shell # app-shell component
β”‚ β”œβ”€β”€ app-shell.component.html
β”‚ β”œβ”€β”€ app-shell.component.scss
β”‚ β”œβ”€β”€ app-shell.component.spec.ts
β”‚ └── app-shell.component.ts
└── main.server.ts # main server application bootstrapping

</code-example>


</docs-code>
</docs-step>
<docs-step title="Verify the application is built with the shell content">
Use the Angular CLI to build the `app-shell` target.

<docs-code language="shell">

Expand Down

0 comments on commit 967bbc1

Please sign in to comment.