Tour of Heros tutorial causes error in ch 3 when TS transpiler is set to "strict" #40941

cfsamson · 2021-02-22T15:48:36Z

📚 Docs or angular.io bug report

Description

The example code provided in Tutorial of Heros, chapter 3, section: Add the Input() hero property causes an error stating that "Property 'hero' has no initializer and is not definitely assigned in the constructor".

This might be caused by specifying "strict" mode when generating the app. Probably related to: #39966 (which seems to be fixed now)

It's caused by adding the line:

@Input() hero: Hero;

Specifying that hero is an optional property fixes the problem:

@Input() hero?: Hero;

🔬 Minimal Reproduction

Follow the tutorial choosing strict when asked by ng new or by setting "strict": true in tsconfig.json:

{
  ...
  "compilerOptions": {
    "strict": true,
    ...
  }
}

What's the affected URL?**

https://angular.io/tutorial/toh-pt3#add-the-input-hero-property

Expected vs Actual Behavior**

Expected the tutorial to work, even though setting the ts transpiler to strict mode.

🔥 Exception or Error




Failed to compile.

src/app/hero-detail/hero-detail.component.ts:12:14 - error TS2564: Property 'hero' has no initializer and is not definitely assigned in the constructor.

12     @Input() hero: Hero;

🌍 Your Environment

ngular CLI: 11.2.1
Node: 14.15.4
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.1
@angular-devkit/build-angular   0.1102.1
@angular-devkit/core            11.2.1
@angular-devkit/schematics      11.2.1
@schematics/angular             11.2.1
@schematics/update              0.1102.1
rxjs                            6.6.3
typescript                      4.1.5

Browser info

The error is not browser specific.

Anything else relevant?

When asked by ng new if you want to enable strict mode, a lot of readers will choose "yes" since type checking and correctness it's part of what TypeScript promises to improve. Fixing the error requires some prior knowledge that tutorial readers might not have.

The text was updated successfully, but these errors were encountered:

Not explicitly setting the `hero` property as an optional property causes a compilation error: `Property 'hero' has no initializer and is not definitely assigned in the constructor` when having the ts transpiler set to "strict" mode.

docs: fix issue angular#40941 <body> setting the `hero` property as an optional property fixes the compilation error: `Property 'hero' has no initializer and is not definitely assigned in the constructor` when having the ts transpiler set to "strict" mode.

setting the `hero` property as an optional property fixes the compilation error: `Property 'hero' has no initializer and is not definitely assigned in the constructor` when having the ts transpiler set to "strict" mode.

gkalpak · 2021-02-22T16:28:39Z

Yes, this is a known issue. Many examples do not work in strict mode. This is being tracked in #39344.

cfsamson · 2021-02-22T21:17:05Z

@gkalpak Oh, I see. I didn't know that option was so new. I made a PR to fix this one here: #40942. I can suggest a fix for the ones I spot as I go through the Tour of Heros tutorial.

setting the `hero` property as an optional property fixes the compilation error: `Property 'hero' has no initializer and is not definitely assigned in the constructor` when having the ts transpiler set to "strict" mode.

gkalpak · 2021-02-23T12:47:34Z

I made a PR to fix this one here: #40942

💯

I can suggest a fix for the ones I spot as I go through the Tour of Heros tutorial.

That would be fantastic! Thank you, @cfsamson 🚀

rinu · 2021-03-04T13:22:38Z

There's another issue later in the tutorial when you get to
https://angular.io/tutorial/toh-pt5#extract-the-id-route-parameter

const id = +this.route.snapshot.paramMap.get('id');

It complains id might be null and there's no fix other than handling it explicitly. On that subject the tutorial is a bit broken when it comes to error handling there. What if id really is not provided? What if it's not a number? What if there is no hero with that id? I really don't know, I'm new here.

hembhagat99 · 2021-03-05T05:06:25Z

You just need to use @Input hero !: Hero. This will make hero nullable and won't cause error.

setting the `hero` property as an optional property fixes the compilation error: `Property 'hero' has no initializer and is not definitely assigned in the constructor` when having the ts transpiler set to "strict" mode. PR Close #40942

iRealNirmal · 2021-05-03T02:24:27Z

@cfsamson if issue is fixed, can we close this ?

petebacondarwin · 2021-05-03T10:13:11Z

Yes, thanks @iRealNirmal

angular-automatic-lock-bot · 2021-06-03T16:20:40Z

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.}

cfsamson mentioned this issue Feb 22, 2021

docs: fix issue #40941 #40942

Closed

14 tasks

atscott added the comp: docs label Feb 22, 2021

ngbot bot added this to the needsTriage milestone Feb 22, 2021

atscott added help wanted An issue that is suitable for a community contributor (based on its complexity/scope). P2 The issue is important to a large percentage of users, with a workaround labels Feb 22, 2021

ngbot bot modified the milestones: needsTriage, Backlog Feb 22, 2021

cfsamson mentioned this issue Feb 23, 2021

docs: fixes Tour of Heros tutorial ch 4 so it compiles in strict mode #40970

Closed

14 tasks

gkalpak added hotlist: community-help and removed hotlist: community-help labels Mar 12, 2021

petebacondarwin closed this as completed May 3, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 3, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tour of Heros tutorial causes error in ch 3 when TS transpiler is set to "strict" #40941

Tour of Heros tutorial causes error in ch 3 when TS transpiler is set to "strict" #40941

cfsamson commented Feb 22, 2021 •

edited

gkalpak commented Feb 22, 2021

cfsamson commented Feb 22, 2021 •

edited

gkalpak commented Feb 23, 2021

rinu commented Mar 4, 2021

hembhagat99 commented Mar 5, 2021

iRealNirmal commented May 3, 2021

petebacondarwin commented May 3, 2021

angular-automatic-lock-bot bot commented Jun 3, 2021

Tour of Heros tutorial causes error in ch 3 when TS transpiler is set to "strict" #40941

Tour of Heros tutorial causes error in ch 3 when TS transpiler is set to "strict" #40941

Comments

cfsamson commented Feb 22, 2021 • edited

📚 Docs or angular.io bug report

Description

🔬 Minimal Reproduction

What's the affected URL?**

Expected vs Actual Behavior**

🔥 Exception or Error

🌍 Your Environment

Browser info

Anything else relevant?

gkalpak commented Feb 22, 2021

cfsamson commented Feb 22, 2021 • edited

gkalpak commented Feb 23, 2021

rinu commented Mar 4, 2021

hembhagat99 commented Mar 5, 2021

iRealNirmal commented May 3, 2021

petebacondarwin commented May 3, 2021

angular-automatic-lock-bot bot commented Jun 3, 2021

cfsamson commented Feb 22, 2021 •

edited

cfsamson commented Feb 22, 2021 •

edited