Angular 11 - Documentation - Tutorial: Tour of Heroes property not initialized error from typescript

📚 Docs or angular.io bug report

Description

Tour of heroes tutorial in Angular 11 (typescript version ~4.0.2), when instructed to add “selectedHero”: Hero to the heroes.component, typescript now complains:

Property ‘selectedHero’ has no initializer and is not definitely assigned in the constructor.ts(2564)

🔬 Minimal Reproduction

Follow Tour of heroes documentation

What’s the affected URL?**

https://angular.io/tutorial/toh-pt2

Reproduction Steps**

Follow Tutorial instructions

Expected vs Actual Behavior**

Should not produce error

This can be worked around by changing the line of code to: selectedHero!: Hero; // Note the exclamation mark.

🔥 Exception or Error

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.scss'],
})
export class HeroesComponent implements OnInit {
  heroes = HEROES;
  selectedHero: Hero;                                     <--   ERROR occurs here.   fix by changing to selectedHero!: Hero;

  constructor() {}

  ngOnInit(): void {}

  onSelect(hero: Hero) {
    this.selectedHero = hero;
  }
}

🌍 Your Environment

Windows 10 x64

_                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | | / ___ | | | | (| | || | | (| | | | || | | | // __| ||_, |_,||_,|| _||| |___/

Angular CLI: 11.0.3 Node: 14.4.0 OS: win32 x64

Angular: 11.0.3 … animations, cli, common, compiler, compiler-cli, core, forms … platform-browser, platform-browser-dynamic, router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1100.3 @angular-devkit/build-angular 0.1100.3 @angular-devkit/core 11.0.3 @angular-devkit/schematics 11.0.3 @schematics/angular 11.0.3 @schematics/update 0.1100.3 rxjs 6.6.3 typescript 4.0.5

Browser info

No.

Anything else relevant?

No

[DaveSharman]

This appears to be caused by settings by default in the ts.json file

“compileOnSave”: false, “compilerOptions”: { “baseUrl”: “./”, “outDir”: “./dist/out-tsc”, “forceConsistentCasingInFileNames”: true, “strict”: true, << Strict causes this. “noFallthroughCasesInSwitch”: true, “sourceMap”: true, “declaration”: false, “downlevelIteration”: true, “experimentalDecorators”: true, “moduleResolution”: “node”, “importHelpers”: true, “target”: “es2015”, “module”: “es2020”, “lib”: [ “es2018”, “dom” ] }, “angularCompilerOptions”: { “strictInjectionParameters”: true, “strictInputAccessModifiers”: true, “strictTemplates”: true }

vs the tsconfib.json from the demo project downloaded from the Tour of heroes Tutorial. Note the comments around fixing the code, and then enable these options.

/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, // TODO(gkalpak): Fix the code and enable this. // "strict": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "es2015", "module": "es2020", "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "strictInjectionParameters": true, "strictInputAccessModifiers": true, // TODO(gkalpak): Fix the code and enable this (i.e. switch fromfullTemplateTypeChecktostrictTemplates`). “fullTemplateTypeCheck”: true,// “strictTemplates”: true } }

`

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}