logo

De ultieme Angular CLI-referentiegids

In dit artikel zullen we bekijken wat Angular CLI is, wat het voor u kan doen en hoe het een deel van zijn magie achter de schermen uitvoert. Zelfs als u Angular CLI al gebruikt, kan dit artikel als referentie dienen om de interne werking ervan beter te begrijpen.

Technisch gezien hoeft u Angular CLI niet te gebruiken om een ​​Angular-toepassing te ontwikkelen, maar de vele functies kunnen de kwaliteit van uw code sterk verbeteren en u onderweg veel tijd besparen.

Leer je liever Angular aan de hand van een stapsgewijze videocursus? Bekijk Leer Angular 5 op SitePoint Premium.

Dit is het voorlopige artikel in een 4-delige serie over het schrijven van een Todo-applicatie in Angular.

  1. Deel 0 — De ultieme Angular CLI-referentiegids
  2. Deel 1 — Onze eerste versie van de Todo-applicatie in gebruik nemen
  3. Deel 2 — Afzonderlijke componenten maken om een ​​lijst met taken en een enkele taak weer te geven
  4. Deel 3 — Update de Todo-service om te communiceren met een REST API
  5. Deel 4 — Gebruik een Angular-router om gegevens op te lossen.

Een stukje geschiedenis

Op 15 september 2016 werd Angular Final uitgebracht.

Waar AngularJS 1.x beperkt was tot een framework, is Angular uitgegroeid tot een ambitieus platform waarmee je snelle en schaalbare applicaties kunt ontwikkelen op alle platforms, zoals web, mobiel internet, native mobiel en zelfs native desktop.

Met deze overgang naar een platform is tooling belangrijker dan ooit geworden. Het opzetten en configureren van tooling is echter niet altijd eenvoudig. Om ervoor te zorgen dat Angular-ontwikkelaars zich kunnen concentreren op het bouwen van applicaties met zo min mogelijk wrijving, doet het Angular-team veel moeite om ontwikkelaars een hoogwaardige ontwikkelingstoolset te bieden.

Onderdeel van die toolset zijn nauwe integraties met een breed scala aan IDE's en editors. Een ander onderdeel van die toolset is Angular CLI.

Dus laten we beginnen!

25.04.2017: Op 24 maart werd Angular CLI v1.0 uitgebracht. Dit artikel is bijgewerkt om de laatste wijzigingen weer te geven. Als je de nieuwste functies van Angular CLI v1.0 wilt toevoegen aan je bestaande Angular-project dat is gegenereerd met een eerdere versie van Angular CLI, bekijk dan de Angular CLI v1.0-migratiegids.

2017.02.17: Vanaf 9 februari 2017 is de ng deploy commando is verwijderd uit de kern van Angular CLI. Lees hier meer.

27.01.2017: Vanaf 27 januari 2017 is de officiële aanbeveling om de naam AngularJS te gebruiken voor elke 1.x-release en de naam Angular voor elke 2+ release. Dit artikel is bijgewerkt om de officiële richtlijnen voor branding weer te geven.

Wat is Angular CLI?

Angular CLI is een opdrachtregelinterface (CLI) om uw ontwikkelworkflow te automatiseren. Hiermee kunt u:

  • maak een nieuwe Angular-applicatie
  • voer een ontwikkelserver uit met LiveReload-ondersteuning om een ​​voorbeeld van uw applicatie te bekijken tijdens de ontwikkeling
  • functies toevoegen aan uw bestaande Angular-applicatie
  • voer de unit-tests van uw applicatie uit
  • voer de end-to-end (E2E) tests van uw toepassing uit
  • bouw uw applicatie voor implementatie naar productie.

Voordat we elk van de bovenstaande in detail bekijken, laten we eerst kijken hoe u Angular CLI kunt installeren.

Vereisten

Voordat u Angular CLI kunt gebruiken, moet u Node.js 6.9.0 en npm 3.0.0 of hoger op uw systeem hebben geïnstalleerd.

U kunt de nieuwste versie van Node.js voor uw besturingssysteem downloaden en de nieuwste installatie-instructies raadplegen op de officiële Node.js-website.

Als je Node.js en npm al hebt geïnstalleerd, kun je hun versie verifiëren door het volgende uit te voeren:

$ node -v # => displays your Node.js version
$ npm -v # => displays your npm version

Zodra je Node.js hebt geïnstalleerd, kun je de npm . gebruiken commando om TypeScript te installeren:

$ npm install -g [email protected]

Hoewel TypeScript technisch gezien geen absolute vereiste is, wordt het sterk aanbevolen door het Angular-team, dus ik raad u aan het te installeren om het werken met Angular zo comfortabel mogelijk te maken.

Nu je Node.js en TypeScript hebt geïnstalleerd, kun je Angular CLI installeren.

Hoekige CLI installeren

Om Angular CLI te installeren, voer je uit:

$ npm install -g @angular/cli

Hiermee wordt de ng . geïnstalleerd commando globaal op uw systeem.

Om te controleren of uw installatie met succes is voltooid, kunt u dit uitvoeren:

$ ng version

Dit toont de versie die u hebt geïnstalleerd:

@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64

Nu je Angular CLI hebt geïnstalleerd, gaan we het gebruiken om een ​​nieuwe applicatie te maken.

Een nieuwe hoekapplicatie maken

Er zijn twee manieren om een ​​nieuwe applicatie te maken met Angular CLI:

  • ng init :maak een nieuwe applicatie in de huidige map
  • ng new :maak een nieuwe map en voer ng init uit in de nieuwe map.

Dus ng new lijkt op ng init , behalve dat het ook een map voor u aanmaakt.

Ervan uitgaande dat u nog geen directory heeft aangemaakt, gebruiken we ng new om een ​​nieuw project aan te maken:

$ ng new my-app

Achter de schermen gebeurt het volgende:

  • een nieuwe map my-app is gemaakt
  • alle bronbestanden en mappen voor uw nieuwe Angular-toepassing worden gemaakt op basis van de naam die u hebt opgegeven (my-app ) en best-practices uit de officiële Angular Style Guide
  • npm-afhankelijkheden zijn geïnstalleerd
  • TypeScript is voor u geconfigureerd
  • de Karma unit-testrunner is voor u geconfigureerd
  • het Protractor end-to-end testframework is voor u geconfigureerd
  • omgevingsbestanden met standaardinstellingen worden aangemaakt.

In de volgende secties leert u meer over elk van deze aspecten.

Op dit moment heb je een werkende Angular-applicatie en je nieuwe directory my-app ziet er zo uit:

.
├── README.md
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

Beschikbare opties

  • --dry-run :boolean, standaard false , voer een droge run uit zodat er geen wijzigingen naar het bestandssysteem worden geschreven
  • --verbose :boolean, standaard false
  • --link-cli :boolean, standaard false , koppel automatisch de @angular/cli pakket (meer info)
  • --skip-install :boolean, standaard false , sla npm install over
  • --skip-git :boolean, standaard false , initialiseer git repository niet
  • --skip-tests :boolean, standaard false , sla het maken van tests over
  • --skip-commit :boolean, standaard false , sla het committen van de eerste git commit over
  • --directory :string, naam van de aan te maken directory, standaard is dit hetzelfde als de applicatienaam
  • --source-dir :string, standaard 'src' , naam van de bronmap
  • --style :string, standaard 'css' , de te gebruiken stijltaal ('css' , 'less' of 'scss' )
  • --prefix :string, standaard 'app' , het voorvoegsel dat moet worden gebruikt bij het genereren van nieuwe componenten
  • --mobile :boolean, standaard false , genereer een Progressive Web App-toepassing (zie het gedeelte over aankomende functies)
  • --routing :boolean, standaard false , voeg module toe met routeringsinformatie en importeer deze in de hoofdapp-module
  • --inline-style :boolean, standaard false , gebruik inline stijlen bij het genereren van de nieuwe applicatie
  • --inline-template :boolean, standaard false , gebruik inline sjablonen bij het genereren van de nieuwe applicatie.

Voer $ ng generate --help uit om alle beschikbare opties van uw lokaal geïnstalleerde Angular CLI te zien.

Laten we eens kijken hoe u uw applicatie kunt starten, zodat u deze in actie kunt zien.

Uw toepassing uitvoeren

Om een ​​voorbeeld van uw nieuwe toepassing in uw browser te bekijken, navigeert u naar de map:

$ cd my-app

en ren:

$ ng serve

om de ingebouwde ontwikkelserver op poort 4200 te starten:

** NG Live Development Server is running on http://localhost:4200 **
Hash: 09fb2ad840c1472e5885
Time: 6230ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

U kunt nu in uw favoriete browser navigeren naar http://localhost:4200/ om uw applicatie in actie te zien:

Achter de schermen gebeurt het volgende:

  1. Angular CLI laadt de configuratie van .angular-cli.json
  2. Angular CLI voert Webpack uit om alle JavaScript- en CSS-code te bouwen en te bundelen
  3. Angular CLI start Webpack dev-server om een ​​voorbeeld van het resultaat te zien op localhost:4200 .

Merk op dat de ng serve commando wordt niet afgesloten en keert terug naar uw terminalprompt na stap 3.

In plaats daarvan houdt het proces, omdat het LiveReload-ondersteuning bevat, actief uw src . in de gaten map voor bestandswijzigingen. Wanneer een bestandswijziging wordt gedetecteerd, wordt stap 2 herhaald en wordt er een melding naar uw browser gestuurd zodat deze automatisch kan worden vernieuwd.

Om het proces te stoppen en terug te keren naar uw prompt, drukt u op ctrl-c .

Functies toevoegen aan uw hoekapplicatie

U kunt de ng generate . gebruiken commando om functies toe te voegen aan uw bestaande applicatie:

  • ng generate class my-new-class :voeg een klas toe aan je applicatie
  • ng generate component my-new-component :voeg een component toe aan uw applicatie
  • ng generate directive my-new-directive :voeg een richtlijn toe aan je applicatie
  • ng generate enum my-new-enum :voeg een opsomming toe aan uw aanvraag
  • ng generate module my-new-module :een module toevoegen aan uw applicatie
  • ng generate pipe my-new-pipe :voeg een pijp toe aan je applicatie
  • ng generate service my-new-service :een dienst toevoegen aan uw applicatie

De generate commando en de verschillende subcommando's hebben ook sneltoetsen, dus de volgende commando's lijken op elkaar:

  • ng g cl my-new-class :voeg een klas toe aan je applicatie
  • ng g c my-new-component :voeg een component toe aan uw applicatie
  • ng g d my-new-directive :voeg een richtlijn toe aan je applicatie
  • ng g e my-new-enum :voeg een opsomming toe aan uw aanvraag
  • ng g m my-new-module :een module toevoegen aan uw applicatie
  • ng g p my-new-pipe :voeg een pijp toe aan je applicatie
  • ng g s my-new-service :een dienst aan uw applicatie toevoegen.

Elk van de verschillende subcommando's voert een andere taak uit en biedt verschillende opties en parameters.

Laten we ze allemaal eens bekijken.

Een nieuwe klas toevoegen

Een klas toevoegen met de naam UserProfile , rennen:

$ ng generate class user-profile
installing component
  create src/app/user-profile.ts

Angular CLI past automatisch de hoofdletters van de bestandsnaam en klassenaam voor u aan, zodat de volgende opdrachten hetzelfde effect hebben:

# All three commands are equivalent
$ ng generate class user-profile
$ ng generate class userProfile
$ ng generate class UserProfile

Achter de schermen gebeurt het volgende:

  • een bestand src/app/user-profile.ts is gemaakt die een lege klasse exporteert met de naam UserProfile

Beschikbare opties

  • --spec :boolean, standaard false , genereer specificatiebestand met eenheidstest

Voer $ ng generate --help uit om alle beschikbare opties van uw lokaal geïnstalleerde Angular CLI te zien.

Voorbeelden:

# Generate class 'UserProfile'
$ ng generate class user-profile

# Generate class 'UserProfile' with unit test
$ ng generate class user-profile --spec

Een nieuwe component toevoegen

Een component toevoegen met een selector app-site-header , rennen:

$ ng generate component site-header
installing component
  create src/app/site-header/site-header.component.css
  create src/app/site-header/site-header.component.html
  create src/app/site-header/site-header.component.spec.ts
  create src/app/site-header/site-header.component.ts
  update src/app/app.module.ts

Angular CLI past automatisch de hoofdletters van de bestandsnaam en componentnaam voor u aan en past het voorvoegsel toe op de componentkiezer, zodat de volgende opdrachten hetzelfde effect hebben:

# All three commands are equivalent
$ ng generate component site-header
$ ng generate component siteHeader
$ ng generate component SiteHeader

Achter de schermen gebeurt het volgende:

  • een map src/app/site-header is gemaakt
  • in die map worden vier bestanden gegenereerd:
    • een CSS-bestand voor de componentstijlen
    • een HTML-bestand voor de componentsjabloon
    • een TypeScript-bestand met een componentklasse met de naam SiteHeaderComponent en selector app-site-header
    • een specificatiebestand met een voorbeeldeenheidstest voor uw nieuwe component
  • SiteHeaderComponent wordt toegevoegd als een verklaring in de @NgModule decorateur van de dichtstbijzijnde module, in dit geval de AppModule in src/app/app.module.ts .

Beschikbare opties

  • --flat :boolean, standaard false , genereer componentbestanden in src/app in plaats van src/app/site-header
  • --inline-template :boolean, standaard false , gebruik een inline-sjabloon in plaats van een apart HTML-bestand
  • --inline-style :boolean, standaard false , gebruik inline stijlen in plaats van een apart CSS-bestand
  • --prefix :boolean, standaard true , gebruik het voorvoegsel gespecificeerd in .angular-cli.json in componentkiezer
  • --spec :boolean, standaard true , genereer specificatiebestand met eenheidstest
  • --view-encapsulation :string, specificeert de strategie voor het inkapselen van de weergave
  • --change-detection :string, specificeert de wijzigingsdetectiestrategie.

Voer $ ng generate --help uit om alle beschikbare opties van uw lokaal geïnstalleerde Angular CLI te zien.

Voorbeelden:

# Generate component 'site-header'
$ ng generate component site-header

# Generate component 'site-header' with inline template and inline styles
$ ng generate component site-header --inline-template --inline-style

Een nieuwe richtlijn toevoegen

Een richtlijn toevoegen met een selector appAdminLink , rennen:

$ ng generate directive admin-link
installing directive
  create src/app/admin-link.directive.spec.ts
  create src/app/admin-link.directive.ts
  update src/app/app.module.ts

Angular CLI past automatisch de hoofdletter van de bestandsnaam en de instructienaam voor u aan en past het voorvoegsel toe op de richtlijnselector, zodat de volgende opdrachten hetzelfde effect hebben:

# All three commands are equivalent
$ ng generate directive admin-link
$ ng generate directive adminLink
$ ng generate directive AdminLink

Achter de schermen gebeurt het volgende:

  • een bestand src/app/admin-link.directive.ts is gemaakt die een richtlijn exporteert met de naam AdminLinkDirective met een selector appAdminLink
  • een bestand src/app/admin-link.directive.spec.ts is gemaakt met een eenheidstest voor de richtlijn
  • AdminLinkDirective wordt toegevoegd als een verklaring in de @NgModule decorateur van de dichtstbijzijnde module, in dit geval de AppModule in src/app/app.module.ts .

Beschikbare opties

  • --flat :boolean, standaard true , genereer instructiebestanden in src/app in plaats van src/app/admin-link
  • --prefix :boolean, standaard true , gebruik het voorvoegsel gespecificeerd in .angular-cli.json in richtlijn selector
  • --spec :boolean, standaard true , genereer specificatiebestand met eenheidstest

Voer $ ng generate --help uit om alle beschikbare opties van uw lokaal geïnstalleerde Angular CLI te zien.

Voorbeelden:

# Generate directive 'adminLink'
$ ng generate directive admin-link

# Generate directive 'adminLink' without unit test
$ ng generate directive admin-link --spec=false

Een nieuwe opsomming toevoegen

Een opsomming toevoegen met de naam Direction , rennen:

$ ng generate enum direction
installing enum
  create src/app/direction.enum.ts

Angular CLI past automatisch de hoofdletters van de bestandsnaam en de opsommingsnaam voor u aan, zodat de volgende opdrachten hetzelfde effect hebben:

# Both commands are equivalent
$ ng generate enum direction
$ ng generate enum Direction

Achter de schermen gebeurt het volgende:

  • een bestand src/app/direction.enum.ts is gemaakt die een opsomming exporteert met de naam Direction

Beschikbare opties

Er zijn geen opdrachtregelopties beschikbaar voor deze opdracht.

Een nieuwe module toevoegen

Om een ​​nieuwe module aan uw applicatie toe te voegen, voert u het volgende uit:

$ ng generate module admin
installing module
  create src/app/admin/admin.module.ts

Achter de schermen gebeurt het volgende:

  • een map src/app/admin is gemaakt
  • een AdminModule module is gemaakt in src/app/admin/admin.module.ts .

Merk op dat de AdminModule module wordt niet automatisch toegevoegd aan je hoofdmodule AppModule in src/app/app.module.ts . Het is aan jou om de module te importeren waar je hem nodig hebt.

Om uw nieuwe module in een andere module te importeren, kunt u specificeren is als een import in een @NgModule definitie. Bijvoorbeeld:

import { AdminModule } from './admin/admin.module';

@NgModule({
  // ...
  imports: [
    AdminModule
  ]
})
export class AppModule { }

Beschikbare opties

  • --routing :boolean, standaard false , genereer een extra module AdminRoutingModule met alleen de routeringsinformatie en voeg deze toe als import aan uw nieuwe module
  • --spec :boolean, standaard false , voeg src/app/admin/admin.module.spec.ts toe met een eenheidstest die controleert of de module bestaat.

Voer $ ng generate --help uit om alle beschikbare opties van uw lokaal geïnstalleerde Angular CLI te zien.

Voorbeelden:

# Add module 'admin'
$ ng generate module admin

# Add module 'admin' with additional module containing routing information
$ ng generate module admin --routing

Een nieuwe pijp toevoegen

Een pijp is het Angular-equivalent van een filter in AngularJS 1.x en stelt u in staat een weergegeven waarde binnen een sjabloon te transformeren.

Een pijp toevoegen met een naam convertToEuro , rennen:

$ ng generate pipe convert-to-euro
installing pipe
  create src/app/convert-to-euro.pipe.spec.ts
  create src/app/convert-to-euro.pipe.ts
  update src/app/app.module.ts

Angular CLI past automatisch de hoofdletters van de bestandsnaam en de naam van de pijp voor u aan, zodat de volgende opdrachten hetzelfde effect hebben:

# All three commands are equivalent
$ ng generate pipe convert-to-euro
$ ng generate pipe convertToEuro
$ ng generate pipe ConvertToEuro

Achter de schermen gebeurt het volgende:

  • een bestand src/app/convert-to-euro.pipe.ts is gemaakt die een pipe-klasse exporteert met de naam ConvertToEuroPipe
  • een bestand src/app/convert-to-euro.pipe.spec.ts is gemaakt met een eenheidstest voor de pijp
  • ConvertToEuroPipe wordt toegevoegd als een aangifte in de @NgModule decorateur van de dichtstbijzijnde module, in dit geval de AppModule in src/app/app.module.ts .

Beschikbare opties

  • --flat :boolean, standaard true , genereer componentbestanden in src/app in plaats van src/app/site-header
  • --spec :boolean, standaard true , genereer specificatiebestand met eenheidstest.

Voer $ ng generate --help uit om alle beschikbare opties van uw lokaal geïnstalleerde Angular CLI te zien.

Voorbeelden:

# Generate pipe 'convertToEuro' with spec and in /src/app directory
$ ng generate pipe convert-to-euro

# Generate pipe 'convertToEuro' without spec and in /src/app/convert-to-euro directory
$ ng generate pipe convert-to-euro --spec=false --flat=false

Een nieuwe service toevoegen

Een service toevoegen met een afhankelijkheidsinjectietoken BackendApiService , rennen:

$ ng generate service backend-api
installing service
  create src/app/backend-api.service.spec.ts
  create src/app/backend-api.service.ts
  WARNING Service is generated but not provided, it must be provided to be used

Angular CLI past automatisch de hoofdletters van de bestandsnaam en de naam van de pijp voor u aan, zodat de volgende opdrachten hetzelfde effect hebben:

# All three commands are equivalent
$ ng generate service backend-api
$ ng generate service backendApi
$ ng generate service BackendApi

Achter de schermen gebeurt het volgende:

  • een bestand src/app/backend-api.service.ts is gemaakt die een serviceklasse exporteert met de naam BackendApiService
  • een bestand src/app/backend-api.service.spec.ts is gemaakt met een eenheidstest voor uw nieuwe service.

Merk op hoe Angular CLI waarschuwt dat de service is gegenereerd maar nog nergens wordt aangeboden. Het is aan jou om de dienst als aanbieder te registreren door deze toe te voegen aan de providers: [] array waar je het nodig hebt (bijvoorbeeld in een module of component). Bijvoorbeeld:

import { BackendApiService } from './backend-api.service';

@NgModule({
  // ...
  providers: [BackendApiService],
  bootstrap: [AppComponent]
})

Beschikbare opties

  • --flat :boolean, standaard true , genereer servicebestand in src/app in plaats van src/app/backend-api
  • --spec :boolean, standaard true , genereer specificatiebestand met eenheidstest

Voer $ ng generate --help uit om alle beschikbare opties van uw lokaal geïnstalleerde Angular CLI te zien.

Voorbeelden:

# Generate service with DI token 'BackendApiService' in /src/app directory
$ ng generate service backend-api

# Generate service with DI token 'BackendApiService' in /src/app/backend-api directory
$ ng generate service backend-api --flat=false

Speciale opmerking

Angular CLI genereert niet zomaar code voor u. Het maakt gebruik van statische analyse om de semantiek van uw toepassing beter te begrijpen.

Als u bijvoorbeeld een nieuw onderdeel toevoegt met ng generate component , Angular CLI vindt de dichtstbijzijnde module in de modulestructuur van uw toepassing en integreert de nieuwe functie in die module.

Dus als je een applicatie met meerdere modules hebt, zal Angular CLI de nieuwe functie automatisch in de juiste module integreren, afhankelijk van de map waar je de opdracht vandaan haalt.

Uw eenheidstests uitvoeren

Angular CLI configureert automatisch de Karma-testrunner voor u wanneer uw toepassing voor het eerst wordt gemaakt.

Wanneer u een functie aan uw applicatie toevoegt, kunt u de --spec . gebruiken optie om aan te geven of u wilt dat Angular CLI ook een corresponderende .spec.ts . maakt bestand met een voorbeeldeenheidstest voor uw nieuwe functie.

Spec-bestanden worden gemaakt in dezelfde map van hun overeenkomstige functie in de src map. Hierdoor kunt u ze gemakkelijk vinden wanneer u aan een functie werkt.

Het uitvoeren van alle unit-tests van uw applicatie impliceert dus het uitvoeren van alle unit-tests gespecificeerd in alle bestanden die eindigen op .spec.ts in alle mappen in uw src directory.

Om alle eenheidstests uit te voeren, voer je uit:

$ ng test

De volgende uitvoer verschijnt in uw console:

$ ng test
[karma]: No captured browser, open http://localhost:9876/
[karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
[launcher]: Launching browser Chrome with unlimited concurrency
[launcher]: Starting browser Chrome
[Chrome 57.0.2987 (Mac OS X 10.12.0)]: Connected on socket 4OBzlsVyIPZyE1AYAAAA with id 41455596
Chrome 57.0.2987 (Mac OS X 10.12.0): Executed 3 of 3 SUCCESS (0.132 secs / 0.121 secs)

Er wordt ook een speciale browserinstantie gelanceerd:

Dit is wat er achter de schermen gebeurt:

  1. Angular CLI laadt .angular-cli.json .
  2. Angular CLI voert Karma uit met de configuratie gespecificeerd in .angular-cli.json . Standaard is dit karma.conf.js bevindt zich in de hoofdmap van uw toepassing.
  3. Karma opent de browser die is opgegeven in de Karma-configuratie. De browser is standaard ingesteld op Google Chrome.
  4. Karma geeft vervolgens de browser (Chrome) de opdracht om src/test.ts uit te voeren met behulp van het testraamwerk dat is gespecificeerd in de Karma-configuratie. Standaard is dit het Jasmine-framework. Het bestand src/test.ts wordt automatisch gemaakt wanneer uw toepassing wordt gemaakt. Het is vooraf geconfigureerd om de code te laden en te configureren die nodig is om uw Angular-toepassing te testen en alle specificatiebestanden uit te voeren die eindigen op .spec.ts in je src directory.
  5. Karma rapporteert het resultaat van de testrun aan de console.
  6. Karma kijkt naar de src bestand voor wijzigingen en herhaalt stap 4 en 5 wanneer een bestandswijziging wordt gedetecteerd.

Om het proces te beëindigen, kunt u op ctrl-c . drukken .

Als je meer wilt weten over het testen van je Angular-code, kun je de Official Angular Testing Guide raadplegen.

Uw end-to-end (E2E) tests uitvoeren

Angular CLI configureert Protractor automatisch voor u wanneer uw toepassing voor het eerst wordt gemaakt.

Voer het volgende uit om uw E2E-tests uit te voeren:

$ ng e2e

De volgende uitvoer verschijnt in uw console:

** NG Live Development Server is running on http://localhost:49152 **
Hash: e570d23ac26086496e1d
Time: 6087ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
I/file_manager - creating folder /Users/jvandemo/Projects/test/my-app/node_modules/protractor/node_modules/webdriver-manager/selenium
I/downloader - curl -o /Users/jvandemo/Projects/test/my-app/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.29.zip https://chromedriver.storage.googleapis.com/2.29/chromedriver_mac64.zip
I/update - chromedriver: unzipping chromedriver_2.29.zip
I/update - chromedriver: setting permissions to 0755 for /Users/jvandemo/Projects/test/my-app/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.29
I/launcher - Running 1 instances of WebDriver
I/direct - Using ChromeDriver directly...
Spec started

  my-app App
    ✓ should display message saying app works

Executed 1 of 1 spec SUCCESS in 0.523 sec.
I/launcher - 0 instance(s) of WebDriver still running
I/launcher - chrome #01 passed

Er wordt ook een speciale browserinstantie gelanceerd:

Dit is wat er achter de schermen gebeurt:

  1. Angular CLI laadt .angular-cli.json .
  2. Angular CLI voert Protractor uit met de configuratie gespecificeerd in .angular-cli.json . Standaard is dit de protractor.conf.js bestand dat zich in de hoofdmap van uw toepassing bevindt.
  3. Protractor opent de browser die is opgegeven in de Gradenboogconfiguratie. De browser is standaard ingesteld op Google Chrome.
  4. Protractor geeft vervolgens de browser (Chrome) de opdracht om alle spec-bestanden uit te voeren die eindigen op .e2e-spec.ts in je e2e directory.
  5. Protractor rapporteert het resultaat van de testrun aan de console.

Het proces wordt dan automatisch afgesloten na stap 5.

Als je meer wilt weten over het E2E-testen van je Angular-code, kun je de Official Angular Testing Guide en de gradenboogdocumentatie raadplegen.

Uw applicatie voor productie bouwen

Draait ng serve bouwt en bundelt uw Angular-applicatie tijdens de ontwikkeling automatisch naar een virtueel bestandssysteem.

Wanneer uw toepassing echter gereed is voor productie, heeft u echte bestanden nodig die u op uw server of in de cloud kunt implementeren.

Voer het volgende uit om uw toepassing te bouwen en te bundelen voor implementatie:

$ ng build

De uitvoer van het commando wordt naar je console gestuurd:

Hash: 59aaa9ef8eac5d46cdf8
Time: 5433ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.61 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.07 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

Dit is wat er achter de schermen gebeurt:

  1. Angular CLI laadt de configuratie van .angular-cli.json .
  2. Angular CLI voert Webpack uit om alle JavaScript- en CSS-code te bouwen en te bundelen.
  3. Het resultaat wordt geschreven naar de outDir directory opgegeven in uw Angular CLI-configuratie. Standaard is dit de dist directory.

Beschikbare opties

  • --aot :compilatie vooraf inschakelen
  • --base-href :string, de base href om te gebruiken in het indexbestand
  • --environment :string, standaard dev , omgeving om te gebruiken
  • --output-path :string, directory om de uitvoer naar te schrijven
  • --target :string, standaard development , omgeving om te gebruiken
  • --watch :boolean, standaard false , bekijk bestanden op wijzigingen en herbouw wanneer een wijziging wordt gedetecteerd.

Doelen

Het specificeren van een doel heeft invloed op de manier waarop het bouwproces werkt. De waarde kan een van de volgende zijn:

  • development :standaardmodus, code niet verkleinen of lelijker maken
  • production :code verkleinen en lelijker maken.

Uw applicatie bouwen in productiemodus:

$ ng build --target=production

Dit resulteert in bundels die verkleind en lelijk zijn en hashes in hun naam hebben:

Hash: 4dea6adc9ac01de3c11b
Time: 5588ms
chunk    {0} polyfills.2d45a4c73c85e24fe474.bundle.js (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.a64b48e56248eb808195.bundle.js (main) 20.8 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.205c7417e47c580a2c34.bundle.js (vendor) 1.1 MB [initial] [rendered]
chunk    {4} inline.310ccba0fff49a724c8f.bundle.js (inline) 0 bytes [entry] [rendered]

Omgevingen

In omgevingen kunt u instellingen opgeven om uw toepassingsgedrag aan te passen.

U kunt uw eigen omgevingen definiëren in de .angular-cli.json het dossier. De standaard zijn:

  • source :gebruik instellingen gedefinieerd in environments/environment.ts
  • dev :gebruik instellingen gedefinieerd in environments/environment.ts
  • prod :gebruik instellingen gedefinieerd in environments/environment.prod.ts .

Hier, environments/environment.ts is gelijk aan:

export const environment = {
  production: false
};

En environments/environment.prod.ts is gelijk aan:

export const environment = {
  production: true
};

Het bouwproces gebruikt de dev standaard omgeving.

Als u een andere omgeving specificeert, zal het bouwproces de corresponderende omgeving gebruiken:

# Uses environments/environment.ts
$ ng build

# Also uses environments/environment.ts
$ ng build --environment=dev

# Uses environments/environment.prod.ts
$ ng build --environment=prod

Zoals je kunt zien in src/main.ts , u kunt vanuit uw code toegang krijgen tot de omgevingsinstellingen door environments/environment . te importeren :

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Het bouwproces zorgt ervoor dat de juiste omgeving wordt geboden wanneer je het importeert.

Uw toepassing implementeren

Vanaf 9 februari 2017 is de ng deploy commando is verwijderd uit de kern van Angular CLI. Lees hier meer.

Uw aanvraag uitwerpen

Vanaf v1.0 biedt Angular CLI een opdracht om uw toepassing los te koppelen van Angular CLI.

Standaard beheert Angular CLI de onderliggende webpack-configuratie voor u, zodat u niet te maken krijgt met de complexiteit ervan.

Als u op enig moment Webpack handmatig wilt configureren en u Angular CLI niet langer wilt gebruiken met uw Angular-toepassing, kunt u het volgende uitvoeren:

$ ng eject

Dit genereert de volgende uitvoer in uw console:

==========================================================================================
Ejection was successful.

To run your builds, you now need to do the following commands:
   - "npm run build" to build.
   - "npm run test" to run unit tests.
   - "npm start" to serve the app using webpack-dev-server.
   - "npm run e2e" to run protractor.

Running the equivalent CLI commands will result in an error.

==========================================================================================
Some packages were added. Please run "npm install".

Dit is wat er achter de schermen gebeurt:

  1. Een eigenschap ejected: true wordt toegevoegd aan de .angular-cli.json bestand
  2. Een webpack.config.js bestand wordt gegenereerd in de hoofdmap van uw toepassing met een stand-alone Webpack-configuratie, zodat u uw project kunt bouwen zonder Angular CLI
  3. De build script in uw package.json is bijgewerkt zodat u npm run build . kunt uitvoeren om uw project te bouwen
  4. De test script in uw package.json is bijgewerkt zodat u npm run test . kunt uitvoeren of npm test om uw eenheidstests uit te voeren
  5. De start script in uw package.json is bijgewerkt zodat u npm run start . kunt uitvoeren of npm start om een ​​ontwikkelserver te starten
  6. De e2e script in uw package.json is bijgewerkt zodat u npm run e2e . kunt uitvoeren om uw end-to-end tests uit te voeren.

Nadat u uw toepassing heeft verwijderd, kunt u de Webpack-configuratie handmatig naar wens bijwerken en werken de Angular CLI-commando's niet meer.

Dus als u, om wat voor reden dan ook, afstand wilt nemen van Angular CLI, kunt u met de uitwerpopdracht terecht.

Een blik in de toekomst

De roadmap van Angular CLI bevat veel opwindende aankomende functies:

  • ondersteuning voor progressieve web-app (PWA)
    Angular CLI kan een Web Application Manifest voor u maken, een App Shell genereren en Service Worker-scripts leveren om uw applicatiegegevens in de cache op te slaan.
    Lees hier meer over mobiele ondersteuning.
  • Ondersteuning voor refactoring
    Naast het toevoegen van functies aan uw toepassing, kunt u met Angular CLI ook bestaande functies aanpassen, bijvoorbeeld door een component te verplaatsen of een service te hernoemen.
  • Ondersteuning upgraden
    Angular CLI kan u helpen met Angular-upgrades. Omdat Angular CLI een semantisch begrip van uw toepassing heeft, kan het u helpen met codewijzigingen die nodig zijn bij het upgraden naar een nieuwere versie van Angular.
  • Uitbreidbaarheid
    Verbeterde ondersteuning voor uitbreidbaarheid, zodat u uw eigen aangepaste add-ons en implementatiescripts kunt maken.
  • Verhoogde prestaties
    Verbeterde prestaties zodat Angular CLI sneller wordt.
  • Bibliotheekontwikkelaarsmodus
    Naast het maken van een nieuwe toepassing, kunt u met Angular CLI ook een nieuwe bibliotheek maken die door anderen kan worden gebruikt.

Sommige van deze functies zijn al gedeeltelijk beschikbaar. Bekijk de GitHub-repository als je ermee wilt spelen.

Samenvatting

Angular CLI is een opdrachtregelinterface (CLI) om uw ontwikkelworkflow te automatiseren.

Tegenwoordig kunt u Angular CLI al gebruiken om:

  • maak een nieuwe Angular-applicatie
  • voer een ontwikkelserver uit met LiveReload-ondersteuning om een ​​voorbeeld van uw applicatie te bekijken tijdens de ontwikkeling
  • functies toevoegen aan uw bestaande Angular-applicatie
  • voer de unit-tests van uw toepassing uit
  • voer de end-to-end (E2E) tests van uw toepassing uit
  • bouw uw applicatie voor implementatie naar productie
  • implementeer uw applicatie op een server.

Hoewel het technisch gezien niet vereist is om Angular CLI te gebruiken om een ​​Angular-toepassing te ontwikkelen, kan het zeker de kwaliteit van uw code verbeteren en u veel tijd en moeite besparen.

Vanwege de vele opwindende functies die in de loop van de tijd zullen worden toegevoegd, zal Angular CLI waarschijnlijk een onmisbaar hulpmiddel worden voor het ontwikkelen van Angular-applicaties.

Ga voor meer informatie over Angular CLI naar de officiële website en de GitHub-repository.

De Ultimate Angular CLI-referentiegids is peer-reviewed door Tim Severien, Vildan Softic en Joan Yin. Dank aan alle peer reviewers van SitePoint voor het zo goed mogelijk maken van SitePoint-inhoud!