cfsamson commented 3 years ago

📚 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: https://github.com/angular/angular/issues/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.

gkalpak commented 3 years ago

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

cfsamson commented 3 years ago

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

gkalpak commented 3 years ago

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

:100:

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 commented 3 years ago

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.