@@ -64,6 +64,11 @@ The command creates the following folder structure.
app/ … // <-- application code
+
+
+ app.module.ts // <-- * client-side application module
+
+
app.server.module.ts // <-- * server-side application module
@@ -87,9 +92,33 @@ The command creates the following folder structure.
-The files marked with `*` are new and not in the original tutorial sample.
+### Step 2. Enable Client Hydration
-### Universal in action
+
+
+The hydration feature is available for [developer preview](https://angular.io/guide/releases#developer-preview). It's ready for you to try, but it might change before it is stable.
+
+
+
+Hydration is the process that restores the server side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes. Learn more about hydration in [this guide](guide/hydration).
+
+You can enable hydration by updating the `app.module.ts` file. Import the `provideClientHydration` function from `@angular/platform-browser` and add the function call to the `providers` section of the `AppModule` as shown below.
+
+```typescript
+import {provideClientHydration} from '@angular/platform-browser';
+// ...
+
+@NgModule({
+ // ...
+ providers: [ provideClientHydration() ], // add this line
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+ // ...
+}
+```
+
+### Step 3. Start the server
To start rendering your application with Universal on your local system, use the following command.
@@ -99,7 +128,9 @@ npm run dev:ssr
-Open a browser and navigate to `http://localhost:4200`.
+### Step 4. Run your application in a browser
+
+Once the web server starts, open a browser and navigate to `http://localhost:4200`.
You should see the familiar Tour of Heroes dashboard page.
Navigation using `routerLinks` works correctly because they use the built-in anchor \(`
`\) elements.
@@ -127,7 +158,7 @@ The server-rendered application still launches quickly but the full client appli
-## Why use server-side rendering?
+## Why use Server-Side Rendering?
There are three main reasons to create a Universal version of your application.