Repository navigation
Tour of Heroes Tutorial Step 5 Missing Steps #23865
Description
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ ] Feature request
[ x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
Current behavior
If I follow the instructions in the Heroes tutorial, at the end of Part 5 I get this error when loading the page:
Error: Template parse errors:
Can't bind to 'hero' since it isn't a known property of 'app-hero-detail'.
1. If 'app-hero-detail' is an Angular component and it has 'hero' input, then verify that it is part of this module.
2. If 'app-hero-detail' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</ul>
<app-hero-detail [ERROR ->][hero]="selectedHero"></app-hero-detail>
"): ng:///AppModule/HeroesComponent.html@10:17
'app-hero-detail' is not a known element:
1. If 'app-hero-detail' is an Angular component, then verify that it is part of this module.
2. If 'app-hero-detail' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ul>
[ERROR ->]<app-hero-detail [hero]="selectedHero"></app-hero-detail>
"): ng:///AppModule/HeroesComponent.html@10:0
I was able to correct this myself by adding the following to the app.module.ts:
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
And modified the declarations to include HeroDetailComponent.
Expected behavior
The page should render without error :)
Minimal reproduction of the problem with instructions
You can just follow the tutorial yourself from scratch and you'll see this.
What is the motivation / use case for changing the behavior?
Want to fix the tutorial for others.
Environment
Angular version: 6.0.0
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x ] Firefox version 52.3.0 and
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: v10.0.0
- Platform:
Others:
Activity
jenniferfell commentedon May 24, 2018
filename=https://angular.io/tutorial/toh-pt3
jenniferfell commentedon May 24, 2018
Is there any chance you skipped accidentally skipped a step?
https://angular.io/tutorial/toh-pt3#make-the-herodetailcomponent
"Make the HeroDetailComponent
Use the Angular CLI to generate a new component named hero-detail.
ng generate component hero-detail
The command scaffolds the HeroDetailComponent files and declares the component in AppModule."
I notice in the PR that @ampgular submitted, the only change is adding app.module.ts to the Final Review. This would also indicate that the current steps and example are correct, and we just need to add this file to the final review. Do I understand correctly? Thanks.
jenniferfell commentedon May 24, 2018
@chembu : When you get a chance, please take a look. In addition to adding app.module.ts to the final file review (see associated PR), maybe we should say a bit more in the section linked above about what "ng generate component hero-detail" does. Perhaps show the resulting app.module.ts file here and highlight the changes?
sreevani-ship-it commentedon Oct 8, 2018
Fixed in PR #24445
angular-automatic-lock-bot commentedon Sep 14, 2019
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.