docs(aio): update ToH for CLI - #19811

You can preview e45926b at https://pr19811-e45926b.ngbuilds.io/.

You can preview 9de6a6a at https://pr19811-9de6a6a.ngbuilds.io/.

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that they're okay with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this State. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

You can preview 88ff3bf at https://pr19811-88ff3bf.ngbuilds.io/.

You can preview bc3d17d at https://pr19811-bc3d17d.ngbuilds.io/.

You can preview 8627274 at https://pr19811-8627274.ngbuilds.io/.

You can preview fb5b4a9 at https://pr19811-fb5b4a9.ngbuilds.io/.

You can preview 6e8784f at https://pr19811-6e8784f.ngbuilds.io/.

You can preview 8dbfb1b at https://pr19811-8dbfb1b.ngbuilds.io/.

You can preview 93c0096 at https://pr19811-93c0096.ngbuilds.io/.

You can preview cc444b5 at https://pr19811-cc444b5.ngbuilds.io/.

You can preview ae23674 at https://pr19811-ae23674.ngbuilds.io/.

You can preview d302883 at https://pr19811-d302883.ngbuilds.io/.

You can preview d1db616 at https://pr19811-d1db616.ngbuilds.io/.

Ok I see!

8. HTTP >> Add HeroService.addHero()
   TSLint reports something I don't understand:
   
   Also, what's with the 'w/' ? Does it mean something or is it a typo?

w/ is an english shorthand which means "with", there is also w/o which is without. We should remove that I guess.

ok thx

8. HTTP >> Search by name.
   I was wondering why the variable heroes$: Observable<Hero[]>; ends with a dollar sign?

That is explained in the text.

Oups! Missed that! Sorry

Alright I'm done with the Tutorial! Yeah!

One final note that I had regarding the last section (HTTP), compared to the previous ones, it looked more like Test Driven Development. I mean that, in the previous sections, we built components and then we included them somewhere. In the last section, we include stuff that don't exist yet, so the IDE throws error, and finally when everything is done, no more errors. Just like TDD.
Personally I like TDD, but I prefer creating components first, so that the IDE autocomplete works and does not throw errors... So in the last part I have to confess I chose to create the components and methods first before including or using them. I'm not saying that the last part should change, I'm just saying that it is different from the previous sections and that I personally felt more comfortable creating stuff before mentioning them somewhere else in my code... So just a personal feedback...

Anyway, thanks a lot for this great Tutorial guys!

@Nicolas-Bouteille

Thank you for your most generous and thorough review. I've addressed your concerns as best I can with most recent commit in the following ways.

1. The missing instructions to add CSS in "Hero Service". Definitely needed although not where you asked for them. There are no messages at that particular point. I've added instructions down where you modify the MessagesComponent to show messages.

2. Fixed the incorrect import instruction in "Routing > Add routes"

3. Added the two missing "Routing" importinstructions that you mentioned.

4. Added the backtick comment in "Routing".

5. I struggled with where to put the "In memory web API". I have come around to your position that it belongs in the tutorial flow. I've rewritten accordingly while striving to make clear that it has nothing to do with HttpClient and you can skip this step if you're just reading the page.

6. Added instruction for installing the angular-in-memory-web-api npm package. I'm not sure why you get those codelyzer warnings. I don't think this package is the cause.

I would like to do something about the fact that the app keeps failing while you're building it.
It's a process of breaking and fixing.

You suggested that creating the components first would alleviate the problem. I don't think so. Adding methods to the components that refer to services that don't exist yet leaves the app broken. Jumping between component and service and back again might stop some of the breakage but not all of it and I think it would be more confusing ... certainly more confusing for someone just reading the tutorial.

Therefore, having no good answer, I'm leaving it as is for now.

Thanks again!

You can preview 1945781 at https://pr19811-1945781.ngbuilds.io/.

I am quite amazed to see the reactivity of the Angular community!
Congrats...

You can preview 67e950b at https://pr19811-67e950b.ngbuilds.io/.

I'm having the same error that Nicolas mentioned on nov 4 above, but I don't see a resolution of that.
its at this link in the tutorial https://angular.io/tutorial/toh-pt6#add-heroserviceaddhero

The addHero method results in TSLint complaining of a "Shadowed name: hero" for the declaration in "tap". I changed the variable name and its all fine now.
tap((hero1: Hero) => this.log(added hero w/ id=${hero.id})),

@mhevery Would you do me a favor and take a look at the comment above from a few days ago. The recommended change of variable name has not been made to the current released TOH.

Q1: Can you reproduce/verify the problem described in that comment? Or should I ask someone else (@kapunahelewong?)?
Q2: If the problem still exists, is the right procedure to reopen this PR or to create a new doc issue with the comment and proposed resolution?

Thanks.

I can't reproduce the problem

This error that @aaaaarrrgghhh mentioned sounds like it's a variable that is inadvertently declared twice. Might that be the case, @aaaaarrrgghhh? (I'm guessing as I haven't had this error before.)

@jenniferfell This would be a good candidate for a new issue if @aaaaarrrgghhh can't find the cause for the error. I can't replicate the issue on my end. Everything works as expected for me.

Yes, I think the variable name 'hero' is defined twice in the method
/** POST: add a new hero to the server */ addHero (**hero: Hero**): Observable<Hero> { return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe( tap((**hero1: Hero**) => this.log(added hero w/ id=${hero.id})), catchError(this.handleError<Hero>('addHero')) ); }

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