CLI Angular - Panduan Cepat

CLI Angular memudahkan untuk memulai dengan proyek Angular apa pun. Angular CLI hadir dengan perintah yang membantu kami membuat dan memulai proyek kami dengan sangat cepat. Sekarang mari kita lihat perintah yang tersedia untuk membuat proyek, komponen dan layanan, mengubah port, dll.

Untuk bekerja dengan Angular CLI, kita harus menginstalnya di sistem kita. Mari kita gunakan perintah berikut untuk hal yang sama -

npm install -g @angular/cli

Untuk membuat proyek baru, kita dapat menjalankan perintah berikut di baris perintah dan proyek akan dibuat.

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

ng serve // ​​akan mengkompilasi dan Anda dapat melihat output dari proyek Anda di browser -

http://localhost:4200/

4200 adalah port default yang digunakan saat proyek baru dibuat. Anda dapat mengubah port dengan perintah berikut -

ng serve --host 0.0.0.0 --port 4201

Tabel berikut mencantumkan beberapa perintah penting yang diperlukan saat bekerja dengan proyek Angular 4.

Sr Tidak	Perintah & Deskripsi
1	Component ng g komponen baru-komponen
2	Directive ng g direktif new-directive
3	Pipe ng g pipa baru-pipa
4	Service ng g layanan layanan baru
5	Module ng g modul modul-saya

Setiap kali modul baru, komponen, atau layanan dibuat, referensi yang sama diperbarui di modul induk app.module.ts.

Untuk bekerja dengan Angular CLI, kita perlu menginstal Node di sistem kita.

Unduh arsip Node.js.

Download versi terbaru dari Node.js diinstal file arsip dari Node.js Downloads . Pada saat menulis tutorial ini, berikut adalah versi yang tersedia di berbagai OS.

OS	Nama arsip
Windows	node-v6.3.1-x64.msi
Linux	node-v6.3.1-linux-x86.tar.gz
Mac	node-v6.3.1-darwin-x86.tar.gz
SunOS	node-v6.3.1-sunos-x86.tar.gz

Instalasi di UNIX / Linux / Mac OS X, dan SunOS

Berdasarkan arsitektur OS Anda, unduh dan ekstrak arsip node-v6.3.1-osname.tar.gz ke / tmp, lalu pindahkan file yang diekstrak ke direktori / usr / local / nodejs. Sebagai contoh:

$ 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

Tambahkan / usr / local / nodejs / bin ke variabel lingkungan PATH.

OS	Keluaran
Linux	ekspor PATH = $ PATH: / usr / local / nodejs / bin
Mac	ekspor PATH = $ PATH: / usr / local / nodejs / bin
FreeBSD	ekspor PATH = $ PATH: / usr / local / nodejs / bin

Instalasi di Windows

Gunakan file MSI dan ikuti petunjuk untuk menginstal Node.js. Secara default, penginstal menggunakan distribusi Node.js di C: \ Program Files \ nodejs. Penginstal harus mengatur direktori C: \ Program Files \ nodejs \ bin di variabel lingkungan PATH jendela. Mulai ulang setiap perintah terbuka yang meminta perubahan diterapkan.

Verifikasi instalasi: Menjalankan File

Buat file js bernama main.js di komputer Anda (Windows atau Linux) yang memiliki kode berikut.

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

Sekarang jalankan file main.js menggunakan interpreter Node.js untuk melihat hasilnya -

$ node main.js

Jika semuanya baik-baik saja dengan instalasi Anda, ini akan menghasilkan hasil sebagai berikut -

Hello, World!

Sekarang Node sudah terinstal, jalankan perintah berikut untuk menginstal Angular CLI.

Mari kita gunakan perintah berikut untuk hal yang sama -

npm install -g @angular/cli

Verifikasi instalasi

Sekarang jalankan perintah berikut untuk melihat hasilnya -

$ ng --version

Jika semuanya baik-baik saja dengan instalasi Anda, ini akan menghasilkan hasil sebagai berikut -

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


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

Di Windows, jika ng tidak dikenali sebagai perintah internal atau eksternal, perbarui variabel jalur sistem untuk menyertakan jalur berikut.

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

Sintaksis

ng version [options]
ng v [options]

Perintah versi ng menunjukkan versi CLI Angular diinstal. Opsi adalah parameter opsional.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--help = benar | salah | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah

Contoh

\>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

Sintaksis

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

ng perintah baru membuat ruang kerja yang diberikan namedengan Aplikasi Angular default. Ini memberikan petunjuk interaktif untuk mengatur konfigurasi opsional. Semua perintah memiliki nilai default untuk dipilih. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<nama>	Nama ruang kerja baru dan proyek awal.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--collection = koleksi	Kumpulan skema yang akan digunakan dalam menghasilkan aplikasi awal. Alias: -c.
2	--commit = true | false	Informasi komit repositori git awal. Default: benar.
3	--createApplication = true | false	Jika true (default), membuat proyek aplikasi awal baru di folder src dari ruang kerja baru. Jika salah, buat ruang kerja kosong tanpa aplikasi awal. Anda kemudian dapat menggunakan perintah buat aplikasi sehingga semua aplikasi dibuat di folder proyek. Default: benar.
4	--defaults = true | false	Jika true, nonaktifkan perintah input interaktif untuk opsi dengan default.
5	--directory = direktori	Nama direktori untuk membuat ruang kerja.
6	--dryRun = true | false	Jika benar, jalankan dan laporkan aktivitas tanpa menuliskan hasil. Default: salah. Alias: -d.
7	--force = true | false	Jika benar, memaksa penimpaan file yang ada. Default: salah. Alias: -f.
8	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah.
9	--inlineStyle = true | false	Jika benar, sertakan gaya sebaris di file TS komponen. Secara default, file gaya eksternal dibuat dan direferensikan di file TS komponen. Default: salah.
10	--inlineStyle = true | false	Jika benar, sertakan gaya sebaris di file TS komponen. Secara default, file gaya eksternal dibuat dan direferensikan di file TS komponen. Default: salah. Alias: -t.
11	--interactive = true | false	Jika salah, nonaktifkan perintah input interaktif.
12	--minimal = true | false	Jika benar, buat proyek tanpa kerangka pengujian apa pun. (Gunakan hanya untuk tujuan pembelajaran.) Default: salah.
13	--newProjectRoot = newProjectRoot	Jalur tempat proyek baru akan dibuat, relatif terhadap root ruang kerja baru. Default: proyek.
14	--packageManager = npm | benang | pnpm | cnpm	Manajer paket yang digunakan untuk menginstal dependensi.
15	--prefix = awalan	Awalan untuk diterapkan ke pemilih yang dihasilkan untuk proyek awal. Default: aplikasi. Alias: -p.
16	--routing = true | false	Jika benar, menghasilkan modul perutean untuk proyek awal.
17	--skipGit = true | false	Jika true, tidak menginisialisasi repositori git. Default: salah. Alias: -g.
18	--skipInstall = true | false	Jika benar, tidak menginstal paket ketergantungan. Default: salah.
19	--skipTests = true | false	Jika benar, tidak menghasilkan file pengujian "spec.ts" untuk proyek baru. Default: salah. Alias: -S.
20	--strict = true | false	Membuat ruang kerja dengan opsi kompiler TypeScript yang lebih ketat. Default: salah.
21	--style = css | scss | sass | kurang | styl	Ekstensi file atau preprocessor yang digunakan untuk file style.
22	--verbose = true | false	Jika benar, menambahkan lebih banyak detail ke logging keluaran. Default: salah. Alias: -v.
23	--viewEncapsulation = Diemulasi | Asli | Tidak Ada | ShadowDom	Strategi enkapsulasi tampilan untuk digunakan dalam proyek awal.

Contoh

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

Di sini, perintah baru telah membuat ruang kerja bersudut dan proyek dengan nama TutorialsPoint di direktori Node kami.

Sintaksis

ng help [options]

ng help command mencantumkan perintah yang tersedia dengan deskripsi singkatnya. Opsi adalah parameter opsional.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--help = benar | salah | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah

Contoh

\>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"

Untuk perintah individu, gunakan opsi --help atau -h dengan perintah. Pertama pindah ke proyek sudut yang dibuat menggunakan perintah baru dan kemudian jalankan perintah.

Contoh

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

Sintaksis

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

ng menghasilkan perintah menghasilkan dan / atau mengubah file berdasarkan skema. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<skematik>	Skema atau koleksi: skema untuk menghasilkan. Opsi ini dapat mengambil salah satu dari sub-perintah berikut - appShell application class component directive enum guard interceptor interface library module pipe service serviceWorker webWorker

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--defaults = true | false	Jika true, nonaktifkan perintah input interaktif untuk opsi dengan default.
2	--dryRun = true | false	Jika benar, jalankan dan laporkan aktivitas tanpa menuliskan hasil. Default: salah. Alias: -d.
3	--force = true | false	Jika benar, memaksa penimpaan file yang ada. Default: salah. Alias: -f.
4	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah.
5	--interactive = true | false	Jika salah, nonaktifkan perintah input interaktif.

Pertama pindah ke proyek sudut yang dibuat menggunakan perintah baru dan kemudian jalankan perintah.

Contoh

\>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)

Di sini, perintah generate telah membuat komponen baru dalam proyek kami TutorialsPoint dan menambahkan entri komponen baru ini di app.module.ts.

Sintaksis

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

ng perintah build mengkompilasi aplikasi / pustaka bersudut ke dalam direktori keluaran bernama dist di jalur yang diberikan. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<proyek>	Nama aplikasi atau perpustakaan yang akan dibangun.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--aot = true | false	Bangun menggunakan kompilasi Ahead of Time. Default: salah.
2	--baseHref = baseHref	Url dasar untuk aplikasi yang sedang dibangun.
3	--buildEventLog = buildEventLog	EKSPERIMEN Jalur file keluaran untuk acara Build Event Protocol.
4	--buildOptimizer = true | false	Mengaktifkan pengoptimalan '@ angular-devkit / build-optimizer' saat menggunakan opsi 'aot'. Default: salah.
5	--commonChunk = true | false	Gunakan paket terpisah yang berisi kode yang digunakan di beberapa paket. Default: salah.
6	--configuration = konfigurasi	Target build bernama, seperti yang ditentukan di bagian "konfigurasi" di angular.json. Setiap target bernama disertai dengan konfigurasi default opsi untuk target itu. Menyetel ini secara eksplisit menimpa tanda "--prod". Alias: -c.
7	--crossOrigin = tidak ada | anonim | gunakan kredensial	Tentukan setelan atribut crossorigin dari elemen yang menyediakan dukungan CORS. Default: tidak ada.
8	--deleteOutputPath = true | false	Hapus jalur keluaran sebelum membangun. Default: benar.
9	--deployUrl = deployUrl	URL tempat file akan disebarkan.
10	--experimentalRollupPass = true | false	Menggabungkan modul dengan Rollup sebelum memaketkannya dengan Webpack. Default: salah.
11	--extractCss = true | false	Ekstrak css dari gaya global ke dalam file css alih-alih file js. Default: salah.
12	--extractLicenses = true | false	Ekstrak semua lisensi dalam file terpisah. Default: salah.
13	--forkTypeChecker = true | false	Jalankan pemeriksa tipe TypeScript dalam proses bercabang. Default: benar.
14	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah.
15	--i18nMissingTranslation = peringatan | kesalahan | abaikan	Bagaimana menangani terjemahan yang hilang untuk i18n. Default: peringatan.
16	--index = indeks	Mengonfigurasi pembuatan indeks HTML aplikasi.
17	--localize = true | false
18	--main = main	Jalur lengkap untuk titik masuk utama ke aplikasi, relatif terhadap ruang kerja saat ini.
19	--namedChunks = true | false	Gunakan nama file untuk potongan yang lambat dimuat. Default: benar.
20	--ngswConfigPath = ngswConfigPath	Jalur ke ngsw-config.json.
21	--optimization = true | false	Mengaktifkan pengoptimalan keluaran build.
22	--outputHashing = tidak ada | semua | media | bundel	Tentukan mode hashing penghilang cache nama file keluaran. Default: tidak ada.
23	--outputPath = outputPath	Jalur lengkap untuk direktori keluaran baru, relatif terhadap ruang kerja saat ini. Secara default, menulis output ke folder bernama dist / dalam proyek saat ini.
24	--pemilihan	Mengaktifkan dan menentukan periode waktu polling menonton file dalam milidetik.
25	--polyfills = polyfills	Jalur lengkap untuk file polyfills, relatif terhadap ruang kerja saat ini.
26	--preserveSymlinks = true | false	Jangan gunakan jalur nyata saat menyelesaikan modul. Default: salah.
27	--prod = true | false	Singkatan dari "--configuration = production". Jika true, setel konfigurasi build ke target produksi. Secara default, target produksi disiapkan dalam konfigurasi ruang kerja sehingga semua build menggunakan bundling, penggoyangan pohon terbatas, dan juga penghapusan kode mati yang terbatas.
28	--progress = true | false	Catat kemajuan ke konsol sambil membangun. Default: benar.
27	--resourcesOutputPath = resourcesOutputPath	Jalur tempat sumber daya gaya akan ditempatkan, relatif terhadap outputPath.
28	--serviceWorker = true | false	Menghasilkan konfigurasi pekerja layanan untuk build produksi. Default: salah.
29	--showCircularDependencies = true | false	Tampilkan peringatan ketergantungan melingkar pada build. Default: benar.
30	--sourceMap = true | false	Output peta sumber. Default: benar.
31	--statsJson = true | false	Menghasilkan file 'stats.json' yang dapat dianalisis menggunakan alat seperti 'webpack-bundle-analyzer'. Default: salah.
32	--subresourceIntegrity = true | false	Mengaktifkan penggunaan validasi integritas sub-sumber. Default: salah.
33	--tsConfig = tsConfig	Jalur lengkap untuk file konfigurasi TypeScript, relatif terhadap ruang kerja saat ini.
34	--vendorChunk = true | false	Gunakan paket terpisah yang hanya berisi pustaka vendor. Default: benar.
35	--verbose = true | false	Menambahkan lebih banyak detail ke logging keluaran. Default: benar.
36	--watch = true | false	Jalankan build saat file berubah. Default: salah.
37	--webWorkerTsConfig = webWorkerTsConfig	Konfigurasi TypeScript untuk modul Web Worker.

Pindah pertama ke proyek sudut diperbarui menggunakan perintah ng generate . Ganti konten app.component.html dengan konten berikut, lalu jalankan perintah.

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

Contoh

\>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

Di sini, perintah build telah berhasil membangun TutorialsPoint proyek kami.

Sintaksis

ng run project:target[:configuration]

ng run perintah menjalankan target Arsitek dengan konfigurasi pembangun kustom opsional yang ditentukan di angular.json dalam proyek Anda. Berikut proyek adalah nama aplikasi seperti yang didefinisikan di angular.json. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<target>	Target arsitek untuk dijalankan.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--configuration = konfigurasi	Konfigurasi pembuat bernama, ditentukan di bagian "konfigurasi" di angular.json. Pembangun menggunakan konfigurasi bernama untuk menjalankan target yang diberikan. Alias: -c.
2	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah.

Pertama pindah ke proyek sudut yang diperbarui menggunakan perintah ng generate dan kemudian jalankan perintah.

Contoh

\>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

Di sini, perintah build telah berhasil membangun TutorialsPoint proyek kami.

Sintaksis

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

ng melayani perintah membangun dan melayani aplikasi. Itu membangun kembali aplikasi jika terjadi perubahan. Berikut proyek adalah nama aplikasi seperti yang didefinisikan di angular.json. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<proyek>	Nama proyek yang akan dibangun. Bisa berupa aplikasi atau perpustakaan.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--allowedHosts	Daftar putih host yang diizinkan untuk mengakses server dev.
2	--aot = true | false	Bangun menggunakan kompilasi Ahead of Time.
3	--baseHref = baseHref	Url dasar untuk aplikasi yang sedang dibangun.
4	--buildEventLog = buildEventLog	EKSPERIMEN Jalur file keluaran untuk acara Build Event Protocol
5	--commonChunk = true | false	Gunakan paket terpisah yang berisi kode yang digunakan di beberapa paket.
6	--configuration = konfigurasi	Target build bernama, seperti yang ditentukan di bagian "konfigurasi" di angular.json. Setiap target bernama disertai dengan konfigurasi default opsi untuk target itu. Menyetel ini secara eksplisit menimpa tanda "--prod". Alias: -c
7	--deployUrl = deployUrl	URL tempat file akan disebarkan.
8	--disableHostCheck = true | false	Jangan verifikasi klien yang terhubung adalah bagian dari host yang diizinkan. Default: salah
9	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah
10	--hmr = true | false	Aktifkan penggantian modul panas. Default: salah
11	--hmrWarning = true | false	Tampilkan peringatan ketika opsi --hmr diaktifkan. Default: benar
12	--host = host	Tuan rumah untuk mendengarkan. Default: localhost
13	--liveReload = true | false	Apakah akan memuat ulang halaman saat diubah, menggunakan live-reload. Default: benar
14	--open = true | false	Membuka url di browser default. Default: salah Alias: -o
15	--optimization = true | false	Mengaktifkan pengoptimalan keluaran build.
16	--pemilihan	Mengaktifkan dan menentukan periode waktu polling menonton file dalam milidetik.
17	--Pelabuhan	Port untuk mendengarkan. Default: 4200
18	--prod = true | false	Singkatan dari "--configuration = production". Jika true, setel konfigurasi build ke target produksi. Secara default, target produksi disiapkan dalam konfigurasi ruang kerja sehingga semua build menggunakan bundling, penggoyangan pohon terbatas, dan juga penghapusan kode mati yang terbatas.
19	--progress = true | false	Catat kemajuan ke konsol sambil membangun.
20	--proxyConfig = proxyConfig	File konfigurasi proxy.
21	--publicHost = publicHost	URL yang harus digunakan klien browser (atau klien live-reload, jika diaktifkan) untuk menyambung ke server pengembangan. Gunakan untuk penyiapan server dev yang kompleks, seperti yang memiliki proxy terbalik.
22	--servePath = servePath	Nama jalur tempat aplikasi akan disajikan.
23	--servePathDefaultWarning = true | false	Tampilkan peringatan ketika penerapan-url / base-href menggunakan nilai jalur penayangan yang tidak didukung. Default: benar
24	--sourceMap = true | false	Output peta sumber.
25	--ssl = true | false	Sajikan menggunakan HTTPS. Default: salah
26	--sslCert = sslCert	Sertifikat SSL yang akan digunakan untuk melayani HTTPS.
27	--sslKey = sslKey	Kunci SSL yang akan digunakan untuk melayani HTTPS.
28	--vendorChunk = true | false	Gunakan paket terpisah yang hanya berisi pustaka vendor.
29	--verbose = true | false	Menambahkan lebih banyak detail ke logging keluaran.
30	--watch = true | false	Bangun kembali saat ada perubahan. Default: benar

Pertama, pindah ke proyek bersudut yang diperbarui menggunakan perintah ng build dan kemudian jalankan perintahnya.

Contoh

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

Di sini perintah serve telah membangun dan melayani proyek kami TutorialsPoint dengan sukses. Sekarang buka http: // localhost: 4200 di jendela browser dan verifikasi hasilnya.

Sintaksis

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

ng lint jalankan alat linting pada kode aplikasi sudut. Ia memeriksa kualitas kode proyek sudut yang ditentukan. Ini menggunakan TSLint sebagai alat linting default dan menggunakan konfigurasi default yang tersedia di file tslint.json. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<proyek>	Nama proyek yang akan diikat.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--configuration = konfigurasi	Konfigurasi linting yang akan digunakan. Alias: -c
2	--mengecualikan	File yang akan dikecualikan dari linting.
3	--files	File untuk disertakan dalam linting.
4	--fix = true | false	Memperbaiki kesalahan linting (dapat menimpa file berserabut). Default: salah
5	--force = true | false	Berhasil meskipun ada kesalahan linting. Default: salah
6	--format = format	Format keluaran (prosa, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist). Default: prosa
7	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah
8	--silent = true | false	Tampilkan teks keluaran. Default: salah
9	--tsConfig = tsConfig	Nama file konfigurasi TypeScript.
10	--tslintConfig = tslintConfig	Nama file konfigurasi TSLint.
11	--typeCheck = true | false	Mengontrol pemeriksaan jenis linting. Default: salah

Pindah pertama ke proyek sudut yang diperbarui menggunakan perintah build ng .

Perbarui goal.component.html dan goal.component.ts sebagai berikut.

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

goal.component.html

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

Sekarang jalankan perintah linting.

Contoh

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

Di sini perintah lint ng telah memeriksa kualitas kode aplikasi dan mencetak status linting.

Sekarang perbaiki kesalahan di goal.component.ts.

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

Sekarang jalankan perintah linting.

Contoh

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

Sintaksis

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

ng tes menjalankan kasus uji unit pada kode aplikasi sudut. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<proyek>	Nama proyek yang akan diuji.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--browsers = browser	Mengganti pengujian browser yang dijalankan.
2	--codeCoverage = true | false	Keluarkan laporan cakupan kode. Default: salah
3	--codeCoverageExclude	Glob untuk dikecualikan dari cakupan kode.
4	--configuration = konfigurasi	Target build bernama, seperti yang ditentukan di bagian "konfigurasi" di angular.json. Setiap target bernama disertai dengan konfigurasi default opsi untuk target itu. Menyetel ini secara eksplisit menimpa tanda "--prod" Alias: -c
5	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah
6	--termasuk	Gumpalan file yang akan disertakan, relatif terhadap ruang kerja atau root proyek. Ada 2 kasus khusus - ketika jalur ke direktori disediakan, semua file spesifikasi yang berakhiran ".spec. @ (ts | tsx)" akan disertakan. ketika jalur ke file disediakan, dan file spesifikasi yang cocok ada, itu akan disertakan.
7	--karmaConfig = karmaConfig	Nama file konfigurasi Karma.
8	--main = main	Nama file titik masuk utama.
9	--pemilihan	Mengaktifkan dan menentukan periode waktu polling menonton file dalam milidetik.
10	--polyfills = polyfills	Nama file polyfills.
11	--preserveSymlinks = true | false	Jangan gunakan jalur nyata saat menyelesaikan modul. Default: salah
12	--prod = true | false	Singkatan dari "--configuration = production". Jika true, setel konfigurasi build ke target produksi. Secara default, target produksi disiapkan dalam konfigurasi ruang kerja sehingga semua build menggunakan bundling, penggoyangan pohon terbatas, dan juga penghapusan kode mati yang terbatas.
13	--progress = true | false	Catat kemajuan ke konsol sambil membangun.
13	--progress = true | false	Catat kemajuan ke konsol sambil membangun.
14	--porter	Reporter Karma untuk digunakan. Langsung diteruskan ke pelari karma.
15	--sourceMap = true | false	Output peta sumber. Default: benar
16	--tsConfig = tsConfig	Nama file konfigurasi TypeScript.
17	--watch = true | false	Jalankan build saat file berubah.
18	--webWorkerTsConfig = webWorkerTsConfig	Konfigurasi TypeScript untuk modul Web Worker.

Pindah pertama ke proyek sudut yang diperbarui menggunakan perintah build ng .

Sekarang jalankan perintah tes.

Contoh

\>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

Sekarang untuk memperbaiki kegagalan, perbarui 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();
   });
});

Sekarang jalankan perintah tes.

Contoh

\>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 juga membuka browser dan menampilkan status test.

Sintaksis

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

ng e2e membangun, menyajikan aplikasi, lalu menjalankan kasus uji ujung ke ujung menggunakan busur derajat. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<proyek>	Nama proyek yang akan diuji.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--baseUrl = baseUrl	URL dasar untuk busur derajat untuk dihubungkan.
2	--configuration = konfigurasi	Target build bernama, seperti yang ditentukan di bagian "konfigurasi" di angular.json. Setiap target bernama disertai dengan konfigurasi default opsi untuk target itu. Menyetel ini secara eksplisit menimpa tanda "--prod" Alias: -c
3	--devServerTarget = devServerTarget	Target server pengembang untuk menjalankan pengujian.
4	--grep = grep	Jalankan spesifikasi yang namanya cocok dengan pola, yang secara internal dikompilasi ke RegExp.
5	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah
6	--host = host	Tuan rumah untuk mendengarkan.
7	--invertGrep = true | false	Balikkan pilihan yang ditentukan oleh opsi 'grep'. Default: salah
8	--Pelabuhan	Porta yang akan digunakan untuk melayani aplikasi.
9	--prod = true | false	Singkatan dari "--configuration = production". Jika true, setel konfigurasi build ke target produksi. Secara default, target produksi disiapkan dalam konfigurasi ruang kerja sehingga semua build menggunakan bundling, penggoyangan pohon terbatas, dan juga penghapusan kode mati yang terbatas.
10	--protractorConfig = protractorConfig	Nama file konfigurasi busur derajat.
11	--spesifikasi	Mengesampingkan spesifikasi dalam konfigurasi busur derajat.
12	--suite = suite	Ganti rangkaian dalam konfigurasi busur derajat.
13	--webdriverUpdate = true | false	Coba perbarui webdriver. Default: benar

Pindah pertama ke proyek sudut yang diperbarui menggunakan perintah build ng .

Sekarang jalankan perintah e2e.

Contoh

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

Sekarang untuk memperbaiki kegagalan, perbarui 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>

Sekarang jalankan perintah e2e.

Contoh

\>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 juga membuka browser dan menggunakannya untuk menjalankan kasus uji penerimaan menggunakan UI.

Sintaksis

ng add <collection> [options]

ng menambahkan paket npm ke ruang kerja. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<collection>	Nama paket yang akan ditambahkan.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--defaults = true | false	Jika true, nonaktifkan perintah input interaktif untuk opsi dengan default.
2	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah
3	--registry = registry	Registri NPM yang akan digunakan.
4	--verbose = true | false	Tampilkan detail tambahan tentang operasi internal selama eksekusi. Default: salah

Pindah pertama ke proyek sudut yang diperbarui menggunakan perintah build ng .

Sekarang jalankan perintah add.

Contoh

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

Sintaksis

ng analytics <settingOrProject> <projectSetting> [options]

Perintah analytics mengonfigurasi metrik penggunaan CLI sudut. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<settingOrProject> = on | off | ci | project | prompt	Secara langsung mengaktifkan atau menonaktifkan semua analitik penggunaan untuk pengguna, atau meminta pengguna untuk menyetel status secara interaktif, atau menyetel status default untuk proyek tersebut. Berikut adalah rincian opsi. on - Memungkinkan pengumpulan dan pelaporan analitik untuk pengguna. off - Menonaktifkan pengumpulan dan pelaporan analitik untuk pengguna. ci - Mengaktifkan analitik dan mengonfigurasi pelaporan untuk digunakan dengan Integrasi Berkelanjutan, yang menggunakan pengguna CI umum. prompt - Meminta pengguna untuk mengatur status secara interaktif. project- Menyetel status default proyek ke nilai projectSetting, yang bisa berupa nilai lainnya. Argumen projectSetting diabaikan untuk semua nilai lain dari settingOrProject.
2	<projectSetting> = on | off | prompt	Menetapkan status pengaktifan analitik default untuk proyek tersebut.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah

Pindah pertama ke proyek sudut yang diperbarui menggunakan perintah build ng .

Sekarang jalankan perintah analytics.

Contoh

\>Node\>TutorialsPoint> ng analytics off

Sintaksis

ng config <jsonPath> <value> [options]

ng config perintah mengambil atau menetapkan nilai konfigurasi sudut di angular.json. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<jsonPath>	Kunci konfigurasi yang akan disetel atau kueri, dalam format jalur JSON. Misalnya: "a [3] .foo.bar [2]". Jika tidak ada nilai baru yang diberikan, mengembalikan nilai kunci ini saat ini.
2	<value>	Jika disediakan, nilai baru untuk kunci konfigurasi yang diberikan.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--global = true | false	Jika true, mengakses konfigurasi global di direktori home pemanggil. Default: salah Alias: -g
2	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah

Pindah pertama ke proyek sudut yang diperbarui menggunakan perintah build ng .

Sekarang jalankan perintah config.

Contoh

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

Sintaksis

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

ng perintah doc membuka dokumentasi Angular resmi di browser, dan mencari kata kunci tertentu. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<keyword>	Kata kunci yang akan dicari, seperti yang tersedia di bilah pencarian di angular.io.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah

Pindah pertama ke proyek sudut yang diperbarui menggunakan perintah build ng .

Sekarang jalankan perintah doc.

Contoh

\>Node\>TutorialsPoint> ng doc build

Sekarang jendela browser akan terbuka dan mencari kata kunci yang relevan.

Sintaksis

ng update [options]

ng perintah update memperbarui aplikasi dan dependensinya. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<keyword>	Kata kunci yang akan dicari, seperti yang tersedia di bilah pencarian di angular.io.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--all = true | false	Apakah akan memperbarui semua paket di package.json. Default: salah
2	--allowDirty = true | false	Apakah akan mengizinkan pembaruan ketika repositori berisi file yang dimodifikasi atau tidak terlacak.
3	--createCommits = true | false	Buat komitmen kontrol sumber untuk pembaruan dan migrasi. Default: salah Alias: -C
4	--force = true | false	Jika salah, akan error jika paket yang diinstal tidak kompatibel dengan pembaruan. Default: salah
5	--dari = dari	Versi asal migrasi. Hanya tersedia dengan satu paket yang diperbarui, dan hanya untuk migrasi saja.
6	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah
7	--migrateOnly = true | false	Hanya melakukan migrasi, tidak memperbarui versi yang diinstal.
8	--next = true | false	Gunakan versi terbesar, termasuk beta dan RC. Default: salah
9	--paket	Nama paket yang akan diperbarui.
10	--to = to	Versi yang akan diterapkan migrasi. Hanya tersedia dengan satu paket yang diperbarui, dan hanya untuk migrasi saja. Perlu dari untuk ditentukan. Default ke versi terinstal terdeteksi.
11	--verbose = true | false	Tampilkan detail tambahan tentang operasi internal selama eksekusi. Default: salah

Pindah pertama ke proyek sudut yang diperbarui menggunakan perintah build ng .

Sekarang jalankan perintah update. Sekarang ng akan memperbarui dependensi menggunakan npm.

Contoh

\>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!

Sintaksis

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

ng perintah xi18n mengekstrak pesan i18n dari kode sumber. Opsi adalah parameter opsional.

Argumen

Sr.No.	Argumen & Sintaks	Deskripsi
1	<proyek>	Nama proyek. Ini bisa berupa aplikasi atau perpustakaan.

Pilihan

Sr.No.	Opsi & Sintaks	Deskripsi
1	--browserTarget = browserTarget	Target untuk mengekstrak.
2	--configuration = konfigurasi	Target build bernama, seperti yang ditentukan di bagian "konfigurasi" di angular.json. Setiap target bernama disertai dengan konfigurasi default opsi untuk target itu. Menyetel ini secara eksplisit menimpa tanda "--prod". Alias: -c
3	--createCommits = true | false	Buat komitmen kontrol sumber untuk pembaruan dan migrasi. Default: salah Alias: -C
4	--format = xmb | xlf | xlif | xliff | xlf2 | xliff2	Format keluaran untuk file yang dihasilkan. Default: xlf
5	--help = true | false | json | JSON	Menampilkan pesan bantuan untuk perintah ini di konsol. Default: salah
6	--outFile = outFile	Nama file yang akan dikeluarkan.
7	--outputPath = outputPath	Jalur dimana keluaran akan ditempatkan.
8	--prod = true | false	Singkatan dari "--configuration = production". Jika true, setel konfigurasi build ke target produksi. Secara default, target produksi disiapkan dalam konfigurasi ruang kerja sehingga semua build menggunakan bundling, penggoyangan pohon terbatas, dan juga penghapusan kode mati yang terbatas.
9	--progress = true | false	Catat kemajuan ke konsol. Default: benar

Pindah pertama ke proyek sudut yang diperbarui menggunakan perintah build ng . Perbarui app.component.html sebagai berikut:

app.component.spec.ts

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

Sekarang jalankan perintah xi18n.

Contoh

\>Node\>TutorialsPoint> ng xi18n

Tambahkan dukungan pelokalan.

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

Sekarang ng akan membuat file messages.xlf di folder root yang merupakan file terjemahan standar industri.

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>

Sintaksis

ng test <project> --codeCoverage=true

ng perintah uji memungkinkan untuk memeriksa cakupan kode menggunakan kasus uji tertulis. Lihat contoh di bawah ini.

Pindah ke proyek sudut yang diperbarui menggunakan perintah ng xi18n . Sekarang jalankan pengujian dengan perintah codeCoverage.

Contoh

\>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 )
================================================================================

Sekarang perintah uji telah membuat folder cakupan dalam TutorialsPoint, folder proyek dan telah menyiapkan laporan cakupan dalam format html yang tersedia sebagai \> Node \> TutorialsPoint \> cakupan \> TutorialsPoint \> index.html.