Conversation
Co-authored-by: Krzysztof Platis <platonn.git@gmail.com>
Co-authored-by: Krzysztof Platis <platonn.git@gmail.com>
Co-authored-by: Krzysztof Platis <platonn.git@gmail.com>
_pages/home/updating-to-version-221121.7/modernize-app-to-standalone-bootstrap-application.md
Outdated
Show resolved
Hide resolved
| imports: [ | ||
| StoreModule.forRoot({}), | ||
| AppRoutingModule, | ||
| EffectsModule.forRoot([]), | ||
| SpartacusModule | ||
| ], | ||
| providers: [ | ||
| ], |
There was a problem hiding this comment.
The imports and providers array might contain other customer's custom items. that's why in the original code snippet I added /*...*/.
_pages/home/updating-to-version-221121.7/modernize-app-to-standalone-bootstrap-application.md
Outdated
Show resolved
Hide resolved
| Specifically, remove `provideClientHydration(withEventReplay(), withNoHttpTransferCache())` from the `providers` array. Your `app.module.ts` file should look as follows: | ||
|
|
||
| ```ts | ||
| @NgModule({ | ||
| /* ... */ | ||
| providers: [ | ||
| /* ... */ | ||
| ], | ||
| }) | ||
| export class AppModule { } | ||
| }; | ||
| ``` |
There was a problem hiding this comment.
| Specifically, remove `provideClientHydration(withEventReplay(), withNoHttpTransferCache())` from the `providers` array. Your `app.module.ts` file should look as follows: | |
| ```ts | |
| @NgModule({ | |
| /* ... */ | |
| providers: [ | |
| /* ... */ | |
| ], | |
| }) | |
| export class AppModule { } | |
| }; | |
| ``` | |
| Specifically, remove `provideClientHydration(withEventReplay(), withNoHttpTransferCache())` from the `providers` array. Your `app.module.ts` file should look as follows: | |
| ```ts | |
| @NgModule({ | |
| /* ... */ | |
| providers: [ | |
| /* ... there should be no `provideClientHydration(withEventReplay(), withNoHttpTransferCache())` */ | |
| ], | |
| }) | |
| export class AppModule { } | |
| }; |
|
|
||
| ## Next | ||
| Now, consider migrating your custom components to Standalone Components, by following this guide: [Standalone Components in Spartacus since 221121.7.0 -> Migrating Your Custom Components to Standalone Components](./standalone-components-in-spartacus.md#migrating-your-custom-components-to-standalone-components). | ||
| Although not required, it is also recommended that you migrate your custom components to standalone components. For more information, see [Migrating to Standalone Components in Spartacus](standalone-components-in-spartacus.md). |
There was a problem hiding this comment.
| Although not required, it is also recommended that you migrate your custom components to standalone components. For more information, see [Migrating to Standalone Components in Spartacus](standalone-components-in-spartacus.md). | |
| It is also strongly recommended that you migrate your custom components to standalone components. For more information, see [Migrating to Standalone Components in Spartacus](standalone-components-in-spartacus.md). |
| ### NgModules are still in use | ||
| Angular `NgModules` are still in use in Spartacus just for organizing features into cohesive modules, but no longer for declaring components. |
There was a problem hiding this comment.
If we left this separate doc, then only this sentence would remain, as we agreed offline.
I understand you decided to remove this doc alltoghether, because this sentence was too little to justify a separate doc for it. Works for me 👍
| ```bash | ||
| ng update @angular/core@21 @angular/cli@21 @ngrx/store@21 angular-oauth2-oidc@20 @ng-select/ng-select@21 ngx-infinite-scroll@21 --force | ||
| git add . | ||
| git commit -m "update angular 21 and 3rd party deps angular 21 compatible" | ||
| ``` |
There was a problem hiding this comment.
The usage of v20 instead of v21 for angular-oauth2-oidc@20 might be confusing for customers. they might create support requests suggesting it's a typo.
What about adding a disclaimer that at the time of the release, the latest available version of angular-oauth2-oidc is v20, but the author of the library says it works also with Angular 21 as well. Source: manfredsteyer/angular-oauth2-oidc#1491 (comment)
| If your storefront application does use SSR, you must enable non-destructive hydration. Enabling non-destructive hydration aligns your app with current Angular best practices, making it easier to maintain and update your storefront application. | ||
| #### How to enable it | ||
| Non-destructive hydration is an Angular feature that improves performance by reusing the server-rendered DOM instead of destroying and recreating it on the client side. This reduces the Time to Interactive (TTI) metric and provides a better user experience. |
There was a problem hiding this comment.
| Non-destructive hydration is an Angular feature that improves performance by reusing the server-rendered DOM instead of destroying and recreating it on the client side. This reduces the Time to Interactive (TTI) metric and provides a better user experience. | |
| Non-destructive hydration is an Angular feature that improves performance by reusing the server-rendered DOM instead of destroying and recreating it on the client side. This helps to avoid a flickering when transitioning from server-side DOM to client-side rendered DOM in the browser, which provides a better user experience. |
| @@ -202,253 +199,94 @@ export const appConfig: ApplicationConfig = { | |||
| }; | |||
| ``` | |||
There was a problem hiding this comment.
I'm sorry, I realized only now this paragraph is targeted to non-existing audience.
At this time or reading the document, customers' apps are likely not yet migrated to standalone. So I guess we can remove this paragraph and code snippet.
Only in the next section below ## Modernizing Your Storefront to Use the Standalone Bootstrap Application we'll tell customers to move this provideClientHydration() call from app.module.ts to app.config.ts.
| ##### Known Warning: NG05001 | ||
| ### Known Warning: NG05001 | ||
|
|
||
| After enabling hydration, you may see the following warning in your console: |
There was a problem hiding this comment.
| After enabling hydration, you may see the following warning in your console: | |
| After enabling hydration, you may see the following warning in your console in dev-mode build: |
| ``` | ||
| Spartacus provides dedicated schematics to automatically modernize your app to use the Angular `bootstrapApplication()` API and convert your root `AppComponent` to a standalone component. | ||
| **Note:** The schematics to modernize your app only migrate your root `AppComponent` to become a standalone component. The schematics do not migrate your custom components to become standalone components. For more information about migrating your custom components, see [Standalone Components in Spartacus](#standalone-components-in-spartacus). |
There was a problem hiding this comment.
| **Note:** The schematics to modernize your app only migrate your root `AppComponent` to become a standalone component. The schematics do not migrate your custom components to become standalone components. For more information about migrating your custom components, see [Standalone Components in Spartacus](#standalone-components-in-spartacus). | |
| **Note:** The schematics to modernize your app only migrate your root `AppComponent` to become a standalone component. The schematics do not migrate your custom components to become standalone components. For more information about migrating your custom components, see [Standalone Components in Spartacus](#standalone-components-in-spartacus). But before migrating all your custom components to standalone, please follow the migration described here below. |
…dalone-bootstrap-application.md Co-authored-by: Krzysztof Platis <platonn.git@gmail.com>
No description provided.