V15 update #205

bob-watson · 2022-11-02T23:57:40Z

Updates the text to include the guide to update from v14 to v15.
Also includes minor UI text edits.

Updated the level to an enum for better readability and initiated the update instructions to v15.

src/app/app.component.ts

mgechev · 2022-11-03T21:22:25Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 RouterLinkWithHref', action: 'The `RouterLinkWithHref` directive is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-06" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, material: true, step: 'v15 mat refactor', action: 'In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. <a href="https://rc.material.angular.io/guide/mdc-migration" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, material: true, step: 'update @angular/material', action: 'Run `ng update @angular/material@15` to update the Material components.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ng update', action: 'In the application\'s project directory, run `ng update @angular/core@15 @angular/cli@15` to update your application to Angular v15.' },


Maybe move this one third? What is the reason you added it to the end?

I ordered them this way to appear as a checklist in which, if all looked good, you'd update your application.
Because you can't un-update an application, this seemed the safest order to prevent:

read

update

read further and facepalm

I'd recommend moving ng update first because some of these changes are not available in v14 which will cause errors when folks make the changes we suggest here.

That makes sense. Thanks!

src/app/recommendations.ts

mgechev · 2022-11-03T21:24:26Z

src/app/recommendations.ts

-  { possibleIn: 1400, necessaryAsOf: 1400, level: 3, step: 'v14 initialUrl', action: '`Router.initialUrl` accepts only `UrlTree` to prevent a misuse of the API by assigning a `string` value.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 node support', action: 'Angular v15 supports node.js versions: 14.20.x, 16.13.x and 18.10.x. Make sure that you are using a supported version before you upgrade Angular. <a href="https://angular.io/guide/update-to-version-15#v15-bc-01" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ts support', action: 'Angular v15 supports TypeScript version 4.8 or later.  Make sure that you are using a supported version before you upgrade Angular. <a href="https://angular.io/guide/update-to-version-15#v15-bc-02" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 keyframe', action: 'In v15, `@keyframes` names are prefixed with the component\'s <emphasis>scope name</emphasis>. <a href="https://angular.io/guide/update-to-version-15#v15-bc-03" alt="Link to more information about this change">Read further</a>' },


I'd suggest updating to:

Suggested change

{ possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 keyframe', action: 'In v15, `@keyframes` names are prefixed with the component\'s <emphasis>scope name</emphasis>. <a href="https://angular.io/guide/update-to-version-15#v15-bc-03" alt="Link to more information about this change">Read further</a>' },

{ possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 keyframe', action: 'The Angular compiler now prefixes `@keyframes` in CSS with components' scope. This means that TypeScript code that relies keyframe names now will no longer work. Recommended update is to define keyframes programmatically, use global stylesheets, or change component's view encapsulation. <a href="https://angular.io/guide/update-to-version-15#v15-bc-03" alt="Link to more information about this change">Read further</a>' },

Updated in current commit

mgechev · 2022-11-03T21:31:07Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ts support', action: 'Angular v15 supports TypeScript version 4.8 or later.  Make sure that you are using a supported version before you upgrade Angular. <a href="https://angular.io/guide/update-to-version-15#v15-bc-02" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 keyframe', action: 'In v15, `@keyframes` names are prefixed with the component\'s <emphasis>scope name</emphasis>. <a href="https://angular.io/guide/update-to-version-15#v15-bc-03" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 no-ivey', action: 'In v15, the Angular compiler option `enableIvy` has been removed' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: '', action: 'In v15, when a class inherits its constructor from a base class, the compiler can report an error when that constructor cannot be used for dependency injection purposes. <a href="https://angular.io/guide/update-to-version-15#v15-bc-05" alt="Link to more information about this change">Read further</a>'},


Suggested change

{ possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: '', action: 'In v15, when a class inherits its constructor from a base class, the compiler can report an error when that constructor cannot be used for dependency injection purposes. <a href="https://angular.io/guide/update-to-version-15#v15-bc-05" alt="Link to more information about this change">Read further</a>'},

{ possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Medium, step: '', action: 'Make sure you use decorators in base classes when their child classes inherit constructors and use dependency injection. Base classes should be decorated with `@Injectable` or `@Directive` alternatively the compiler will throw an error. <a href="https://angular.io/guide/update-to-version-15#v15-bc-05" alt="Link to more information about this change">Read further</a>'},

for:
Base classes should be decorated with @Injectableor@directive alternatively the compiler will throw an error.
would this work?
Base classes should be decorated with either @Injectableor@directive or the compiler returns an error.

Yes, this sounds good. @Directive should be uppercase, just like @Injectable.

Updated in latest commit.

mgechev

Let us tell developers what to do about a deprecation rather than repeat what we've changed.

mgechev · 2022-11-08T00:58:22Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 providedIn any', action: 'Using `providedIn: \'any\'` for an `@Injectable` or `InjectionToken` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-05" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 RouterLinkWithHref', action: 'Update instances of the `RouterLinkWithHref`directive with the `RouterLink` directive. The `RouterLinkWithHref` directive is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-06" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, material: true, step: 'update @angular/material', action: 'Run `ng update @angular/material@15` to update the Material components.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, material: true, step: 'v15 mat refactor', action: 'In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. <a href="https://rc.material.angular.io/guide/mdc-migration" alt="Link to more information about this change">Read further</a>'},


We can recommend people to review their application to prevent visual breakages.

Added in latest commit.

mgechev · 2022-11-08T00:58:35Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ngModule in providedIn', action: 'Using `providedIn: ngModule` for an `@Injectable` and `InjectionToken` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-04" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 providedIn any', action: 'Using `providedIn: \'any\'` for an `@Injectable` or `InjectionToken` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-05" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 RouterLinkWithHref', action: 'Update instances of the `RouterLinkWithHref`directive with the `RouterLink` directive. The `RouterLinkWithHref` directive is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-06" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, material: true, step: 'update @angular/material', action: 'Run `ng update @angular/material@15` to update the Material components.' },


I'll move this to the top as well.

Added in latest commit.

mgechev · 2022-11-08T00:59:08Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 TestBed.inject', action: 'Update instances of `TestBed.inject()` that use an `InjectFlags` parameter to use an `InjectOptions` parameter. The `InjectFlags` parameter of `TestBed.inject()` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-01" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ngModule in providedIn', action: 'Using `providedIn: ngModule` for an `@Injectable` and `InjectionToken` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-04" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 providedIn any', action: 'Using `providedIn: \'any\'` for an `@Injectable` or `InjectionToken` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-05" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 RouterLinkWithHref', action: 'Update instances of the `RouterLinkWithHref`directive with the `RouterLink` directive. The `RouterLinkWithHref` directive is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-06" alt="Link to more information about this change">Read further</a>'},


I'll change this from basic to medium.

Updated in latest commit.

mgechev · 2022-11-08T00:59:16Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Medium, step: 'v15 DATE_PIPE_DEFAULT_OPTIONS', action: 'Change instances of the `DATE_PIPE_DEFAULT_TIMEZONE` token to use `DATE_PIPE_DEFAULT_OPTIONS` to configure time zones.  In v15, the `DATE_PIPE_DEFAULT_TIMEZONE` token is deprecated. <a href="https://angular.io/guide/update-to-version-15#v15-dp-01" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 Injector.get', action: 'Update instances of `Injector.get()` that use an `InjectFlags` parameter to use an `InjectOptions parameter`. The `InjectFlags` parameter of `Injector.get()` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-02" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 TestBed.inject', action: 'Update instances of `TestBed.inject()` that use an `InjectFlags` parameter to use an `InjectOptions` parameter. The `InjectFlags` parameter of `TestBed.inject()` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-01" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ngModule in providedIn', action: 'Using `providedIn: ngModule` for an `@Injectable` and `InjectionToken` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-04" alt="Link to more information about this change">Read further</a>'},


I'll change this from basic to medium.

Updated in latest commit.

mgechev · 2022-11-08T00:59:21Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 RouterOutlet', action: 'In v15, `RouterOutlet` instantiates the component after change detection. <a href="https://angular.io/guide/update-to-version-15#v15-bc-09" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 relativeLinkResolution', action: 'In v15, `relativeLinkResolution` is not configurable in the Router.   <a href="https://angular.io/guide/update-to-version-15#v15-bc-10" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Medium, step: 'v15 DATE_PIPE_DEFAULT_OPTIONS', action: 'Change instances of the `DATE_PIPE_DEFAULT_TIMEZONE` token to use `DATE_PIPE_DEFAULT_OPTIONS` to configure time zones.  In v15, the `DATE_PIPE_DEFAULT_TIMEZONE` token is deprecated. <a href="https://angular.io/guide/update-to-version-15#v15-dp-01" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 Injector.get', action: 'Update instances of `Injector.get()` that use an `InjectFlags` parameter to use an `InjectOptions parameter`. The `InjectFlags` parameter of `Injector.get()` is deprecated in v15. <a href="https://angular.io/guide/update-to-version-15#v15-dp-02" alt="Link to more information about this change">Read further</a>'},


I'll change this from basic to medium.

Updated in latest commit.

mgechev · 2022-11-08T00:59:59Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 canParse', action: 'In v15, the `canParse` method was removed from all translation parsers in `@angular/localize/tools`. <a href="https://angular.io/guide/update-to-version-15#v15-bc-07" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ActivatedRoutSnapshot', action: 'Make sure that all `ActivatedRouteSnapshot` objects have a `title` property. In v15, the `title` property is a required property of `ActivatedRouteSnapshot`. <a href="https://angular.io/guide/update-to-version-15#v15-bc-08" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 RouterOutlet', action: 'In v15, `RouterOutlet` instantiates the component after change detection. <a href="https://angular.io/guide/update-to-version-15#v15-bc-09" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 relativeLinkResolution', action: 'In v15, `relativeLinkResolution` is not configurable in the Router.   <a href="https://angular.io/guide/update-to-version-15#v15-bc-10" alt="Link to more information about this change">Read further</a>' },


I'll change this from basic to advanced.

Can we tell people what they need to do and after share why they need to make a change?

Updated in latest commit.

mgechev · 2022-11-08T01:01:09Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 setDisabledState', action: 'In v15, `setDisabledState` is always called when a `ControlValueAccessor` is attached. <a href="https://angular.io/guide/update-to-version-15#v15-bc-06" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 canParse', action: 'In v15, the `canParse` method was removed from all translation parsers in `@angular/localize/tools`. <a href="https://angular.io/guide/update-to-version-15#v15-bc-07" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ActivatedRoutSnapshot', action: 'Make sure that all `ActivatedRouteSnapshot` objects have a `title` property. In v15, the `title` property is a required property of `ActivatedRouteSnapshot`. <a href="https://angular.io/guide/update-to-version-15#v15-bc-08" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 RouterOutlet', action: 'In v15, `RouterOutlet` instantiates the component after change detection. <a href="https://angular.io/guide/update-to-version-15#v15-bc-09" alt="Link to more information about this change">Read further</a>' },


That's definitely advanced, not basic.

Updated in latest commit.

mgechev · 2022-11-08T01:02:07Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 setDisabledState', action: 'In v15, `setDisabledState` is always called when a `ControlValueAccessor` is attached. <a href="https://angular.io/guide/update-to-version-15#v15-bc-06" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 canParse', action: 'In v15, the `canParse` method was removed from all translation parsers in `@angular/localize/tools`. <a href="https://angular.io/guide/update-to-version-15#v15-bc-07" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ActivatedRoutSnapshot', action: 'Make sure that all `ActivatedRouteSnapshot` objects have a `title` property. In v15, the `title` property is a required property of `ActivatedRouteSnapshot`. <a href="https://angular.io/guide/update-to-version-15#v15-bc-08" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 RouterOutlet', action: 'In v15, `RouterOutlet` instantiates the component after change detection. <a href="https://angular.io/guide/update-to-version-15#v15-bc-09" alt="Link to more information about this change">Read further</a>' },


Can we say: "If your tests with RouterOutlet break, make sure you don't depend on the instantiation order of the corresponding component relative to change detection execution. As of v15 now..."

Updated in latest commit.

mgechev · 2022-11-08T01:02:23Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 no-ivy', action: 'In your application\'s `tsconfig.json` file, remove `enableIvy`. In v15, `enableIvy` is no longer required.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Medium, step: '', action: 'Make sure you use decorators in base classes that have child classes that inherit constructors and use dependency injection. Such base classes should be decorated with either `@Injectable` or `@Directive` or the compiler returns an error. <a href="https://angular.io/guide/update-to-version-15#v15-bc-05" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 setDisabledState', action: 'In v15, `setDisabledState` is always called when a `ControlValueAccessor` is attached. <a href="https://angular.io/guide/update-to-version-15#v15-bc-06" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 canParse', action: 'In v15, the `canParse` method was removed from all translation parsers in `@angular/localize/tools`. <a href="https://angular.io/guide/update-to-version-15#v15-bc-07" alt="Link to more information about this change">Read further</a>' },


That's advanced.

Updated in latest commit.

mgechev · 2022-11-08T01:02:32Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 no-ivy', action: 'In your application\'s `tsconfig.json` file, remove `enableIvy`. In v15, `enableIvy` is no longer required.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Medium, step: '', action: 'Make sure you use decorators in base classes that have child classes that inherit constructors and use dependency injection. Such base classes should be decorated with either `@Injectable` or `@Directive` or the compiler returns an error. <a href="https://angular.io/guide/update-to-version-15#v15-bc-05" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 setDisabledState', action: 'In v15, `setDisabledState` is always called when a `ControlValueAccessor` is attached. <a href="https://angular.io/guide/update-to-version-15#v15-bc-06" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 canParse', action: 'In v15, the `canParse` method was removed from all translation parsers in `@angular/localize/tools`. <a href="https://angular.io/guide/update-to-version-15#v15-bc-07" alt="Link to more information about this change">Read further</a>' },


Can we say what's the alternative of canParse?

Updated in latest commit.

mgechev · 2022-11-08T01:02:51Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 keyframe', action: 'In v15, the Angular compiler prefixes `@keyframes` in CSS with the component\'s scope. This means that any TypeScript code that relies on `keyframes` names no longer works in v15. Update any such instances to: define keyframes programmatically, use global stylesheets, or change the component\'s view encapsulation. <a href="https://angular.io/guide/update-to-version-15#v15-bc-03" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 no-ivy', action: 'In your application\'s `tsconfig.json` file, remove `enableIvy`. In v15, `enableIvy` is no longer required.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Medium, step: '', action: 'Make sure you use decorators in base classes that have child classes that inherit constructors and use dependency injection. Such base classes should be decorated with either `@Injectable` or `@Directive` or the compiler returns an error. <a href="https://angular.io/guide/update-to-version-15#v15-bc-05" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 setDisabledState', action: 'In v15, `setDisabledState` is always called when a `ControlValueAccessor` is attached. <a href="https://angular.io/guide/update-to-version-15#v15-bc-06" alt="Link to more information about this change">Read further</a>' },


setDisabledState is medium/advanced.

Updated in latest commit.

mgechev · 2022-11-08T01:03:02Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 keyframe', action: 'In v15, the Angular compiler prefixes `@keyframes` in CSS with the component\'s scope. This means that any TypeScript code that relies on `keyframes` names no longer works in v15. Update any such instances to: define keyframes programmatically, use global stylesheets, or change the component\'s view encapsulation. <a href="https://angular.io/guide/update-to-version-15#v15-bc-03" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 no-ivy', action: 'In your application\'s `tsconfig.json` file, remove `enableIvy`. In v15, `enableIvy` is no longer required.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Medium, step: '', action: 'Make sure you use decorators in base classes that have child classes that inherit constructors and use dependency injection. Such base classes should be decorated with either `@Injectable` or `@Directive` or the compiler returns an error. <a href="https://angular.io/guide/update-to-version-15#v15-bc-05" alt="Link to more information about this change">Read further</a>'},
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 setDisabledState', action: 'In v15, `setDisabledState` is always called when a `ControlValueAccessor` is attached. <a href="https://angular.io/guide/update-to-version-15#v15-bc-06" alt="Link to more information about this change">Read further</a>' },


Can we say what's the action item for developers?

Updated in latest commit.

mgechev · 2022-11-08T01:03:23Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ng update', action: 'In the application\'s project directory, run `ng update @angular/core@15 @angular/cli@15` to update your application to Angular v15.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 keyframe', action: 'In v15, the Angular compiler prefixes `@keyframes` in CSS with the component\'s scope. This means that any TypeScript code that relies on `keyframes` names no longer works in v15. Update any such instances to: define keyframes programmatically, use global stylesheets, or change the component\'s view encapsulation. <a href="https://angular.io/guide/update-to-version-15#v15-bc-03" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 no-ivy', action: 'In your application\'s `tsconfig.json` file, remove `enableIvy`. In v15, `enableIvy` is no longer required.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Medium, step: '', action: 'Make sure you use decorators in base classes that have child classes that inherit constructors and use dependency injection. Such base classes should be decorated with either `@Injectable` or `@Directive` or the compiler returns an error. <a href="https://angular.io/guide/update-to-version-15#v15-bc-05" alt="Link to more information about this change">Read further</a>'},


Missing step name.

Updated in latest commit.

mgechev · 2022-11-08T01:03:36Z

src/app/recommendations.ts

+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 node support', action: 'Make sure that you are using a supported version of node.js before you upgrade your application. Angular v15 supports node.js versions: 14.20.x, 16.13.x and 18.10.x. <a href="https://angular.io/guide/update-to-version-15#v15-bc-01" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ts support', action: 'Make sure that you are using a supported version of TypeScript before you upgrade your application. Angular v15 supports TypeScript version 4.8 or later.  <a href="https://angular.io/guide/update-to-version-15#v15-bc-02" alt="Link to more information about this change">Read further</a>' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 ng update', action: 'In the application\'s project directory, run `ng update @angular/core@15 @angular/cli@15` to update your application to Angular v15.' },
+  { possibleIn: 1500, necessaryAsOf: 1500, level: ApplicationComplexity.Basic, step: 'v15 keyframe', action: 'In v15, the Angular compiler prefixes `@keyframes` in CSS with the component\'s scope. This means that any TypeScript code that relies on `keyframes` names no longer works in v15. Update any such instances to: define keyframes programmatically, use global stylesheets, or change the component\'s view encapsulation. <a href="https://angular.io/guide/update-to-version-15#v15-bc-03" alt="Link to more information about this change">Read further</a>' },


I'd say this is medium.

Updated in latest commit.

mgechev

Left a few more comments.

Co-Authored-By: Minko Gechev <[email protected]>

bob-watson · 2022-11-08T21:35:47Z

@mgechev I've updated this to address your feedback.

Initial instructions for v15 and refactoring

34a9e50

Updated the level to an enum for better readability and initiated the update instructions to v15.

mgechev reviewed Nov 3, 2022

View reviewed changes

src/app/app.component.ts Outdated Show resolved Hide resolved

mgechev reviewed Nov 3, 2022

View reviewed changes

src/app/recommendations.ts Outdated Show resolved Hide resolved

mgechev reviewed Nov 3, 2022

View reviewed changes

mgechev suggested changes Nov 3, 2022

View reviewed changes

mgechev reviewed Nov 8, 2022

View reviewed changes

mgechev suggested changes Nov 8, 2022

View reviewed changes

Bob Watson and others added 2 commits November 8, 2022 13:33

UI text tweaks for v15 update

bb7f339

Co-Authored-By: Minko Gechev <[email protected]>

Add v15 update instructions

57ce936

Co-Authored-By: Minko Gechev <[email protected]>

bob-watson marked this pull request as ready for review November 8, 2022 21:35

bob-watson marked this pull request as draft November 8, 2022 21:41

bob-watson marked this pull request as ready for review November 8, 2022 21:42

mgechev approved these changes Nov 9, 2022

View reviewed changes

mgechev merged commit 9a1bf81 into angular:main Nov 9, 2022

V15 update #205

V15 update #205

Conversation

bob-watson commented Nov 2, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgechev Nov 3, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgechev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bob-watson Nov 8, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bob-watson Nov 8, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgechev Nov 8, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgechev left a comment

Choose a reason for hiding this comment

bob-watson commented Nov 8, 2022

mgechev Nov 3, 2022 •

edited

Loading

bob-watson Nov 8, 2022 •

edited

Loading

bob-watson Nov 8, 2022 •

edited

Loading

mgechev Nov 8, 2022 •

edited

Loading