Skip to content

Commit 183d194

Browse files
MarkTechsonkirjs
MarkTechson
authored and
kirjs
committed
docs: add 20 to 21 update guide
1 parent 29185a8 commit 183d194

File tree

1 file changed

+161
-0
lines changed

1 file changed

+161
-0
lines changed

‎adev/src/app/features/update/recommendations.ts‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2750,4 +2750,165 @@ export const RECOMMENDATIONS: Step[] = [
27502750
action:
27512751
'Route configurations are now validated more rigorously. Routes that combine `redirectTo` and `canMatch` protections will generate an error, as these properties are incompatible together by default.',
27522752
},
2753+
{
2754+
action:
2755+
"In the application's project directory, run `ng update @angular/core@20 @angular/cli@21` to update your application to Angular v21.",
2756+
level: ApplicationComplexity.Basic,
2757+
necessaryAsOf: 2100,
2758+
possibleIn: 2100,
2759+
step: '21.0.0_ng_update',
2760+
},
2761+
2762+
{
2763+
possibleIn: 2100,
2764+
necessaryAsOf: 2100,
2765+
level: ApplicationComplexity.Basic,
2766+
material: true,
2767+
step: 'update @angular/material',
2768+
action: 'Run `ng update @angular/material@21`.',
2769+
},
2770+
{
2771+
possibleIn: 2100,
2772+
necessaryAsOf: 2100,
2773+
level: ApplicationComplexity.Advanced,
2774+
step: '21.0.0-update-signal-input-access-in-custom-elements',
2775+
action:
2776+
'When using signal inputs with Angular custom elements, update property access to be direct (`elementRef.newInput`) instead of a function call (`elementRef.newInput()`) to align with the behavior of decorator-based inputs.',
2777+
},
2778+
{
2779+
possibleIn: 2100,
2780+
necessaryAsOf: 2100,
2781+
level: ApplicationComplexity.Advanced,
2782+
step: '21.0.0-zone-scheduler-behavior-change',
2783+
action:
2784+
"If using `provideZoneChangeDetection` without the ZoneJS polyfill, note that the internal scheduler is now always enabled. Review your app's timing as this may alter behavior that previously relied on the disabled scheduler.",
2785+
},
2786+
{
2787+
possibleIn: 2100,
2788+
necessaryAsOf: 2100,
2789+
level: ApplicationComplexity.Basic,
2790+
step: '21.0.0-provide-zone-change-detection-required',
2791+
action:
2792+
"Zone-based applications should add `provideZoneChangeDetection()` to your application's root providers. For standalone apps, add it to the `bootstrapApplication` call. For NgModule-based apps, add it to your root `AppModule`'s `providers` array. An automated migration should handle this.",
2793+
},
2794+
{
2795+
possibleIn: 2100,
2796+
necessaryAsOf: 2100,
2797+
level: ApplicationComplexity.Advanced,
2798+
step: '21.0.0-remove-interpolation-option',
2799+
action:
2800+
"Remove the 'interpolation' property from your @Component decorators. Angular now only supports the default '{{' and '}}' interpolation markers.",
2801+
},
2802+
{
2803+
possibleIn: 2100,
2804+
necessaryAsOf: 2100,
2805+
level: ApplicationComplexity.Medium,
2806+
step: '21.0.0-remove-moduleid-property',
2807+
action:
2808+
"Remove the 'moduleId' property from your @Component decorators. This property was used for resolving relative URLs for templates and styles, a functionality now handled by modern build tools.",
2809+
},
2810+
{
2811+
possibleIn: 2100,
2812+
necessaryAsOf: 2100,
2813+
level: ApplicationComplexity.Medium,
2814+
step: '21.0.0-ng-component-outlet-content-type-change',
2815+
action:
2816+
'The `ngComponentOutletContent` input has been strictly typed from `any[][]` to `Node[][]`. Update the value you pass to this input to match the new `Node[][] | undefined` type.',
2817+
},
2818+
{
2819+
possibleIn: 2100,
2820+
necessaryAsOf: 2100,
2821+
level: ApplicationComplexity.Basic,
2822+
step: '21.0.0-stricter-host-binding-type-checking',
2823+
action:
2824+
"Host binding type checking is now enabled by default and may surface new build errors. Resolve any new type errors or set `typeCheckHostBindings: false` in your `tsconfig.json`'s `angularCompilerOptions`.",
2825+
},
2826+
{
2827+
possibleIn: 2100,
2828+
necessaryAsOf: 2100,
2829+
level: ApplicationComplexity.Basic,
2830+
step: '21.0.0-typescript-5.9-required',
2831+
action:
2832+
"Update your project's TypeScript version to 5.9 or later. The `ng update` command will typically handle this automatically.",
2833+
},
2834+
{
2835+
possibleIn: 2100,
2836+
necessaryAsOf: 2100,
2837+
level: ApplicationComplexity.Medium,
2838+
step: '21.0.0-remove-application-config-from-platform-browser',
2839+
action:
2840+
'The `ApplicationConfig` export from `@angular/platform-browser` has been removed. Update your imports to use `ApplicationConfig` from `@angular/core` instead.',
2841+
},
2842+
{
2843+
possibleIn: 2100,
2844+
necessaryAsOf: 2100,
2845+
level: ApplicationComplexity.Advanced,
2846+
step: '21.0.0-remove-ignore-changes-outside-zone-option',
2847+
action:
2848+
'The `ignoreChangesOutsideZone` option for configuring ZoneJS is no longer available. Remove this option from your ZoneJS configuration in your polyfills file.',
2849+
},
2850+
{
2851+
possibleIn: 2100,
2852+
necessaryAsOf: 2100,
2853+
level: ApplicationComplexity.Medium,
2854+
step: '21.0.0-testbed-rethrows-errors-with-provideZoneChangeDetection',
2855+
action:
2856+
'Update tests using `provideZoneChangeDetection` as TestBed now rethrows errors. Fix the underlying issues in your tests or, as a last resort, configure TestBed with `rethrowApplicationErrors: false` to disable this behavior.',
2857+
},
2858+
{
2859+
possibleIn: 2100,
2860+
necessaryAsOf: 2100,
2861+
level: ApplicationComplexity.Medium,
2862+
step: '21.0.0-router-navigation-timing-changed',
2863+
action:
2864+
'Update tests that rely on router navigation timing. Navigations may now take additional microtasks to complete. Ensure navigations are fully completed before making assertions, for example by using `fakeAsync` with `flush` or waiting for promises/observables to resolve.',
2865+
},
2866+
{
2867+
possibleIn: 2100,
2868+
necessaryAsOf: 2100,
2869+
level: ApplicationComplexity.Medium,
2870+
step: '21.0.0-test-bed-provides-fake-platform-location',
2871+
action:
2872+
'Tests using `TestBed` might be affected by the new fake `PlatformLocation`. If your tests fail, provide the old `MockPlatformLocation` from `@angular/common/testing` via `{provide: PlatformLocation, useClass: MockPlatformLocation}` in your `TestBed` configuration.',
2873+
},
2874+
{
2875+
possibleIn: 2100,
2876+
necessaryAsOf: 2100,
2877+
level: ApplicationComplexity.Advanced,
2878+
step: '21.0.0-remove-upgrade-adapter',
2879+
action:
2880+
'The `UpgradeAdapter` has been removed. Update your hybrid Angular/AngularJS application to use the static APIs from the `@angular/upgrade/static` package instead.',
2881+
},
2882+
{
2883+
possibleIn: 2100,
2884+
necessaryAsOf: 2100,
2885+
level: ApplicationComplexity.Medium,
2886+
step: '21.0.0-form-array-directive-conflict',
2887+
action:
2888+
'The new standalone `formArray` directive might conflict with existing custom directives or inputs. Rename any custom directives named `FormArray` or inputs named `formArray` on elements that also use reactive forms to resolve the conflict.',
2889+
},
2890+
{
2891+
possibleIn: 2100,
2892+
necessaryAsOf: 2100,
2893+
level: ApplicationComplexity.Advanced,
2894+
step: '21.0.0-ngmodulefactory-removed',
2895+
action:
2896+
'The deprecated `NgModuleFactory` has been removed. Update any code that uses `NgModuleFactory` to use `NgModule` directly, which is common in dynamic component loading scenarios.',
2897+
},
2898+
{
2899+
possibleIn: 2100,
2900+
necessaryAsOf: 2100,
2901+
level: ApplicationComplexity.Advanced,
2902+
step: '21.0.0-emit-declaration-only-not-supported',
2903+
action:
2904+
'The `emitDeclarationOnly` TypeScript compiler option is not supported. Please disable it in your `tsconfig.json` file to allow the Angular compiler to function correctly.',
2905+
},
2906+
{
2907+
possibleIn: 2100,
2908+
necessaryAsOf: 2100,
2909+
level: ApplicationComplexity.Medium,
2910+
step: '21.0.0-lastsuccessfulnavigation-is-a-signal',
2911+
action:
2912+
'The `lastSuccessfulNavigation` property on the Router has been converted to a signal. To get its value, you now need to invoke it as a function: `router.lastSuccessfulNavigation()`.',
2913+
},
27532914
];

0 commit comments

Comments
 (0)