Angular CLI - szybki przewodnik

Angular CLI ułatwia rozpoczęcie dowolnego projektu Angular. Angular CLI zawiera polecenia, które pomagają nam szybko tworzyć i rozpoczynać projekt. Przejdźmy teraz przez dostępne polecenia, aby utworzyć projekt, komponent i usługi, zmienić port itp.

Aby pracować z Angular CLI, musimy mieć go zainstalowanego w naszym systemie. Użyjmy następującego polecenia do tego samego -

npm install -g @angular/cli

Aby stworzyć nowy projekt, możemy uruchomić następujące polecenie w linii poleceń i projekt zostanie utworzony.

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //

ng serv // skompiluje się i możesz zobaczyć wynik twojego projektu w przeglądarce -

http://localhost:4200/

4200 to domyślny port używany podczas tworzenia nowego projektu. Możesz zmienić port za pomocą następującego polecenia -

ng serve --host 0.0.0.0 --port 4201

Poniższa tabela zawiera listę kilku ważnych poleceń wymaganych podczas pracy z projektami Angular 4.

Sr.No	Polecenia i opis
1	Component ng g komponent nowy komponent
2	Directive ng g dyrektywa nowa-dyrektywa
3	Pipe ng g pipe new-pipe
4	Service ng g service new-service
5	Module moduł ng g my-module

Za każdym razem, gdy tworzony jest nowy moduł, komponent lub usługa, odniesienie do nich jest aktualizowane w module nadrzędnym app.module.ts.

Aby pracować z Angular CLI, musimy mieć zainstalowany Node w naszym systemie.

Pobierz archiwum Node.js.

Pobierz najnowszą wersję instalowalnego pliku archiwum Node.js z witryny Node.js Downloads . W chwili pisania tego samouczka następujące wersje są dostępne w różnych systemach operacyjnych.

OS	Nazwa archiwum
Windows	node-v6.3.1-x64.msi
Linux	node-v6.3.1-linux-x86.tar.gz
Prochowiec	node-v6.3.1-darwin-x86.tar.gz
SunOS	node-v6.3.1-sunos-x86.tar.gz

Instalacja w systemie UNIX / Linux / Mac OS X i SunOS

W oparciu o architekturę systemu operacyjnego pobierz i rozpakuj archiwum node-v6.3.1-osname.tar.gz do / tmp, a następnie przenieś wyodrębnione pliki do katalogu / usr / local / nodejs. Na przykład:

$ cd /tmp $ wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz
$ tar xvfz node-v6.3.1-linux-x64.tar.gz $ mkdir -p /usr/local/nodejs
$ mv node-v6.3.1-linux-x64/* /usr/local/nodejs

Dodaj / usr / local / nodejs / bin do zmiennej środowiskowej PATH.

OS	Wynik
Linux	export PATH = $ PATH: / usr / local / nodejs / bin
Prochowiec	export PATH = $ PATH: / usr / local / nodejs / bin
FreeBSD	export PATH = $ PATH: / usr / local / nodejs / bin

Instalacja w systemie Windows

Użyj pliku MSI i postępuj zgodnie z wyświetlanymi instrukcjami, aby zainstalować Node.js. Domyślnie instalator używa dystrybucji Node.js w C: \ Program Files \ nodejs. Instalator powinien ustawić katalog C: \ Program Files \ nodejs \ bin w zmiennej środowiskowej PATH okna. Uruchom ponownie wszystkie otwarte monity poleceń, aby zmiana zaczęła obowiązywać.

Weryfikacja instalacji: wykonywanie pliku

Utwórz plik js o nazwie main.js na twoim komputerze (Windows lub Linux) z następującym kodem.

/* Hello, World! program in node.js */
console.log("Hello, World!")

Teraz uruchom plik main.js za pomocą interpretera Node.js, aby zobaczyć wynik -

$ node main.js

Jeśli wszystko jest w porządku z twoją instalacją, powinno to dać następujący wynik -

Hello, World!

Teraz Node jest zainstalowany, uruchom następujące polecenie, aby zainstalować Angular CLI.

Użyjmy następującego polecenia do tego samego -

npm install -g @angular/cli

Zweryfikuj instalację

Teraz uruchom następujące polecenie, aby zobaczyć wynik -

$ ng --version

Jeśli wszystko jest w porządku z twoją instalacją, powinno to dać następujący wynik -

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.0
Node: 12.16.1
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.0
@angular-devkit/core         9.1.0
@angular-devkit/schematics   9.1.0
@schematics/angular          9.1.0
@schematics/update           0.901.0
rxjs                         6.5.4

W systemie Windows, jeśli ng nie jest rozpoznawane jako polecenie wewnętrzne lub zewnętrzne, zaktualizuj zmienną ścieżki systemowej, tak aby zawierała następującą ścieżkę.

C:\Users\<User Directory>\AppData\Roaming\npm

Składnia

ng version [options]
ng v [options]

Polecenie ng version pokazuje zainstalowaną wersję Angular CLI. Opcje są parametrami opcjonalnymi.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--help = prawda | fałsz | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false

Przykład

\>Node ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.0
Node: 12.16.1
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.0
@angular-devkit/core         9.1.0
@angular-devkit/schematics   9.1.0
@schematics/angular          9.1.0
@schematics/update           0.901.0
rxjs                         6.5.4

Składnia

ng new <name> [options]
ng n <name> [options]

Nowe polecenie tworzy obszar roboczy o podanym namez domyślną aplikacją kątową. Zawiera interaktywne monity o ustawianie opcjonalnych konfiguracji. Wszystkie monity mają wartości domyślne do wyboru. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<nazwa>	Nazwa nowego obszaru roboczego i początkowego projektu.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--collection = kolekcja	Zbiór schematów do użycia podczas generowania początkowej aplikacji. Aliasy: -c.
2	--commit = true | false	Wstępne informacje o zatwierdzeniu repozytorium git. Domyślnie: prawda.
3	--createApplication = true | false	Gdy true (wartość domyślna), tworzy nowy początkowy projekt aplikacji w folderze src nowego obszaru roboczego. Gdy false, tworzy pusty obszar roboczy bez początkowej aplikacji. Następnie możesz użyć polecenia generowania aplikacji, aby wszystkie aplikacje zostały utworzone w folderze projektów. Domyślnie: prawda.
4	--defaults = true | false	Gdy prawda, wyłącza interaktywne monity o wprowadzenie opcji z wartością domyślną.
5	--directory = katalog	Nazwa katalogu, w którym ma zostać utworzony obszar roboczy.
6	--dryRun = true | false	Gdy prawda, przebiega i raportuje aktywność bez wypisywania wyników. Domyślnie: false. Aliasy: -d.
7	--force = true | false	Gdy prawda, wymusza nadpisanie istniejących plików. Domyślnie: false. Aliasy: -f.
8	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false.
9	--inlineStyle = true | false	Jeśli prawda, włącza style w tekście komponentu TS. Domyślnie tworzony jest zewnętrzny plik stylów i odwoływanie się do niego w pliku TS komponentu. Domyślnie: false.
10	--inlineStyle = true | false	Jeśli prawda, włącza style w tekście komponentu TS. Domyślnie tworzony jest zewnętrzny plik stylów i odwoływanie się do niego w pliku TS komponentu. Domyślnie: false. Aliasy: -t.
11	--interactive = true | false	Gdy false, wyłącza interaktywne monity o wprowadzanie danych.
12	--minimal = true | false	Gdy prawda, tworzy projekt bez żadnych struktur testowych. (Używaj tylko do celów edukacyjnych.) Domyślnie: false.
13	--newProjectRoot = newProjectRoot	Ścieżka, w której zostaną utworzone nowe projekty, względem nowego katalogu głównego obszaru roboczego. Domyślnie: projekty.
14	--packageManager = npm | yarn | pnpm | cnpm	Menedżer pakietów używany do instalowania zależności.
15	--prefix = prefiks	Prefiks, który ma zostać zastosowany do wygenerowanych selektorów dla początkowego projektu. Domyślnie: aplikacja. Aliasy: -p.
16	--routing = true | false	Gdy prawda, generuje moduł routingu dla projektu początkowego.
17	--skipGit = true | false	Gdy prawda, nie inicjuje repozytorium git. Domyślnie: false. Aliasy: -g.
18	--skipInstall = true | false	Gdy prawda, nie instaluje pakietów zależności. Domyślnie: false.
19	--skipTests = true | false	Jeśli prawda, nie generuje plików testowych „spec.ts” dla nowego projektu. Domyślnie: false. Aliasy: -S.
20	--strict = true | false	Tworzy obszar roboczy z bardziej rygorystycznymi opcjami kompilatora TypeScript. Domyślnie: false.
21	--style = css | scss | sass | less | styl	Rozszerzenie pliku lub preprocesor do użycia dla plików stylów.
22	--verbose = true | false	Gdy prawda, dodaje więcej szczegółów do rejestrowania danych wyjściowych. Domyślnie: false. Aliasy: -v.
23	--viewEncapsulation = Emulowane | Natywne | Brak | ShadowDom	Strategia hermetyzacji widoku do użycia w początkowym projekcie.

Przykład

\>Node ng new TutorialsPoint
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE TutorialsPoint/angular.json (3630 bytes)
CREATE TutorialsPoint/package.json (1291 bytes)
CREATE TutorialsPoint/README.md (1031 bytes)
CREATE TutorialsPoint/tsconfig.json (489 bytes)
CREATE TutorialsPoint/tslint.json (3125 bytes)
CREATE TutorialsPoint/.editorconfig (274 bytes)
CREATE TutorialsPoint/.gitignore (631 bytes)
CREATE TutorialsPoint/browserslist (429 bytes)
CREATE TutorialsPoint/karma.conf.js (1026 bytes)
CREATE TutorialsPoint/tsconfig.app.json (210 bytes)
CREATE TutorialsPoint/tsconfig.spec.json (270 bytes)
CREATE TutorialsPoint/src/favicon.ico (948 bytes)
CREATE TutorialsPoint/src/index.html (300 bytes)
CREATE TutorialsPoint/src/main.ts (372 bytes)
CREATE TutorialsPoint/src/polyfills.ts (2835 bytes)
CREATE TutorialsPoint/src/styles.css (80 bytes)
CREATE TutorialsPoint/src/test.ts (753 bytes)
CREATE TutorialsPoint/src/assets/.gitkeep (0 bytes)
CREATE TutorialsPoint/src/environments/environment.prod.ts (51 bytes)
CREATE TutorialsPoint/src/environments/environment.ts (662 bytes)
CREATE TutorialsPoint/src/app/app-routing.module.ts (246 bytes)
CREATE TutorialsPoint/src/app/app.module.ts (393 bytes)
CREATE TutorialsPoint/src/app/app.component.html (25755 bytes)
CREATE TutorialsPoint/src/app/app.component.spec.ts (1083 bytes)
CREATE TutorialsPoint/src/app/app.component.ts (218 bytes)
CREATE TutorialsPoint/src/app/app.component.css (0 bytes)
CREATE TutorialsPoint/e2e/protractor.conf.js (808 bytes)
CREATE TutorialsPoint/e2e/tsconfig.json (214 bytes)
CREATE TutorialsPoint/e2e/src/app.e2e-spec.ts (647 bytes)
CREATE TutorialsPoint/e2e/src/app.po.ts (301 bytes)
 Packages installed successfully.

Tutaj nowe polecenie utworzyło kątowy obszar roboczy i projekt o nazwie TutorialsPoint w naszym katalogu Node.

Składnia

ng help [options]

ng help polecenie wyświetla listę dostępnych poleceń wraz z ich krótkimi opisami. Opcje są parametrami opcjonalnymi.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--help = prawda | fałsz | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false

Przykład

\>Node ng help
Available Commands:
  add Adds support for an external library to your project.
  analytics Configures the gathering of Angular CLI usage metrics. See https://v
8.angular.io/cli/usage-analytics-gathering.
  build (b) Compiles an Angular app into an output directory named dist/ at the
given output path. Must be executed from within a workspace directory.
  deploy Invokes the deploy builder for a specified project or for the default p
roject in the workspace.
  config Retrieves or sets Angular configuration values in the angular.json file
 for the workspace.
  doc (d) Opens the official Angular documentation (angular.io) in a browser, an
d searches for a given keyword.
  e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Pro
tractor.
  generate (g) Generates and/or modifies files based on a schematic.
  help Lists available commands and their short descriptions.
  lint (l) Runs linting tools on Angular app code in a given project folder.
  new (n) Creates a new workspace and an initial Angular app.
  run Runs an Architect target with an optional custom builder configuration def
ined in your project.
  serve (s) Builds and serves your app, rebuilding on file changes.
  test (t) Runs unit tests in a project.
  update Updates your application and its dependencies. See https://update.angul
ar.io/
  version (v) Outputs Angular CLI version.
  xi18n (i18n-extract) Extracts i18n messages from source code.

For more detailed help run "ng [command name] --help"

W przypadku pojedynczych poleceń użyj opcji --help lub -h z poleceniem. Najpierw przejdź do projektu kątowego utworzonego za pomocą polecenia ng new, a następnie uruchom polecenie.

Przykład

\>Node\>TutorialsPoint> ng serve --help
Builds and serves your app, rebuilding on file changes.
usage: ng serve <project> [options]

arguments:
   project
      The name of the project to build. Can be an application or a library.

options:
   --allowed-hosts
      Whitelist of hosts that are allowed to access the dev server.
   --aot
      Build using Ahead of Time compilation.
   --base-href
      Base url for the application being built.
   --browser-target
      Target to serve.
   --build-event-log
      **EXPERIMENTAL** Output file path for Build Event Protocol events
   --common-chunk
      Use a separate bundle containing code used across multiple bundles.
   --configuration (-c)
      A named build target, as specified in the "configurations" section of angula
r.json.
   Each named target is accompanied by a configuration of option defaults for t
hat target.
    Setting this explicitly overrides the "--prod" flag
   --deploy-url
      URL where files will be deployed.
   --disable-host-check
      Don't verify connected clients are part of allowed hosts.
   --eval-source-map
      Output in-file eval sourcemaps.
   --help
      Shows a help message for this command in the console.
   --hmr
      Enable hot module replacement.
   --hmr-warning
      Show a warning when the --hmr option is enabled.
   --host
      Host to listen on.
   --live-reload
     Whether to reload the page on change, using live-reload.
   --open (-o)
      Opens the url in default browser.
   --optimization
      Enables optimization of the build output.
   --poll
      Enable and define the file watching poll time period in milliseconds.
   --port
      Port to listen on.
   --prod
      Shorthand for "--configuration=production".
      When true, sets the build configuration to the production target.
      By default, the production target is set up in the workspace configuration s
uch that all builds make use of bundling, limited tree-shaking, and also limited
  dead code elimination.
   --progress
      Log progress to the console while building.
   --proxy-config
      Proxy configuration file.
   --public-host
      The URL that the browser client (or live-reload client, if enabled) should u
see to connect to the development server. Use for a complex dev server setup, such as one with reverse proxies.
   --serve-path
      The pathname where the app will be served.
   --serve-path-default-warning
      Show a warning when deploy-url/base-href use unsupported serve path values.
   --source-map
      Output sourcemaps.
   --ssl
      Serve using HTTPS.
   --ssl-cert
      SSL certificate to use for serving HTTPS.
   --ssl-key
      SSL key to use for serving HTTPS.
   --vendor-chunk
      Use a separate bundle containing only vendor libraries.
   --vendor-source-map
      Resolve vendor packages sourcemaps.
   --verbose
      Adds more details to output logging.
   --watch
      Rebuild on change.

Składnia

ng generate <schematic> [options]
ng g <schematic> [options]

Polecenie ng generuj generuje i / lub modyfikuje pliki na podstawie schematu. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<schematic>	Schemat lub kolekcja: schemat do wygenerowania. Ta opcja może przyjąć jedno z następujących poleceń podrzędnych - appShell application class component directive enum guard interceptor interface library module pipe service serviceWorker webWorker

Opcje

Sr.No.	Opcja i składnia	Opis
1	--defaults = true | false	Gdy prawda, wyłącza interaktywne monity o wprowadzenie opcji z wartością domyślną.
2	--dryRun = true | false	Gdy prawda, przebiega i raportuje aktywność bez wypisywania wyników. Domyślnie: false. Aliasy: -d.
3	--force = true | false	Gdy prawda, wymusza nadpisanie istniejących plików. Domyślnie: false. Aliasy: -f.
4	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false.
5	--interactive = true | false	Gdy false, wyłącza interaktywne monity o wprowadzanie danych.

Najpierw przejdź do projektu kątowego utworzonego za pomocą polecenia ng new, a następnie uruchom polecenie.

Przykład

\>Node\>TutorialsPoint> ng generate component goals
CREATE src/app/goals/goals.component.html (20 bytes)
CREATE src/app/goals/goals.component.spec.ts (621 bytes)
CREATE src/app/goals/goals.component.ts (271 bytes)
CREATE src/app/goals/goals.component.css (0 bytes)
UPDATE src/app/app.module.ts (471 bytes)

Tutaj polecenie generowania danych utworzyło nowy komponent w naszym projekcie TutorialsPoint i dodało ten nowy wpis komponentu w app.module.ts.

Składnia

ng build <project> [options]
ng b <project> [options]

Komenda ng build kompiluje aplikację / bibliotekę kątową do katalogu wyjściowego o nazwie dist w podanej ścieżce. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<project>	Nazwa aplikacji lub biblioteki, która ma zostać zbudowana.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--aot = true | false	Kompiluj, używając kompilacji Ahead of Time. Domyślnie: false.
2	--baseHref = baseHref	Podstawowy adres URL budowanej aplikacji.
3	--buildEventLog = buildEventLog	EKSPERYMENTALNA Ścieżka pliku wyjściowego dla zdarzeń protokołu Build Event Protocol.
4	--buildOptimizer = true | false	Włącza optymalizacje „@ angular-devkit / build-optimizer” podczas korzystania z opcji „aot”. Domyślnie: false.
5	--commonChunk = true | false	Użyj oddzielnego pakietu zawierającego kod używany w wielu pakietach. Domyślnie: false.
6	--configuration = konfiguracja	Nazwany cel kompilacji określony w sekcji „configuration” pliku angular.json. Każdemu nazwanemu celowi towarzyszy konfiguracja domyślnych opcji dla tego celu. Ustawienie tej opcji jawnie zastępuje flagę „--prod”. Aliasy: -c.
7	--crossOrigin = none | anonymous | use-credentials	Zdefiniuj ustawienie atrybutu crossorigin elementów, które zapewniają obsługę mechanizmu CORS. Domyślnie: brak.
8	--deleteOutputPath = true | false	Usuń ścieżkę wyjściową przed budowaniem. Domyślnie: prawda.
9	--deployUrl = deployUrl	Adres URL, pod którym zostaną wdrożone pliki.
10	--experimentalRollupPass = true | false	Połącz moduły z pakietem Rollup przed połączeniem ich z pakietem Webpack. Domyślnie: false.
11	--extractCss = true | false	Wyodrębnij css z globalnych stylów do plików css zamiast js. Domyślnie: false.
12	--extractLicenses = true | false	Rozpakuj wszystkie licencje w osobnym pliku. Domyślnie: false.
13	--forkTypeChecker = true | false	Uruchom narzędzie do sprawdzania typów TypeScript w procesie rozwidlonym. Domyślnie: prawda.
14	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false.
15	--i18nMissingTranslation = ostrzeżenie | błąd | ignoruj	Jak radzić sobie z brakującymi tłumaczeniami dla i18n. Domyślnie: ostrzeżenie.
16	--index = indeks	Konfiguruje generowanie indeksu HTML aplikacji.
17	--localize = true | false
18	--main = main	Pełna ścieżka do głównego punktu wejścia do aplikacji względem bieżącego obszaru roboczego.
19	--namedChunks = true | false	Użyj nazwy pliku dla leniwie ładowanych fragmentów. Domyślnie: prawda.
20	--ngswConfigPath = ngswConfigPath	Ścieżka do ngsw-config.json.
21	--optimization = true | false	Włącza optymalizację wyników kompilacji.
22	--outputHashing = none | all | media | bundles	Zdefiniuj tryb mieszania z pomijaniem pamięci podręcznej i pomijaniem nazwy pliku wyjściowego. Domyślnie: brak.
23	--outputPath = outputPath	Pełna ścieżka do nowego katalogu wyjściowego, względem bieżącego obszaru roboczego. Domyślnie zapisuje dane wyjściowe do folderu o nazwie dist / w bieżącym projekcie.
24	--głosowanie	Włącz i zdefiniuj okres odpytywania monitorowania plików w milisekundach.
25	--polyfills = polyfills	Pełna ścieżka do pliku polyfills względem bieżącego obszaru roboczego.
26	--preserveSymlinks = true | false	Nie używaj prawdziwej ścieżki podczas rozwiązywania modułów. Domyślnie: false.
27	--prod = true | false	Skrót od „--configuration = production”. Gdy prawda, ustawia konfigurację kompilacji na cel produkcyjny. Domyślnie cel produkcyjny jest ustawiony w konfiguracji obszaru roboczego w taki sposób, że wszystkie kompilacje wykorzystują pakowanie, ograniczone wstrząsanie drzewami, a także ograniczoną eliminację martwego kodu.
28	--progress = true | false	Rejestruj postęp na konsoli podczas budowania. Domyślnie: prawda.
27	--resourcesOutputPath = resourcesOutputPath	Ścieżka, w której zostaną umieszczone zasoby stylu, względem outputPath.
28	--serviceWorker = true | false	Generuje konfigurację mechanizmu Service Worker dla kompilacji produkcyjnych. Domyślnie: false.
29	--showCircularDependencies = true | false	Pokaż ostrzeżenia o cyklicznych zależnościach w kompilacjach. Domyślnie: prawda.
30	--sourceMap = true | false	Wyjściowe mapy źródeł. Domyślnie: prawda.
31	--statsJson = true | false	Generuje plik „stats.json”, który można analizować za pomocą narzędzi, takich jak „analizator pakietu webpack”. Domyślnie: false.
32	--subresourceIntegrity = true | false	Umożliwia korzystanie z weryfikacji integralności zasobów podrzędnych. Domyślnie: false.
33	--tsConfig = tsConfig	Pełna ścieżka do pliku konfiguracyjnego TypeScript, względem bieżącego obszaru roboczego.
34	--vendorChunk = true | false	Użyj oddzielnego pakietu zawierającego tylko biblioteki dostawców. Domyślnie: prawda.
35	--verbose = true | false	Dodaje więcej szczegółów do rejestrowania danych wyjściowych. Domyślnie: prawda.
36	--watch = true | false	Uruchom kompilację, gdy pliki się zmienią. Domyślnie: false.
37	--webWorkerTsConfig = webWorkerTsConfig	Konfiguracja TypeScript dla modułów Web Worker.

Najpierw przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng generuj . Zastąp zawartość app.component.html następującą zawartością, a następnie uruchom polecenie.

<app-goals></app-goals>
<router-outlet></router-outlet>

Przykład

\>Node\>TutorialsPoint> ng build
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 12.4 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 13.9 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 61.4 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 65 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.67 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial] [rendered]
Date: 2020-06-04T01:31:35.612Z - Hash: d5fd9371cdc40ae353bc - Time: 210494ms

Tutaj polecenie kompilacji ng pomyślnie zbudowało nasz projekt TutorialsPoint.

Składnia

ng run project:target[:configuration]

ng run polecenie uruchamia element docelowy Architekt z opcjonalną niestandardową konfiguracją konstruktora zdefiniowaną w angular.json w projekcie. Tutaj projekt jest nazwą aplikacji zdefiniowaną w angular.json. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<cel>	Architekt docelowy do uruchomienia.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--configuration = konfiguracja	Nazwana konfiguracja konstruktora zdefiniowana w sekcji „configuration” pliku angular.json. Konstruktor używa nazwanej konfiguracji do uruchomienia podanego celu. Aliasy: -c.
2	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false.

Najpierw przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng generuj, a następnie uruchom polecenie.

Przykład

\>Node\>TutorialsPoint> ng run TutorialsPoint:build
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 12.9 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 15.1 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 12.4 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 13.9 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.66 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial] [rendered]
Date: 2020-06-04T02:31:28.919Z - Hash: dd73885c28e550d01341 - Time: 13742ms

Tutaj polecenie kompilacji ng pomyślnie zbudowało nasz projekt TutorialsPoint.

Składnia

ng serve <project> [options]
ng s <project> [options]

ng służy do kompilacji poleceń i obsługuje aplikację. Odbudowuje aplikację, jeśli nastąpią zmiany. Tutaj projekt jest nazwą aplikacji zdefiniowaną w angular.json. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<project>	Nazwa projektu do zbudowania. Może to być aplikacja lub biblioteka.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--allowedHosts	Biała lista hostów, które mają dostęp do serwera deweloperskiego.
2	--aot = true | false	Kompiluj, używając kompilacji Ahead of Time.
3	--baseHref = baseHref	Podstawowy adres URL budowanej aplikacji.
4	--buildEventLog = buildEventLog	EKSPERYMENTALNA Ścieżka pliku wyjściowego dla zdarzeń protokołu Build Event Protocol
5	--commonChunk = true | false	Użyj oddzielnego pakietu zawierającego kod używany w wielu pakietach.
6	--configuration = konfiguracja	Nazwany cel kompilacji określony w sekcji „configuration” pliku angular.json. Każdemu nazwanemu celowi towarzyszy konfiguracja domyślnych opcji dla tego celu. Ustawienie tej opcji jawnie zastępuje flagę „--prod”. Aliasy: -c
7	--deployUrl = deployUrl	Adres URL, pod którym zostaną wdrożone pliki.
8	--disableHostCheck = true | false	Nie sprawdzaj, czy podłączeni klienci są częścią dozwolonych hostów. Default: false
9	--help=true|false|json|JSON	Shows a help message for this command in the console. Default: false
10	--hmr=true|false	Enable hot module replacement. Default: false
11	--hmrWarning=true|false	Show a warning when the --hmr option is enabled. Default: true
12	--host=host	Host to listen on. Default: localhost
13	--liveReload=true|false	Whether to reload the page on change, using live-reload. Default: true
14	--open=true|false	Opens the url in default browser. Default: false Aliases: -o
15	--optimization=true|false	Enables optimization of the build output.
16	--poll	Enable and define the file watching poll time period in milliseconds.
17	--port	Port to listen on. Default: 4200
18	--prod=true|false	Shorthand for "--configuration=production". When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.
19	--progress=true|false	Log progress to the console while building.
20	--proxyConfig=proxyConfig	Proxy configuration file.
21	--publicHost=publicHost	The URL that the browser client (or live-reload client, if enabled) should use to connect to the development server. Use for a complex dev server setup, such as one with reverse proxies.
22	--servePath=servePath	The pathname where the app will be served.
23	--servePathDefaultWarning=true|false	Show a warning when deploy-url/base-href use unsupported serve path values. Default: true
24	--sourceMap=true|false	Output sourcemaps.
25	--ssl=true|false	Serve using HTTPS. Default: false
26	--sslCert=sslCert	SSL certificate to use for serving HTTPS.
27	--sslKey=sslKey	SSL key to use for serving HTTPS.
28	--vendorChunk=true|false	Use a separate bundle containing only vendor libraries.
29	--verbose=true|false	Adds more details to output logging.
30	--watch=true|false	Rebuild on change. Default: true

First move to an angular project updated using ng build command and then run the command.

Example

\>Node\>TutorialsPoint> ng serve
chunk {main} main.js, main.js.map (main) 14.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-04T04:01:47.562Z - Hash: a90c5fc750c475cdc4d1 - Time: 10164ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Here ng serve command has built and serve our project TutorialsPoint successfully.Now open http://localhost:4200 in a browser window and verify the output.

Syntax

ng lint <project> [options]
ng l <project> [options]

ng lint run the linting tool on angular app code. It checks the code quality of angular project specified. It uses TSLint as default linting tool and uses the default configuration available in tslint.json file. Options are optional parameters.

Arguments

Sr.No.	Argument & Syntax	Description
1	<project>	The name of the project to lint.

Options

Sr.No.	Option & Syntax	Description
1	--configuration=configuration	The linting configuration to use. Aliases: -c
2	--exclude	Files to exclude from linting.
3	--files	Files to include in linting.
4	--fix=true|false	Fixes linting errors (may overwrite linted files). Default: false
5	--force=true|false	Succeeds even if there was linting errors. Default: false
6	--format=format	Output format (prose, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist). Default: prose
7	--help=true|false|json|JSON	Shows a help message for this command in the console. Default: false
8	--silent=true|false	Show output text. Default: false
9	--tsConfig=tsConfig	The name of the TypeScript configuration file.
10	--tslintConfig=tslintConfig	The name of the TSLint configuration file.
11	--typeCheck=true|false	Controls the type check for linting. Default: false

First move to an angular project updated using ng build command.

Update goals.component.html and goals.component.ts as following.

goals.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-goals',
   templateUrl: './goals.component.html',
   styleUrls: ['./goals.component.css']
})
export class GoalsComponent implements OnInit {
   title = 'Goal Component'
   constructor() { }
   ngOnInit(): void {
   }
}

goals.component.html

<p>{{title}}</p>

Now run the linting command.

Example

\>Node\>TutorialsPoint> ng lint
Linting "TutorialsPoint"...

ERROR: D:/Node/TutorialsPoint/src/app/goals/goals.component.ts:9:27 - Missing semicolon
ERROR: D:/Node/TutorialsPoint/src/app/goals/goals.component.ts:13:2 - file should end with a newline

Lint errors found in the listed files.

Here ng lint command has checked the code quality of application and prints linting status.

Now correct the errors in goals.component.ts.

goals.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-goals',
   templateUrl: './goals.component.html',
   styleUrls: ['./goals.component.css']
})
export class GoalsComponent implements OnInit {
   title = 'Goal Component';
   constructor() { }
   ngOnInit(): void {
   }
}

Now run the linting command.

Example

\>Node\>TutorialsPoint> ng lint
Linting "TutorialsPoint"...
All files pass linting.

Syntax

ng test <project> [options]
ng t <project> [options]

ng test run the unit test cases on angular app code. Options are optional parameters.

Arguments

Sr.No.	Argument & Syntax	Description
1	<project>	The name of the project to test.

Options

Sr.No.	Option & Syntax	Description
1	--browsers=browsers	Override which browsers tests are run against.
2	--codeCoverage=true|false	Output a code coverage report. Default: false
3	--codeCoverageExclude	Globs to exclude from code coverage.
4	--configuration=configuration	A named build target, as specified in the "configurations" section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the "--prod" flag Aliases: -c
5	--help=true|false|json|JSON	Shows a help message for this command in the console. Default: false
6	--include	Globs of files to include, relative to workspace or project root. There are 2 special cases − when a path to directory is provided, all spec files ending ".spec.@(ts|tsx)" will be included. when a path to a file is provided, and a matching spec file exists it will be included instead.
7	--karmaConfig=karmaConfig	The name of the Karma configuration file.
8	--main=main	The name of the main entry-point file.
9	--poll	Enable and define the file watching poll time period in milliseconds.
10	--polyfills=polyfills	The name of the polyfills file.
11	--preserveSymlinks=true|false	Do not use the real path when resolving modules. Default: false
12	--prod=true|false	Shorthand for "--configuration=production". When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.
13	--progress=true|false	Log progress to the console while building.
13	--progress=true|false	Log progress to the console while building.
14	--reporters	Karma reporters to use. Directly passed to the karma runner.
15	--sourceMap=true|false	Output sourcemaps. Default: true
16	--tsConfig=tsConfig	The name of the TypeScript configuration file.
17	--watch=true|false	Run build when files change.
18	--webWorkerTsConfig=webWorkerTsConfig	TypeScript configuration for Web Worker modules.

First move to an angular project updated using ng build command.

Now run the test command.

Example

\>Node\>TutorialsPoint> ng test
...
WARN: ''app-goals' is not a known element:
1. If 'app-goals' is an Angular component, then verify that it is part of this module.
2. If 'app-goals' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 83.0.4103 (Windows 7.0.0): Executed 0 of 4 SUCCESS (0 secs / 0 secs)
...
AppComponent should render title FAILED
   TypeError: Cannot read property 'textContent' of null
      at <Jasmine>
      at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/app.component.spec.ts:33:51)
            ...
Chrome 83.0.4103 (Windows 7.0.0): Executed 1 of 4 (1 FAILED) (0 secs / 0.203 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 2 of 4 (1 FAILED) (0 secs / 0.221 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.244 sec
Chrome 83.0.4103 (Windows 7.0.0): Executed 4 of 4 (1 FAILED) (0.282 secs / 0.244
 secs)
TOTAL: 1 FAILED, 3 SUCCESS

Now to fix failures update the app.component.spec.ts

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));

   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.componentInstance;
      expect(app).toBeTruthy();
   });
});

Now run the test command.

Example

\>Node\>TutorialsPoint> ng test
...
WARN: ''app-goals' is not a known element:
1. If 'app-goals' is an Angular component, then verify that it is part of this m
odule.
2. If 'app-goals' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@
NgModule.schemas' of this component to suppress this message.'
Chrome 83.0.4103 (Windows 7.0.0): Executed 1 of 2 SUCCESS (0 secs / 0.053 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 2 of 2 SUCCESS (0.097 secs / 0.073 se
cs)
TOTAL: 2 SUCCESS

ng test also opens the browser and displays the test status.

Syntax

ng e2e <project> [options]
ng e <project> [options]

ng e2e builds, serves an application and then runs the end to end test cases using protractor. Options are optional parameters.

Arguments

Sr.No.	Argument & Syntax	Description
1	<project>	The name of the project to test.

Options

Sr.No.	Option & Syntax	Description
1	--baseUrl=baseUrl	Base URL for protractor to connect to.
2	--configuration=configuration	A named build target, as specified in the "configurations" section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the "--prod" flag Aliases: -c
3	--devServerTarget=devServerTarget	Dev server target to run tests against.
4	--grep=grep	Execute specs whose names match the pattern, which is internally compiled to a RegExp.
5	--help=true|false|json|JSON	Shows a help message for this command in the console. Default: false
6	--host=host	Host to listen on.
7	--invertGrep=true|false	Invert the selection specified by the 'grep' option. Default: false
8	--port	The port to use to serve the application.
9	--prod=true|false	Shorthand for "--configuration=production". When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.
10	--protractorConfig=protractorConfig	The name of the Protractor configuration file.
11	--specs	Override specs in the protractor config.
12	--suite=suite	Override suite in the protractor config.
13	--webdriverUpdate=true|false	Try to update webdriver. Default: true

Najpierw przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng build .

Teraz uruchom polecenie e2e.

Przykład

\>Node\>TutorialsPoint> ng e2e
...
chunk {main} main.js, main.js.map (main) 14.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-06T04:20:15.029Z - Hash: 16f321e3d4599af26622 - Time: 20899ms
** Angular Live Development Server is listening on localhost:4200, open your bro
wser on http://localhost:4200/ **
: Compiled successfully.
...
   workspace-project App
    x should display welcome message
      - Failed: No element found using locator: By(css selector, app-root .content span)
   ...
      From: Task: Run it("should display welcome message") in control flow
   ...
**************************************************
*                    Failures                    *
**************************************************

1) workspace-project App should display welcome message
  - Failed: No element found using locator: By(css selector, app-root .content span)

Executed 1 of 1 spec (1 FAILED) in 2 secs.

Teraz, aby naprawić awarie, zaktualizuj plik app.component.html

app.component.html

<div class="content" role="main">
   <span>{{ title }} app is running!</span>
</div>
<app-goals></app-goals>
<router-outlet></router-outlet>

Teraz uruchom polecenie e2e.

Przykład

\>Node\>TutorialsPoint> ng e2e
...
chunk {main} main.js, main.js.map (main) 14.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-06T04:28:33.514Z - Hash: 5d8bf2fc7ff59fa390b0 - Time: 10529ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
...
   workspace-project App
      √ should display welcome message

Executed 1 of 1 spec SUCCESS in 2 secs.

ng e2e otwiera również przeglądarkę i używa jej do uruchamiania przypadków testowych akceptacji za pomocą interfejsu użytkownika.

Składnia

ng add <collection> [options]

ng dodaj pakiet npm do obszaru roboczego. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<kolekcja>	Nazwa pakietu do dodania.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--defaults = true | false	Gdy prawda, wyłącza interaktywne monity o wprowadzenie opcji z wartością domyślną.
2	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false
3	--registry = rejestr	Rejestr NPM do użycia.
4	--verbose = true | false	Wyświetl dodatkowe szczegóły dotyczące operacji wewnętrznych podczas wykonywania. Domyślnie: false

Najpierw przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng build .

Teraz uruchom polecenie add.

Przykład

\>Node\>TutorialsPoint> ng add @angular/pwa
Installing packages for tooling via npm.
Installed packages for tooling via npm.
CREATE ngsw-config.json (620 bytes)
CREATE src/manifest.webmanifest (1352 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (3803 bytes)
UPDATE package.json (1332 bytes)
UPDATE src/app/app.module.ts (682 bytes)
UPDATE src/index.html (482 bytes)
√ Packages installed successfully.

Składnia

ng analytics <settingOrProject> <projectSetting> [options]

Polecenie ng analytics konfiguruje kątowe metryki użycia interfejsu CLI. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<settingOrProject> = on | off | ci | project | prompt	Bezpośrednio włącza lub wyłącza wszystkie analizy użycia dla użytkownika lub monituje użytkownika o interaktywne ustawienie stanu lub ustawia domyślny stan projektu. Poniżej znajdują się szczegóły opcji. on - Umożliwia gromadzenie danych analitycznych i raportowanie dla użytkownika. off - Wyłącza gromadzenie danych analitycznych i raportowanie dla użytkownika. ci - Umożliwia analizę i konfiguruje raportowanie do użytku z ciągłą integracją, która używa wspólnego użytkownika CI. prompt - Monituje użytkownika o interaktywne ustawienie stanu. project- Ustawia domyślny stan projektu na wartość projectSetting, która może być dowolną z pozostałych wartości. Argument projectSetting jest ignorowany dla wszystkich innych wartości parametru settingOrProject.
2	<projectSetting> = on | off | prompt	Ustawia domyślny stan włączenia analiz dla projektu.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false

Najpierw przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng build .

Teraz uruchom polecenie analytics.

Przykład

\>Node\>TutorialsPoint> ng analytics off

Składnia

ng config <jsonPath> <value> [options]

Polecenie ng config pobiera lub ustawia kątowe wartości konfiguracyjne w angular.json. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<jsonPath>	Klucz konfiguracji do ustawienia lub zapytania w formacie ścieżki JSON. Na przykład: „a [3] .foo.bar [2]”. Jeśli nie podano nowej wartości, zwraca bieżącą wartość tego klucza.
2	<wartość>	Jeśli podano, nowa wartość dla danego klucza konfiguracji.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--global = true | false	Gdy prawda, uzyskuje dostęp do konfiguracji globalnej w katalogu domowym osoby dzwoniącej. Domyślnie: false Aliasy: -g
2	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false

Najpierw przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng build .

Teraz uruchom polecenie config.

Przykład

\>Node\>TutorialsPoint> ng config projects.TutorialsPoint.projectType
application

Składnia

ng doc <keyword> [options]
ng d <keyword> [options]

ng doc polecenie otwiera oficjalną dokumentację Angulara w przeglądarce i wyszukuje podane słowo kluczowe. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<słowo kluczowe>	Słowo kluczowe do wyszukania podane na pasku wyszukiwania w angular.io.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false

Najpierw przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng build .

Teraz uruchom polecenie doc.

Przykład

\>Node\>TutorialsPoint> ng doc build

Teraz otworzy się okno przeglądarki i wyszuka odpowiednie słowo kluczowe.

Składnia

ng update [options]

Polecenie ng update aktualizuje aplikację i jej zależności. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<słowo kluczowe>	Słowo kluczowe do wyszukania podane na pasku wyszukiwania w angular.io.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--all = true | false	Czy zaktualizować wszystkie pakiety w package.json. Domyślnie: false
2	--allowDirty = true | false	Czy zezwolić na aktualizację, gdy repozytorium zawiera zmodyfikowane lub nieśledzone pliki.
3	--createCommits = true | false	Utwórz zatwierdzenia kontroli źródła dla aktualizacji i migracji. Domyślnie: false Aliasy: -C
4	--force = true | false	Jeśli fałsz, wyświetli błąd, jeśli zainstalowane pakiety są niezgodne z aktualizacją. Domyślnie: false
5	--from = z	Wersja, z której ma nastąpić migracja. Dostępne tylko w przypadku aktualizacji jednego pakietu i tylko podczas migracji.
6	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false
7	--migrateOnly = true | false	Wykonaj tylko migrację, nie aktualizuj zainstalowanej wersji.
8	--next = true | false	Użyj największej wersji, w tym wersji beta i RC. Domyślnie: false
9	- paczki	Nazwy pakietów do aktualizacji.
10	--to = to	Wersja do której mają być zastosowane migracje. Dostępne tylko w przypadku aktualizacji jednego pakietu i tylko w przypadku migracji. Wymaga od do określenia. Domyślnie wykryta zainstalowana wersja.
11	--verbose = true | false	Wyświetl dodatkowe szczegóły dotyczące operacji wewnętrznych podczas wykonywania. Domyślnie: false

Najpierw przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng build .

Teraz uruchom polecenie aktualizacji. Teraz ng zaktualizuje zależności za pomocą npm.

Przykład

\>Node\>TutorialsPoint> ng update
Using package manager: 'npm'
Collecting installed dependencies...
Found 31 dependencies.
   We analyzed your package.json and everything seems to be in order. Good work!

Składnia

ng xi18n <project> [options]
ng i18n-extract <project> [options]

Komenda ng xi18n wyodrębnia komunikaty i18n z kodu źródłowego. Opcje są parametrami opcjonalnymi.

Argumenty

Sr.No.	Argument i składnia	Opis
1	<project>	Nazwa projektu. Może to być aplikacja lub biblioteka.

Opcje

Sr.No.	Opcja i składnia	Opis
1	--browserTarget = browserTarget	Cel do wyodrębnienia.
2	--configuration = konfiguracja	Nazwany cel kompilacji określony w sekcji „configuration” pliku angular.json. Każdemu nazwanemu celowi towarzyszy konfiguracja domyślnych opcji dla tego celu. Ustawienie tej opcji jawnie zastępuje flagę „--prod”. Aliasy: -c
3	--createCommits = true | false	Utwórz zatwierdzenia kontroli źródła dla aktualizacji i migracji. Domyślnie: false Aliasy: -C
4	--format = xmb | xlf | xlif | xliff | xlf2 | xliff2	Format wyjściowy dla wygenerowanego pliku. Domyślnie: xlf
5	--help = true | false | json | JSON	Wyświetla komunikat pomocy dla tego polecenia w konsoli. Domyślnie: false
6	--outFile = outFile	Nazwa pliku do wyprowadzenia.
7	--outputPath = outputPath	Ścieżka, w której zostanie umieszczony wynik.
8	--prod = true | false	Skrót od „--configuration = production”. Gdy prawda, ustawia konfigurację kompilacji na cel produkcyjny. Domyślnie cel produkcyjny jest ustawiony w konfiguracji obszaru roboczego w taki sposób, że wszystkie kompilacje wykorzystują pakowanie, ograniczone wstrząsanie drzewami, a także ograniczoną eliminację martwego kodu.
9	--progress = true | false	Rejestruj postęp w konsoli. Domyślnie: prawda

Najpierw przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng build . Zaktualizuj app.component.html w następujący sposób:

app.component.spec.ts

<div class="content" role="main">
   <span i18n>app is running!</span>
</div>
<app-goals></app-goals>
<router-outlet></router-outlet>

Teraz uruchom polecenie xi18n.

Przykład

\>Node\>TutorialsPoint> ng xi18n

Dodaj obsługę lokalizacji.

\>Node\>TutorialsPoint> ng add @angular/localize
Installing packages for tooling via npm.
Installed packages for tooling via npm.
UPDATE src/polyfills.ts (3064 bytes)

Teraz ng utworzy plik messages.xlf w folderze głównym, który jest standardowym plikiem tłumaczeniowym w branży.

messages.xlf

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
   <file source-language="en-US" datatype="plaintext" original="ng2.template">
      <body>
         <trans-unit id="6226cbeebaffaec0342459915ef7d9b0e9e92977" datatype="html">
            <source>app is running!</source>
            <context-group purpose="location">
               <context context-type="sourcefile">src/app/app.component.html</context>
               <context context-type="linenumber">2</context>
            </context-group>
         </trans-unit>
      </body>
   </file>
</xliff>

Składnia

ng test <project> --codeCoverage=true

Polecenie ng test umożliwia sprawdzenie pokrycia kodu za pomocą napisanych przypadków testowych. Zobacz poniższy przykład.

Przejdź do projektu kątowego zaktualizowanego za pomocą polecenia ng xi18n . Teraz uruchom test za pomocą polecenia codeCoverage.

Przykład

\>Node\>TutorialsPoint> ng test --codeCoverage=true
10% building 2/2 modules 0 active07 06 2020 15:21:46.292:WARN [karma]: No captur
ed browser, open http://localhost:9876/
07 06 2020 15:21:46.299:INFO [karma-server]: Karma v4.4.1 server started at http
://0.0.0.0:9876/
07 06 2020 15:21:46.300:INFO [launcher]: Launching browsers Chrome with concurre
ncy unlimited
07 06 2020 15:21:46.312:INFO [launcher]: Starting browser Chrome
07 06 2020 15:21:55.456:WARN [karma]: No captured browser, open http://localhost
:9876/
07 06 2020 15:21:55.533:INFO [Chrome 83.0.4103 (Windows 7.0.0)]: Connected on so
cket gJgRaX_rXI6ZqoAiAAAA with id 261512
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 1 of 2 SUCCESS (0 secs / 0.053 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 2 of 2 SUCCESS (0.107 secs / 0.082 se
cs)
TOTAL: 2 SUCCESS

=============================== Coverage summary ===============================

Statements   : 100% ( 8/8 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 3/3 )
Lines        : 100% ( 6/6 )
================================================================================

Teraz polecenie ng test utworzyło folder pokrycia w TutorialsPoint, folderze projektu i przygotowało raport pokrycia w formacie html dostępny jako \> Node \> TutorialsPoint \> pokrycia \> TutorialsPoint \> index.html.