Angular Router tutorial Milestone 3 missing information #22599

I'm submitting a...

[x] Documentation issue or request

Current behavior

Confusing or missing steps in Milestone 3 of the Router section: https://angular.io/guide/router#add-heroes-functionality. The steps as given ask you to make a new directory, create an empty file, copy the contents of one TypeScript file (app.component.ts) into another (hero-list.component.ts), and then edit a template.

The issue is that it never asks you to copy over a specific template, and the TypeScript doesn't contain a template string. The possible html templates to copy over do not quite match the edits requested...or rather, two different ones do. The app.component.html has an h1 tag, but no h2 or hero detail. The heroes.component.html does have an h2 and hero detail, but no h1.

This then raises the question of whether the app.component.ts is what you're actually supposed to be copying from, or the heroes.component.ts, as neither html file has the entirety of code expecting to be modified, so it becomes unclear which typescript file is actually intended to be copied.

And then the list of files you are expected to have at the completion of this set of instructions contains only typescript. (hero-detail.component.ts, hero-list.component.ts, hero.service.ts, heroes.module.ts)

Expected behavior

The desired behavior would be to explain exactly which files need to be created or copied over, double-checking which file or project should be used to copy information over, and clarity about what should be copied where.

What is the motivation / use case for changing the behavior?

Clarity in training and tutelage of new angular developers.

Environment

N/A