-
Notifications
You must be signed in to change notification settings - Fork 12k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add long description to app-shell subcommand
- Loading branch information
1 parent
a721c82
commit 9a3b3ad
Showing
2 changed files
with
48 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
An app shell lets Universal render a portion of your application via a route at build time. | ||
This gives users a meaningful first paint of your application that appears quickly | ||
because the browser can simply render the HTML without the need to initialize any JavaScript. | ||
|
||
Use this command with a routing app that is accompanied by a Universal server-side app. | ||
|
||
To create an app shell, use the following command. | ||
|
||
<code-example format="." language="bash"> | ||
ng generate app-shell --client-project my-app --universal-project server-app | ||
</code-example> | ||
|
||
* `my-app` is the name of your client application | ||
* `server-app` is the name of the Universal (server) application | ||
|
||
The command adds two new architect build targets to your `angular.json` configuration file (along with a few other changes). | ||
|
||
<code-example format="." language="none" linenums="false"> | ||
"server": { | ||
"builder": "@angular-devkit/build-angular:server", | ||
"options": { | ||
"outputPath": "dist/my-app-server", | ||
"main": "src/main.server.ts", | ||
"tsConfig": "src/tsconfig.server.json" | ||
} | ||
}, | ||
"app-shell": { | ||
"builder": "@angular-devkit/build-angular:app-shell", | ||
"options": { | ||
"browserTarget": "my-app:build", | ||
"serverTarget": "my-app:server", | ||
"route": "shell" | ||
} | ||
} | ||
</code-example> | ||
|
||
To verify the that the app has been built with the default shell content: | ||
|
||
1. Run the app-shell target. | ||
|
||
<code-example format="." language="bash"> | ||
ng run my-app:app-shell | ||
</code-example> | ||
|
||
1. Open `dist/app-shell/index.html` in your browser. | ||
|
||
The default text "app-shell works!" verifies that the app-shell route was rendered as part of the output. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters