Gisteren de "quick-start" uitgevoerd, vandaag de tutorial op https://angular.io/tutorial doorgelopen. Het statement "ng new angular-tour-of-heroes" duurt wederom lang, ik zit nu rond de 13 minuten te wachten tot het laden klaar is, balkje is op de helft. Gisteren was dat omgerekend naar minuten 23 minuten. Het duurt mij te lang. Omdat we toch dezelfde code binnenhalen als bij het project van gisteren zou ik de code kopiëren naar een nieuwe map, zodat ik daarmee verder kan gaan. Geen wonder dat het zolang duurt, want ik zie dat de map node_modules alle mogelijke module-code beschikbaar heeft, 224 MB! Ik doe het anders, de map my-app hernoem ik naar heroes en ga verder in de code waar ik gisteren mee bezig geweest ben.
Je kunt vervolgens gewoon de stappen volgen uit het voorbeeld. Wel zie je in je browser in het tabblad als titel nog "MyApp" staan. Dat kun je aanpassen in de index.html die in de root van de applicatie staat.
Alle stappen gaan goed, tot stap 5. Ik heb de hero-detail-component aangemaakt, maar zie bij het aanklikken van een held in de lijst geen detailgegevens. Dan zie ik wat ik fout heb gedaan, in hero-detail.component.html heb ik de code geplakt uit hero.component.html. Daar hadden we de controle op selectedHero gezet, maar nu we een eigen losse component hebben, heet die variabele daar weer gewoon "hero". Door dit aan te passen werkt het zoals het voorbeeld toont.
In stap 6 heb ik halverwege nog een probleem. Er wordt gezegd dat je in app.module.ts het volgende moet plaatsen:
providers: [ HeroService, MessageService ] en dat de boel dan weer werkt. Maar dat doet het niet.
Ik gebruik Code van Microsoft, een editor die zo te zien ook typescript snapt. Die gaf al aan dat deze 2 services onbekend zijn.
Omdat we pas later MessageService aanmaken heb ik die uit deze lijst gehaald (dus het wordt: providers: [ HeroService ] ) en bovenin voeg ik toe:
import { HeroService } from './hero.service';
Daarmee werkt de boel weer naar behoren. Bij het toevoegen van de rest van de code heb ik MessageService natuurlijk weer toegevoegd.
Ik zie trouwens dat die "import..."-regel mijn eigen fout is (kwestie van goed lezen), het stond er namelijk wel:
Open the AppModule class, import the HeroService, and add it to the @NgModule.providers array.
De overige stappen doorgelopen, geen problemen meer gehad. Netjes de boel afgerond tot en met stap 8, HTTP.
De tour afgerond, de volgende keer kan/mag ik door naar de fundamentals sectie, beginnend met de Architecture guide.