Angular CLI - Hızlı Kılavuz

Angular CLI, herhangi bir Angular projesine başlamayı kolaylaştırır. Angular CLI, projemizi çok hızlı oluşturmamıza ve başlatmamıza yardımcı olan komutlarla birlikte gelir. Şimdi bir proje, bileşen ve hizmetler oluşturmak, bağlantı noktasını değiştirmek vb. İçin mevcut komutların üzerinden geçelim.

Angular CLI ile çalışmak için, sistemimize yüklememiz gerekir. Aynı şey için aşağıdaki komutu kullanalım -

npm install -g @angular/cli

Yeni bir proje oluşturmak için komut satırında aşağıdaki komutu çalıştırabiliriz ve proje oluşturulur.

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

ng hizmet // derlenecek ve projenizin çıktısını tarayıcıda görebilirsiniz -

http://localhost:4200/

4200, yeni bir proje oluşturulduğunda kullanılan varsayılan bağlantı noktasıdır. Bağlantı noktasını aşağıdaki komutla değiştirebilirsiniz -

ng serve --host 0.0.0.0 --port 4201

Aşağıdaki tablo, Angular 4 projeleriyle çalışırken gerekli olan birkaç önemli komutu listelemektedir.

Sr.No	Komutlar ve Açıklama
1	Component ng g bileşeni yeni bileşen
2	Directive ng g yönergesi yeni yönergesi
3	Pipe ng g boru yeni-boru
4	Service ng g hizmet yeni-hizmet
5	Module ng g modülü my-module

Yeni bir modül, bileşen veya bir hizmet oluşturulduğunda, bunun referansı üst modülde güncellenir. app.module.ts.

Angular CLI ile çalışmak için, sistemimize Node'un kurulu olması gerekir.

Node.js arşivini indirin

Node.js yüklenebilir arşiv dosyasının en son sürümünü Node.js İndirmelerinden indirin . Bu öğreticiyi yazarken, farklı işletim sistemlerinde bulunan sürümler aşağıdadır.

işletim sistemi	Arşiv adı
pencereler	düğüm-v6.3.1-x64.msi
Linux	düğüm-v6.3.1-linux-x86.tar.gz
Mac	düğüm-v6.3.1-darwin-x86.tar.gz
SunOS	düğüm-v6.3.1-sunos-x86.tar.gz

UNIX / Linux / Mac OS X ve SunOS üzerine kurulum

İşletim sistemi mimarinize bağlı olarak arşiv düğümünü indirin ve çıkarın-v6.3.1-osname.tar.gz / tmp içine ve sonra çıkartılan dosyaları / usr / local / nodejs dizinine taşıyın. Örneğin:

$ 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

PATH ortam değişkenine / usr / local / nodejs / bin ekleyin.

işletim sistemi	Çıktı
Linux	dışa aktarma PATH = $ PATH: / usr / local / nodejs / bin
Mac	dışa aktarma PATH = $ PATH: / usr / local / nodejs / bin
FreeBSD	dışa aktarma PATH = $ PATH: / usr / local / nodejs / bin

Windows üzerine kurulum

MSI dosyasını kullanın ve Node.js dosyasını yüklemek için istemleri izleyin. Varsayılan olarak, yükleyici C: \ Program Files \ nodejs içindeki Node.js dağıtımını kullanır. Yükleyici, pencerenin PATH ortam değişkeninde C: \ Program Files \ nodejs \ bin dizinini ayarlamalıdır. Değişikliğin etkili olması için tüm açık komut istemlerini yeniden başlatın.

Kurulumu doğrulayın: Bir Dosyanın Yürütülmesi

Adlı bir js dosyası oluşturun main.js makinenizde (Windows veya Linux) aşağıdaki koda sahip.

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

Şimdi sonucu görmek için Node.js yorumlayıcısını kullanarak main.js dosyasını çalıştırın -

$ node main.js

Kurulumunuzda her şey yolundaysa, bu aşağıdaki sonucu vermelidir -

Hello, World!

Şimdi Node yüklendi, Angular CLI'yi kurmak için aşağıdaki komutu çalıştırın.

Aynı şey için aşağıdaki komutu kullanalım -

npm install -g @angular/cli

Kurulumu doğrulayın

Şimdi sonucu görmek için aşağıdaki komutu çalıştırın -

$ ng --version

Kurulumunuzda her şey yolundaysa, bu aşağıdaki sonucu vermelidir -

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


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

Windows'ta, ng'nin dahili veya harici komut olarak tanınmaması durumunda, sistem yolu değişkenini aşağıdaki yolu içerecek şekilde güncelleyin.

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

Sözdizimi

ng version [options]
ng v [options]

ng version komutu, kurulu Angular CLI versiyonunu gösterir. Seçenekler isteğe bağlı parametrelerdir.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış

Misal

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

Sözdizimi

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

Yeni komut verilen bir çalışma alanı yaratır. namevarsayılan bir Açısal Uygulama ile. İsteğe bağlı yapılandırmaları ayarlamak için etkileşimli istemler sağlar. Tüm istemlerin seçilecek varsayılan değerleri vardır. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<ad>	Yeni çalışma alanının ve ilk projenin adı.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--collection = koleksiyon	İlk uygulamayı oluştururken kullanılacak şematikler koleksiyonu. Takma adlar: -c.
2	--commit = true | false	İlk git deposu kaydetme bilgileri. Varsayılan: doğru.
3	--createApplication = true | false	Doğru olduğunda (varsayılan), yeni çalışma alanının src klasöründe yeni bir başlangıç ​​uygulama projesi oluşturur. Yanlış olduğunda, başlangıç ​​uygulaması olmayan boş bir çalışma alanı oluşturur. Daha sonra, tüm uygulamaların projeler klasöründe oluşturulması için uygulama oluştur komutunu kullanabilirsiniz. Varsayılan: doğru.
4	--defaults = true | false	Doğru olduğunda, varsayılan seçenekler için etkileşimli giriş istemlerini devre dışı bırakır.
5	--directory = dizin	Çalışma alanını oluşturmak için dizin adı.
6	--dryRun = true | false	Doğru olduğunda, sonuçları yazmadan faaliyete geçer ve etkinliği raporlar. Varsayılan: yanlış. Takma adlar: -d.
7	--force = true | yanlış	Doğru olduğunda, mevcut dosyaların üzerine yazmaya zorlar. Varsayılan: yanlış. Takma adlar: -f.
8	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış.
9	--inlineStyle = true | yanlış	Doğru olduğunda, bileşen TS dosyasında satır içi stilleri içerir. Varsayılan olarak, harici bir stil dosyası oluşturulur ve bileşen TS dosyasında referans alınır. Varsayılan: yanlış.
10	--inlineStyle = true | yanlış	Doğru olduğunda, bileşen TS dosyasında satır içi stilleri içerir. Varsayılan olarak, harici bir stil dosyası oluşturulur ve bileşen TS dosyasında referans alınır. Varsayılan: yanlış. Takma adlar: -t.
11	--interactive = true | false	Yanlış olduğunda, etkileşimli giriş istemlerini devre dışı bırakır.
12	--minimal = true | yanlış	Doğru olduğunda, herhangi bir test çerçevesi olmadan bir proje oluşturur. (Yalnızca öğrenme amaçlı kullanın.) Varsayılan: yanlış.
13	--newProjectRoot = newProjectRoot	Yeni çalışma alanı köküne göre yeni projelerin oluşturulacağı yol. Varsayılan: projeler.
14	--packageManager = npm | iplik | pnpm | cnpm	Bağımlılıkları yüklemek için kullanılan paket yöneticisi.
15	--prefix = önek	İlk proje için oluşturulan seçicilere uygulanacak önek. Varsayılan: uygulama. Takma adlar: -p.
16	--routing = true | false	Doğru olduğunda, ilk proje için bir yönlendirme modülü oluşturur.
17	--skipGit = true | false	Doğru olduğunda, bir git deposunu başlatmaz. Varsayılan: yanlış. Takma adlar: -g.
18	--skipInstall = true | false	Doğru olduğunda, bağımlılık paketleri yüklemez. Varsayılan: yanlış.
19	--skipTests = true | false	Doğru olduğunda, yeni proje için "spec.ts" test dosyaları oluşturmaz. Varsayılan: yanlış. Takma adlar: -S.
20	--strict = true | yanlış	Daha katı TypeScript derleyici seçeneklerine sahip bir çalışma alanı oluşturur. Varsayılan: yanlış.
21	--style = css | scss | sass | daha az | stil	Stil dosyaları için kullanılacak dosya uzantısı veya ön işlemci.
22	--verbose = true | false	Doğru olduğunda, çıktı günlüğüne daha fazla ayrıntı ekler. Varsayılan: yanlış. Takma adlar: -v.
23	--viewEncapsulation = Öykünülmüş | Yerel | Yok | ShadowDom	İlk projede kullanılacak görünüm kapsülleme stratejisi.

Misal

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

Burada yeni komut, Düğüm dizinimizde açısal bir çalışma alanı ve TutorialsPoint adlı bir proje yarattı.

Sözdizimi

ng help [options]

ng help komutu mevcut komutları kısa açıklamalarıyla listeler. Seçenekler isteğe bağlı parametrelerdir.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış

Misal

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

Tek tek komutlar durumunda, komutla birlikte --help veya -h seçeneğini kullanın. Önce yeni komut kullanılarak oluşturulmuş açısal bir projeye gidin ve ardından komutu çalıştırın.

Misal

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

Sözdizimi

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

ng create komutu, dosyaları şematiğe dayalı olarak üretir ve / veya değiştirir. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<şematik>	Şematik veya koleksiyon: oluşturmak için şematik. Bu seçenek aşağıdaki alt komutlardan birini alabilir - appShell application class component directive enum guard interceptor interface library module pipe service serviceWorker webWorker

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--defaults = true | false	Doğru olduğunda, varsayılan seçenekler için etkileşimli giriş istemlerini devre dışı bırakır.
2	--dryRun = true | false	Doğru olduğunda, sonuçları yazmadan faaliyete geçer ve etkinliği raporlar. Varsayılan: yanlış. Takma adlar: -d.
3	--force = true | yanlış	Doğru olduğunda, mevcut dosyaların üzerine yazmaya zorlar. Varsayılan: yanlış. Takma adlar: -f.
4	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış.
5	--interactive = true | false	Yanlış olduğunda, etkileşimli giriş istemlerini devre dışı bırakır.

Önce yeni komut kullanılarak oluşturulmuş açısal bir projeye gidin ve ardından komutu çalıştırın.

Misal

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

Burada ng generate komutu, TutorialsPoint projemizde yeni bir bileşen oluşturdu ve bu yeni bileşen girişini app.module.ts içine ekledi.

Sözdizimi

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

ng build komutu, belirli bir yolda dist adlı bir çıktı dizininde açısal bir uygulama / kitaplık derler. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<proje>	Oluşturulacak uygulamanın veya kitaplığın adı.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--aot = true | false	Ahead of Time derlemesini kullanarak derleyin. Varsayılan: yanlış.
2	--baseHref = baseHref	Oluşturulmakta olan uygulamanın temel URL'si.
3	--buildEventLog = buildEventLog	DENEYSEL Derleme Olay Protokolü olayları için çıktı dosyası yolu.
4	--buildOptimizer = true | false	'Aot' seçeneğini kullanırken '@ angular-devkit / build-optimizer' optimizasyonlarını etkinleştirir. Varsayılan: yanlış.
5	--commonChunk = true | false	Birden çok pakette kullanılan kodu içeren ayrı bir paket kullanın. Varsayılan: yanlış.
6	--configuration = konfigürasyon	Angular.json'un "konfigürasyonlar" bölümünde belirtildiği gibi adlandırılmış bir yapı hedefi. Her adlandırılmış hedefe, o hedef için varsayılan seçenek konfigürasyonu eşlik eder. Bunun ayarlanması açıkça "--prod" bayrağını geçersiz kılar. Takma adlar: -c.
7	--crossOrigin = yok | anonim | kullanım-kimlik bilgileri	CORS desteği sağlayan öğelerin crossorigin öznitelik ayarını tanımlayın. Varsayılan: yok.
8	--deleteOutputPath = true | false	Oluşturmadan önce çıktı yolunu silin. Varsayılan: doğru.
9	--deployUrl = deployUrl	Dosyaların dağıtılacağı URL.
10	--experimentalRollupPass = true | false	Modülleri Webpack ile paketlemeden önce Rollup ile birleştirin. Varsayılan: yanlış.
11	--extractCss = true | yanlış	Css'i genel stillerden js olanlar yerine css dosyalarına çıkarın. Varsayılan: yanlış.
12	--extractLicenses = true | false	Tüm lisansları ayrı bir dosyaya çıkarın. Varsayılan: yanlış.
13	--forkTypeChecker = true | false	TypeScript tür denetleyicisini çatallı bir işlemde çalıştırın. Varsayılan: doğru.
14	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış.
15	--i18nMissingTranslation = uyarı | hata | yok say	İ18n için eksik çeviriler nasıl işlenir. Varsayılan: uyarı.
16	--index = dizin	Uygulamanın HTML dizininin oluşturulmasını yapılandırır.
17	--localize = true | false
18	--main = main	Geçerli çalışma alanına göre uygulamaya giden ana giriş noktasının tam yolu.
19	--namedChunks = true | false	Geç yüklenen yığınlar için dosya adını kullanın. Varsayılan: doğru.
20	--ngswConfigPath = ngswConfigPath	Ngsw-config.json yolu.
21	--optimization = true | false	Derleme çıktısının optimizasyonunu etkinleştirir.
22	--outputHashing = yok | tümü | medya | paketler	Çıktı dosyası adı önbellek bozan karma modu tanımlayın. Varsayılan: yok.
23	--outputPath = outputPath	Geçerli çalışma alanına göre yeni çıktı dizininin tam yolu. Varsayılan olarak, çıktıyı mevcut projede dist / adlı bir klasöre yazar.
24	--anket	Dosya izleme yoklama süresini milisaniye cinsinden etkinleştirin ve tanımlayın.
25	--polyfills = çoklu dolgular	Mevcut çalışma alanına göre çoklu dolgular dosyasının tam yolu.
26	--preserveSymlinks = true | false	Modülleri çözerken gerçek yolu kullanmayın. Varsayılan: yanlış.
27	--prod = true | yanlış	"--Configuration = production" için kısa açıklama. Doğru olduğunda, derleme yapılandırmasını üretim hedefine ayarlar. Varsayılan olarak, üretim hedefi çalışma alanı konfigürasyonunda ayarlanır, böylece tüm yapılarda gruplama, sınırlı ağaç sallama ve sınırlı ölü kod eliminasyonu kullanılır.
28	--progress = true | false	İnşa ederken ilerlemeyi konsola kaydedin. Varsayılan: doğru.
27	--resourcesOutputPath = resourcesOutputPath	Çıktı Yolu'na göre stil kaynaklarının yerleştirileceği yol.
28	--serviceWorker = true | false	Üretim yapıları için bir hizmet çalışanı yapılandırması oluşturur. Varsayılan: yanlış.
29	--showCircularDependencies = true | false	Derlemelerde döngüsel bağımlılık uyarıları göster. Varsayılan: doğru.
30	--sourceMap = true | false	Çıktı kaynak haritaları. Varsayılan: doğru.
31	--statsJson = true | false	'Webpack-bundle-analyzer' gibi araçlar kullanılarak analiz edilebilen bir 'stats.json' dosyası oluşturur. Varsayılan: yanlış.
32	--subresourceIntegrity = true | false	Alt kaynak bütünlüğü doğrulamasının kullanımını etkinleştirir. Varsayılan: yanlış.
33	--tsConfig = tsConfig	TypeScript yapılandırma dosyasının geçerli çalışma alanına göre tam yolu.
34	--vendorChunk = true | false	Yalnızca satıcı kitaplıklarını içeren ayrı bir paket kullanın. Varsayılan: doğru.
35	--verbose = true | false	Çıkış günlüğüne daha fazla ayrıntı ekler. Varsayılan: doğru.
36	--watch = true | false	Dosyalar değiştiğinde derlemeyi çalıştırın. Varsayılan: yanlış.
37	--webWorkerTsConfig = webWorkerTsConfig	Web Çalışanı modülleri için TypeScript yapılandırması.

Önce ng oluştur komutu kullanılarak güncellenen bir açısal projeye geçin . App.component.html içeriğini aşağıdaki içerikle değiştirin ve ardından komutu çalıştırın.

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

Misal

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

Burada ng build komutu, TutorialsPoint projemizi başarıyla oluşturdu.

Sözdizimi

ng run project:target[:configuration]

ng run komutu, projenizde angular.json'da tanımlanan isteğe bağlı özel bir oluşturucu yapılandırmasıyla bir Architect hedefini çalıştırır. Burada proje, angular.json'da tanımlandığı şekliyle uygulamanın adıdır. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<hedef>	Mimar çalıştırılacak hedef.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--configuration = konfigürasyon	Angular.json'un "konfigürasyonlar" bölümünde tanımlanan adlandırılmış bir oluşturucu konfigürasyonu. Oluşturucu, verilen hedefi çalıştırmak için adlandırılmış yapılandırmayı kullanır. Takma adlar: -c.
2	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış.

Önce ng oluştur komutunu kullanarak güncellenen bir açısal projeye gidin ve ardından komutu çalıştırın.

Misal

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

Burada ng build komutu, TutorialsPoint projemizi başarıyla oluşturdu.

Sözdizimi

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

ng hizmet komutu, uygulamayı oluşturur ve sunar. Değişiklikler meydana gelirse uygulamayı yeniden oluşturur. Burada proje, angular.json'da tanımlandığı şekliyle uygulamanın adıdır. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<proje>	Oluşturulacak projenin adı. Bir uygulama veya kitaplık olabilir.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--allowedHosts	Dev sunucusuna erişmesine izin verilen ana bilgisayarların beyaz listesi.
2	--aot = true | false	Ahead of Time derlemesini kullanarak derleyin.
3	--baseHref = baseHref	Oluşturulmakta olan uygulamanın temel URL'si.
4	--buildEventLog = buildEventLog	DENEYSEL Derleme Olay Protokolü olayları için çıktı dosyası yolu
5	--commonChunk = true | false	Birden çok pakette kullanılan kodu içeren ayrı bir paket kullanın.
6	--configuration = konfigürasyon	Angular.json'un "konfigürasyonlar" bölümünde belirtildiği gibi adlandırılmış bir yapı hedefi. Her adlandırılmış hedefe, o hedef için varsayılan seçenek konfigürasyonu eşlik eder. Bunun ayarlanması açıkça "--prod" bayrağını geçersiz kılar. Takma adlar: -c
7	--deployUrl = deployUrl	Dosyaların dağıtılacağı URL.
8	--disableHostCheck = true | false	Bağlı istemcilerin izin verilen ana bilgisayarların parçası olduğunu doğrulamayın. Varsayılan: yanlış
9	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış
10	--hmr = doğru | yanlış	Sıcak modül değiştirmeyi etkinleştirin. Varsayılan: yanlış
11	--hmrWarning = true | false	--Hmr seçeneği etkinleştirildiğinde bir uyarı göster. Varsayılan: doğru
12	--host = host	Dinlemek için ev sahibi. Varsayılan: localhost
13	--liveReload = true | false	Canlı yeniden yüklemeyi kullanarak sayfanın değiştiğinde yeniden yüklenip yüklenmeyeceği. Varsayılan: doğru
14	- açık = doğru | yanlış	URL'yi varsayılan tarayıcıda açar. Varsayılan: yanlış Takma adlar: -o
15	--optimization = true | false	Derleme çıktısının optimizasyonunu etkinleştirir.
16	--anket	Dosya izleme yoklama süresini milisaniye cinsinden etkinleştirin ve tanımlayın.
17	--Liman	Dinlemek için bağlantı noktası. Varsayılan: 4200
18	--prod = true | yanlış	"--Configuration = production" için kısa açıklama. Doğru olduğunda, derleme yapılandırmasını üretim hedefine ayarlar. Varsayılan olarak, üretim hedefi çalışma alanı konfigürasyonunda ayarlanır, böylece tüm yapılarda gruplama, sınırlı ağaç sallama ve sınırlı ölü kod eliminasyonu kullanılır.
19	--progress = true | false	İnşa ederken ilerlemeyi konsola kaydedin.
20	--proxyConfig = proxyConfig	Proxy yapılandırma dosyası.
21	--publicHost = publicHost	Tarayıcı istemcisinin (veya etkinleştirildiyse canlı yeniden yükleme istemcisinin) geliştirme sunucusuna bağlanmak için kullanması gereken URL. Ters proxy sunucuları gibi karmaşık bir geliştirme sunucusu kurulumu için kullanın.
22	--servePath = servePath	Uygulamanın sunulacağı yol adı.
23	--servePathDefaultWarning = true | false	Deploy-url / base-href desteklenmeyen sunum yolu değerleri kullandığında bir uyarı göster. Varsayılan: doğru
24	--sourceMap = true | false	Çıktı kaynak haritaları.
25	--ssl = true | false	HTTPS kullanarak sunun. Varsayılan: yanlış
26	--sslCert = sslCert	HTTPS sunmak için kullanılacak SSL sertifikası.
27	--sslKey = sslKey	HTTPS sunmak için kullanılacak SSL anahtarı.
28	--vendorChunk = true | false	Yalnızca satıcı kitaplıklarını içeren ayrı bir paket kullanın.
29	--verbose = true | false	Çıkış günlüğüne daha fazla ayrıntı ekler.
30	--watch = true | false	Değişim üzerine yeniden oluşturun. Varsayılan: doğru

Önce ng build komutunu kullanarak güncellenen bir açısal projeye gidin ve ardından komutu çalıştırın.

Misal

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

Burada ng hizmet komutu, TutorialsPoint projemizi başarıyla oluşturdu ve hizmete sundu. Şimdi http: // localhost: 4200'ü bir tarayıcı penceresinde açın ve çıktıyı doğrulayın.

Sözdizimi

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

lint linting aracını açısal uygulama kodu üzerinde çalıştırın. Belirtilen angular projenin kod kalitesini kontrol eder. Varsayılan linting aracı olarak TSLint'i kullanır ve tslint.json dosyasında bulunan varsayılan yapılandırmayı kullanır. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<proje>	Tüy bırakacak projenin adı.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--configuration = konfigürasyon	Kullanılacak linting yapılandırması. Takma adlar: -c
2	- hariç tut	Linting dışında bırakılacak dosyalar.
3	--Dosyalar	Linting'e dahil edilecek dosyalar.
4	--fix = true | yanlış	Linting hatalarını düzeltir (lifli dosyaların üzerine yazabilir). Varsayılan: yanlış
5	--force = true | yanlış	Linting hataları olsa bile başarılı olur. Varsayılan: yanlış
6	--format = format	Çıktı biçimi (nesir, json, şık, ayrıntılı, pmd, msbuild, checkstyle, vso, dosya listesi). Varsayılan: nesir
7	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış
8	--silent = true | yanlış	Çıktı metnini göster. Varsayılan: yanlış
9	--tsConfig = tsConfig	TypeScript yapılandırma dosyasının adı.
10	--tslintConfig = tslintConfig	TSLint yapılandırma dosyasının adı.
11	--typeCheck = true | yanlış	Tüy bırakma için tip kontrolünü kontrol eder. Varsayılan: yanlış

Önce ng build komutunu kullanarak güncellenen bir açısal projeye geçin .

Goal.component.html ve goal.component.ts'i aşağıdaki gibi güncelleyin.

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>

Şimdi linting komutunu çalıştırın.

Misal

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

Önce ng build komutunu kullanarak güncellenen bir açısal projeye geçin .

Şimdi e2e komutunu çalıştırın.

Misal

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

Şimdi hataları düzeltmek için app.component.html'yi güncelleyin

app.component.html

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

Şimdi e2e komutunu çalıştırın.

Misal

\>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 ayrıca tarayıcıyı açar ve UI kullanarak kabul testi durumlarını çalıştırmak için kullanır.

Sözdizimi

ng add <collection> [options]

ng çalışma alanına bir npm paketi ekleyin. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<koleksiyon>	Eklenecek paketin adı.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--defaults = true | false	Doğru olduğunda, varsayılan seçenekler için etkileşimli giriş istemlerini devre dışı bırakır.
2	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış
3	--registry = kayıt	Kullanılacak NPM kayıt defteri.
4	--verbose = true | false	Yürütme sırasında dahili işlemlerle ilgili ek ayrıntıları görüntüleyin. Varsayılan: yanlış

Önce ng build komutunu kullanarak güncellenen bir açısal projeye geçin .

Şimdi add komutunu çalıştırın.

Misal

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

Sözdizimi

ng analytics <settingOrProject> <projectSetting> [options]

ng analytics komutu, açısal CLI kullanım ölçümlerini yapılandırır. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<settingOrProject> = açık | kapalı | ci | proje | komut istemi	Kullanıcı için tüm kullanım analizlerini doğrudan etkinleştirir veya devre dışı bırakır veya kullanıcıdan durumu etkileşimli olarak ayarlamasını ister veya proje için varsayılan durumu ayarlar. Seçeneklerin ayrıntıları aşağıdadır. on - Kullanıcı için analitik toplama ve raporlama sağlar. off - Kullanıcı için analitik toplama ve raporlamayı devre dışı bırakır. ci - Analitiği etkinleştirir ve ortak bir CI kullanıcısı kullanan Sürekli Entegrasyon ile kullanım için raporlamayı yapılandırır. prompt - Kullanıcıdan durumu etkileşimli olarak ayarlamasını ister. project- Proje için varsayılan durumu, diğer değerlerden herhangi biri olabilen projectSetting değerine ayarlar. ProjectSetting bağımsız değişkeni, diğer tüm settingOrProject değerleri için göz ardı edilir.
2	<projectSetting> = açık | kapalı | bilgi istemi	Proje için varsayılan analitik etkinleştirme durumunu ayarlar.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış

Önce ng build komutunu kullanarak güncellenen bir açısal projeye geçin .

Şimdi analitik komutunu çalıştırın.

Misal

\>Node\>TutorialsPoint> ng analytics off

Sözdizimi

ng config <jsonPath> <value> [options]

ng config komutu, angular.json'daki açısal konfigürasyon değerlerini alır veya ayarlar. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<jsonPath>	JSON yolu biçiminde ayarlanacak veya sorgulanacak yapılandırma anahtarı. Örneğin: "a [3] .foo.bar [2]". Yeni değer sağlanmazsa, bu anahtarın mevcut değerini döndürür.
2	<değer>	Sağlanmışsa, verilen yapılandırma anahtarı için yeni bir değer.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--global = true | yanlış	Doğru olduğunda, arayanın ana dizinindeki genel yapılandırmaya erişir. Varsayılan: yanlış Takma adlar: -g
2	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış

Önce ng build komutunu kullanarak güncellenen bir açısal projeye geçin .

Şimdi config komutunu çalıştırın.

Misal

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

Sözdizimi

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

ng doc command bir tarayıcıda resmi Angular belgelerini açar ve belirli bir anahtar kelimeyi arar. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<anahtar kelime>	Angular.io'daki arama çubuğunda sağlandığı şekilde aranacak anahtar kelime.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış

Önce ng build komutunu kullanarak güncellenen bir açısal projeye geçin .

Şimdi doc komutunu çalıştırın.

Misal

\>Node\>TutorialsPoint> ng doc build

Şimdi bir tarayıcı penceresi açılacak ve ilgili anahtar kelimeyi arayacaktır.

Sözdizimi

ng update [options]

ng update komutu, uygulamayı ve bağımlılıklarını günceller. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<anahtar kelime>	Angular.io'daki arama çubuğunda sağlandığı şekilde aranacak anahtar kelime.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--all = true | false	Package.json'daki tüm paketlerin güncellenip güncellenmeyeceği. Varsayılan: yanlış
2	--allowDirty = true | false	Depo değiştirilmiş veya izlenmemiş dosyalar içerdiğinde güncellemeye izin verilip verilmeyeceği.
3	--createCommits = true | false	Güncellemeler ve geçişler için kaynak kontrol kayıtları oluşturun. Varsayılan: yanlış Takma adlar: -C
4	--force = true | yanlış	False ise, kurulu paketler güncellemeyle uyumlu değilse hata verir. Varsayılan: yanlış
5	--from = from	Kendinden taşınacak sürüm. Yalnızca güncellenen tek bir paketle ve yalnızca geçişte kullanılabilir.
6	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış
7	--migrateOnly = true | false	Yalnızca bir taşıma gerçekleştirin, kurulu sürümü güncellemez.
8	--sonraki = doğru | yanlış	Beta ve RC'ler dahil en büyük sürümü kullanın. Varsayılan: yanlış
9	- paketler	Güncellenecek paketlerin adları.
10	--to = to	Geçişlerin uygulanacağı sürüm. Yalnızca güncellenen tek bir paketle ve yalnızca geçişlerde kullanılabilir. Belirtilmesini gerektirir. Saptanan kurulu sürüme varsayılan.
11	--verbose = true | false	Yürütme sırasında dahili işlemlerle ilgili ek ayrıntıları görüntüleyin. Varsayılan: yanlış

Önce ng build komutunu kullanarak güncellenen bir açısal projeye geçin .

Şimdi güncelleme komutunu çalıştırın. Şimdi ng, npm kullanarak bağımlılıkları güncelleyecektir.

Misal

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

Sözdizimi

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

ng xi18n komutu, i18n mesajlarını kaynak kodundan ayıklar. Seçenekler isteğe bağlı parametrelerdir.

Argümanlar

Sr.No.	Bağımsız Değişken ve Sözdizimi	Açıklama
1	<proje>	Projenin adı. Bir uygulama veya kitaplık olabilir.

Seçenekler

Sr.No.	Seçenek ve Sözdizimi	Açıklama
1	--browserTarget = browserTarget	Çıkarılacak hedef.
2	--configuration = konfigürasyon	Angular.json'un "konfigürasyonlar" bölümünde belirtildiği gibi adlandırılmış bir yapı hedefi. Her adlandırılmış hedefe, o hedef için varsayılan seçenek konfigürasyonu eşlik eder. Bunun ayarlanması açıkça "--prod" bayrağını geçersiz kılar. Takma adlar: -c
3	--createCommits = true | false	Güncellemeler ve geçişler için kaynak kontrol kayıtları oluşturun. Varsayılan: yanlış Takma adlar: -C
4	--format = xmb | xlf | xlif | xliff | xlf2 | xliff2	Oluşturulan dosya için çıktı biçimi. Varsayılan: xlf
5	--help = true | false | json | JSON	Konsolda bu komut için bir yardım mesajı gösterir. Varsayılan: yanlış
6	--outFile = outFile	Çıktısı alınacak dosyanın adı.
7	--outputPath = outputPath	Çıktının yerleştirileceği yol.
8	--prod = true | yanlış	"--Configuration = production" için kısa açıklama. Doğru olduğunda, derleme yapılandırmasını üretim hedefine ayarlar. Varsayılan olarak, üretim hedefi çalışma alanı konfigürasyonunda ayarlanır, böylece tüm yapılarda gruplama, sınırlı ağaç sallama ve sınırlı ölü kod eliminasyonu kullanılır.
9	--progress = true | false	Konsola kaydetme ilerlemesi. Varsayılan: doğru

Önce ng build komutunu kullanarak güncellenen bir açısal projeye geçin . App.component.html'yi aşağıdaki gibi güncelleyin:

app.component.spec.ts

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

Şimdi xi18n komutunu çalıştırın.

Misal

\>Node\>TutorialsPoint> ng xi18n

Yerelleştirme desteği ekleyin.

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

Şimdi ng, kök klasörde endüstri standardı çeviri dosyası olan bir messages.xlf dosyası oluşturacaktır.

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>

Sözdizimi

ng test <project> --codeCoverage=true

ng test komutu, yazılan test senaryolarını kullanarak kod kapsamının kontrol edilmesini sağlar. Aşağıdaki örneğe bakın.

Ng xi18n komutunu kullanarak güncellenen açısal bir projeye gidin . Şimdi testi codeCoverage komutuyla çalıştırın.

Misal

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

Şimdi ng test komutu, proje klasörü olan TutorialsPoint içinde bir kapsam klasörü oluşturdu ve kapsam raporunu \> Düğüm \> TutorialsPoint \> kapsama \> TutorialsPoint \> index.html olarak mevcut olan html formatında hazırladı.