Angular CLI - Guia rápido

O Angular CLI facilita o início de qualquer projeto Angular. O Angular CLI vem com comandos que nos ajudam a criar e iniciar nosso projeto muito rápido. Vamos agora percorrer os comandos disponíveis para criar um projeto, um componente e serviços, alterar a porta, etc.

Para trabalhar com o Angular CLI, precisamos instalá-lo em nosso sistema. Vamos usar o seguinte comando para o mesmo -

npm install -g @angular/cli

Para criar um novo projeto, podemos executar o seguinte comando na linha de comando e o projeto será criado.

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

ng serve // ​​irá compilar e você pode ver a saída do seu projeto no navegador -

http://localhost:4200/

4200 é a porta padrão usada quando um novo projeto é criado. Você pode alterar a porta com o seguinte comando -

ng serve --host 0.0.0.0 --port 4201

A tabela a seguir lista alguns comandos importantes necessários ao trabalhar com projetos Angular 4.

Sr. Não	Comandos e descrição
1	Component ng g componente new-component
2	Directive ng g diretiva nova diretiva
3	Pipe ng g pipe new-pipe
4	Service ng g service new-service
5	Module ng g módulo meu-módulo

Sempre que um novo módulo, componente ou serviço é criado, a referência do mesmo é atualizada no módulo pai app.module.ts.

Para trabalhar com Angular CLI, precisamos ter o Node instalado em nosso sistema.

Baixe o arquivo Node.js

Baixar versão mais recente do arquivo instalável Node.js de Node.js downloads . No momento em que este tutorial foi escrito, a seguir estão as versões disponíveis em diferentes sistemas operacionais.

SO	Nome do arquivo
janelas	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

Instalação em UNIX / Linux / Mac OS X e SunOS

Com base na arquitetura do seu sistema operacional, baixe e extraia o arquivo node-v6.3.1-osname.tar.gz para / tmp e, finalmente, mova os arquivos extraídos para o diretório / usr / local / nodejs. Por exemplo:

$ 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

Adicione / usr / local / nodejs / bin à variável de ambiente PATH.

SO	Resultado
Linux	exportar PATH = $ PATH: / usr / local / nodejs / bin
Mac	exportar PATH = $ PATH: / usr / local / nodejs / bin
FreeBSD	exportar PATH = $ PATH: / usr / local / nodejs / bin

Instalação em Windows

Use o arquivo MSI e siga as instruções para instalar o Node.js. Por padrão, o instalador usa a distribuição Node.js em C: \ Arquivos de programas \ nodejs. O instalador deve definir o diretório C: \ Arquivos de programas \ nodejs \ bin na variável de ambiente PATH da janela. Reinicie todos os prompts de comando abertos para que a alteração tenha efeito.

Verifique a instalação: Executando um Arquivo

Crie um arquivo js chamado main.js em sua máquina (Windows ou Linux) com o seguinte código.

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

Agora execute o arquivo main.js usando o interpretador Node.js para ver o resultado -

$ node main.js

Se tudo estiver bem com a sua instalação, isso deve produzir o seguinte resultado -

Hello, World!

Agora que o Node está instalado, execute o seguinte comando para instalar o Angular CLI.

Vamos usar o seguinte comando para o mesmo -

npm install -g @angular/cli

Verifique a instalação

Agora execute o seguinte comando para ver o resultado -

$ ng --version

Se tudo estiver bem com a sua instalação, isso deve produzir o seguinte resultado -

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


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

No Windows, no caso de ng não ser reconhecido como comando interno ou externo, atualize a variável do caminho do sistema para incluir o seguinte caminho.

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

Sintaxe

ng version [options]
ng v [options]

O comando ng version mostra a versão do Angular CLI instalada. As opções são parâmetros opcionais.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso

Exemplo

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

Sintaxe

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

ng novo comando cria um espaço de trabalho de determinado namecom um aplicativo angular padrão. Ele fornece prompts interativos para definir configurações opcionais. Todos os prompts têm valores padrão para escolher. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<name>	O nome da nova área de trabalho e projeto inicial.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--collection = coleção	Uma coleção de esquemas para usar na geração do aplicativo inicial. Aliases: -c.
2	--commit = true | false	Informações iniciais de commit do repositório git. Padrão: verdadeiro.
3	--createApplication = true | false	Quando verdadeiro (o padrão), cria um novo projeto de aplicativo inicial na pasta src do novo espaço de trabalho. Quando falso, cria um espaço de trabalho vazio sem aplicativo inicial. Você pode então usar o comando generate application para que todos os aplicativos sejam criados na pasta de projetos. Padrão: verdadeiro.
4	--defaults = true | false	Quando verdadeiro, desativa os prompts de entrada interativos para opções com um padrão.
5	--directory = diretório	O nome do diretório no qual criar o espaço de trabalho.
6	--dryRun = true | false	Quando verdadeiro, executa e relata a atividade sem gravar os resultados. Padrão: falso. Aliases: -d.
7	--force = true | false	Quando verdadeiro, força a substituição dos arquivos existentes. Padrão: falso. Aliases: -f.
8	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso.
9	--inlineStyle = true | false	Quando verdadeiro, inclui estilos embutidos no arquivo TS do componente. Por padrão, um arquivo de estilos externo é criado e referenciado no arquivo TS do componente. Padrão: falso.
10	--inlineStyle = true | false	Quando verdadeiro, inclui estilos embutidos no arquivo TS do componente. Por padrão, um arquivo de estilos externo é criado e referenciado no arquivo TS do componente. Padrão: falso. Aliases: -t.
11	--interactive = true | false	Quando falso, desativa os prompts de entrada interativos.
12	--minimal = true | false	Quando verdadeiro, cria um projeto sem nenhuma estrutura de teste. (Use apenas para fins de aprendizagem.) Padrão: falso.
13	--newProjectRoot = newProjectRoot	O caminho onde novos projetos serão criados, em relação à nova raiz do espaço de trabalho. Padrão: projetos.
14	--packageManager = npm | yarn | pnpm | cnpm	O gerenciador de pacotes usado para instalar dependências.
15	--prefix = prefix	O prefixo a ser aplicado aos seletores gerados para o projeto inicial. Padrão: app. Aliases: -p.
16	--routing = true | false	Quando verdadeiro, gera um módulo de roteamento para o projeto inicial.
17	--skipGit = true | false	Quando verdadeiro, não inicializa um repositório git. Padrão: falso. Aliases: -g.
18	--skipInstall = true | false	Quando verdadeiro, não instala pacotes de dependência. Padrão: falso.
19	--skipTests = true | false	Quando verdadeiro, não gera arquivos de teste "spec.ts" para o novo projeto. Padrão: falso. Aliases: -S.
20	--strict = true | false	Cria um espaço de trabalho com opções de compilador TypeScript mais restritas. Padrão: falso.
21	--style = css | scss | sass | menos | estilo	A extensão de arquivo ou pré-processador a ser usado para arquivos de estilo.
22	--verbose = true | false	Quando verdadeiro, adiciona mais detalhes ao registro de saída. Padrão: falso. Aliases: -v.
23	--viewEncapsulation = Emulado | Nativo | Nenhum | ShadowDom	A estratégia de encapsulamento de visão a ser usada no projeto inicial.

Exemplo

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

Aqui, o novo comando criou um espaço de trabalho angular e um projeto com o nome TutorialsPoint em nosso diretório Node.

Sintaxe

ng help [options]

O comando ng help lista os comandos disponíveis com suas descrições resumidas. As opções são parâmetros opcionais.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso

Exemplo

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

No caso de comandos individuais, use a opção --help ou -h com o comando. Primeiro vá para um projeto angular criado usando o novo comando ng e, em seguida, execute o comando.

Exemplo

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

Sintaxe

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

O comando ng generate gera e / ou modifica arquivos com base em um esquema. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<esquemático>	O esquemático ou coleção: esquemático para gerar. Esta opção pode aceitar um dos seguintes subcomandos - appShell application class component directive enum guard interceptor interface library module pipe service serviceWorker webWorker

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--defaults = true | false	Quando verdadeiro, desativa os prompts de entrada interativos para opções com um padrão.
2	--dryRun = true | false	Quando verdadeiro, executa e relata a atividade sem gravar os resultados. Padrão: falso. Aliases: -d.
3	--force = true | false	Quando verdadeiro, força a substituição dos arquivos existentes. Padrão: falso. Aliases: -f.
4	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso.
5	--interactive = true | false	Quando falso, desativa os prompts de entrada interativos.

Primeiro vá para um projeto angular criado usando o novo comando ng e, em seguida, execute o comando.

Exemplo

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

Aqui, o comando ng generate criou um novo componente em nosso projeto TutorialsPoint e adicionou esta nova entrada de componente em app.module.ts.

Sintaxe

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

O comando ng build compila um aplicativo / biblioteca angular em um diretório de saída denominado dist em determinado caminho. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<projeto>	O nome do aplicativo ou biblioteca a ser construída.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--aot = true | false	Construa usando a compilação Ahead of Time. Padrão: falso.
2	--baseHref = baseHref	URL base para o aplicativo em construção.
3	--buildEventLog = buildEventLog	EXPERIMENTAL Caminho do arquivo de saída para eventos Build Event Protocol.
4	--buildOptimizer = true | false	Ativa as otimizações '@ angular-devkit / build-optimizer' ao usar a opção 'aot'. Padrão: falso.
5	--commonChunk = true | false	Use um pacote separado contendo o código usado em vários pacotes. Padrão: falso.
6	--configuration = configuração	Um destino de compilação nomeado, conforme especificado na seção "configurações" do angular.json. Cada destino nomeado é acompanhado por uma configuração de padrões de opção para aquele destino. Definir isso substitui explicitamente o sinalizador "--prod". Aliases: -c.
7	--crossOrigin = none | anonymous | use-credentials	Defina a configuração do atributo crossorigin de elementos que fornecem suporte CORS. Padrão: nenhum.
8	--deleteOutputPath = true | false	Exclua o caminho de saída antes de construir. Padrão: verdadeiro.
9	--deployUrl = deployUrl	URL onde os arquivos serão implantados.
10	--experimentalRollupPass = true | false	Concatene os módulos com Rollup antes de empacotá-los com o Webpack. Padrão: falso.
11	--extractCss = true | false	Extraia css de estilos globais em arquivos css em vez de js. Padrão: falso.
12	--extractLicenses = true | false	Extraia todas as licenças em um arquivo separado. Padrão: falso.
13	--forkTypeChecker = true | false	Execute o verificador de tipo TypeScript em um processo bifurcado. Padrão: verdadeiro.
14	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso.
15	--i18nMissingTranslation = aviso | erro | ignorar	Como lidar com traduções ausentes para i18n. Padrão: aviso.
16	--index = índice	Configura a geração do índice HTML do aplicativo.
17	--localize = true | false
18	--main = main	O caminho completo para o ponto de entrada principal do aplicativo, em relação ao espaço de trabalho atual.
19	--namedChunks = true | false	Use o nome do arquivo para blocos carregados lentamente. Padrão: verdadeiro.
20	--ngswConfigPath = ngswConfigPath	Caminho para ngsw-config.json.
21	--optimization = true | false	Ativa a otimização da saída de construção.
22	--outputHashing = none | all | media | bundles	Defina o modo de hash de impedimento de cache do nome de arquivo de saída. Padrão: nenhum.
23	--outputPath = outputPath	O caminho completo para o novo diretório de saída, relativo ao espaço de trabalho atual. Por padrão, grava a saída em uma pasta chamada dist / no projeto atual.
24	--votação	Habilite e defina o período de tempo de pesquisa de monitoramento de arquivo em milissegundos.
25	--polyfills = polyfills	O caminho completo para o arquivo polyfills, relativo ao espaço de trabalho atual.
26	--preserveSymlinks = true | false	Não use o caminho real ao resolver módulos. Padrão: falso.
27	--prod = true | false	Abreviação de "--configuration = production". Quando verdadeiro, define a configuração de construção para o destino de produção. Por padrão, o destino de produção é definido na configuração do espaço de trabalho de forma que todas as compilações façam uso de agrupamento, agitação limitada de árvore e também eliminação limitada de código morto.
28	--progress = true | false	Registre o progresso no console durante a construção. Padrão: verdadeiro.
27	--resourcesOutputPath = resourcesOutputPath	O caminho onde os recursos de estilo serão colocados, em relação a outputPath.
28	--serviceWorker = true | false	Gera uma configuração de service worker para compilações de produção. Padrão: falso.
29	--showCircularDependencies = true | false	Mostra avisos de dependência circular em compilações. Padrão: verdadeiro.
30	--sourceMap = true | false	Mapas de origem de saída. Padrão: verdadeiro.
31	--statsJson = true | false	Gera um arquivo 'stats.json' que pode ser analisado usando ferramentas como 'webpack-bundle-analyser'. Padrão: falso.
32	--subresourceIntegrity = true | false	Ativa o uso de validação de integridade de sub-recursos. Padrão: falso.
33	--tsConfig = tsConfig	O caminho completo para o arquivo de configuração TypeScript, relativo ao espaço de trabalho atual.
34	--vendorChunk = true | false	Use um pacote separado contendo apenas bibliotecas de fornecedores. Padrão: verdadeiro.
35	--verbose = true | false	Adiciona mais detalhes ao registro de saída. Padrão: verdadeiro.
36	--watch = true | false	Execute o build quando os arquivos forem alterados. Padrão: falso.
37	--webWorkerTsConfig = webWorkerTsConfig	Configuração de TypeScript para módulos Web Worker.

Primeiro mova para um projeto angular atualizado usando o comando ng generate . Substitua o conteúdo de app.component.html pelo conteúdo a seguir e execute o comando.

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

Exemplo

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

Aqui, o comando build construiu nosso projeto TutorialsPoint com sucesso.

Sintaxe

ng run project:target[:configuration]

O comando ng run executa um alvo Architect com uma configuração de construtor customizada opcional definida em angular.json em seu projeto. Aqui, projeto é o nome do aplicativo conforme definido em angular.json. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<target>	Alvo do arquiteto a ser executado.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--configuration = configuração	Uma configuração de construtor nomeada, definida na seção "configurações" do angular.json. O construtor usa a configuração nomeada para executar o destino fornecido. Aliases: -c.
2	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso.

Mova primeiro para um projeto angular atualizado usando o comando ng generate e, em seguida, execute o comando.

Exemplo

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

Aqui, o comando build construiu nosso projeto TutorialsPoint com sucesso.

Sintaxe

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

ng serve o comando constrói e serve a aplicação. Ele reconstrói o aplicativo se ocorrerem alterações. Aqui, projeto é o nome do aplicativo conforme definido em angular.json. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<projeto>	O nome do projeto a ser construído. Pode ser um aplicativo ou uma biblioteca.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--allowedHosts	Lista de permissões de hosts que têm permissão para acessar o servidor de desenvolvimento.
2	--aot = true | false	Construa usando a compilação Ahead of Time.
3	--baseHref = baseHref	URL base para o aplicativo em construção.
4	--buildEventLog = buildEventLog	EXPERIMENTAL Caminho do arquivo de saída para eventos Build Event Protocol
5	--commonChunk = true | false	Use um pacote separado contendo o código usado em vários pacotes.
6	--configuration = configuração	Um destino de compilação nomeado, conforme especificado na seção "configurações" do angular.json. Cada destino nomeado é acompanhado por uma configuração de padrões de opção para aquele destino. Definir isso substitui explicitamente o sinalizador "--prod". Aliases: -c
7	--deployUrl = deployUrl	URL onde os arquivos serão implantados.
8	--disableHostCheck = true | false	Não verifique se os clientes conectados fazem parte dos hosts permitidos. Padrão: falso
9	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso
10	--hmr = true | false	Habilite a substituição de módulo a quente. Padrão: falso
11	--hmrWarning = true | false	Mostra um aviso quando a opção --hmr está habilitada. Padrão: verdadeiro
12	--host = host	Host para ouvir. Padrão: localhost
13	--liveReload = true | false	Se a página deve ser recarregada na mudança, usando recarregar ao vivo. Padrão: verdadeiro
14	--open = true | false	Abre o url no navegador padrão. Padrão: falso Aliases: -o
15	--optimization = true | false	Ativa a otimização da saída de construção.
16	--votação	Habilite e defina o período de tempo de pesquisa de monitoramento de arquivo em milissegundos.
17	--porta	Porta para ouvir. Padrão: 4200
18	--prod = true | false	Abreviação de "--configuration = production". Quando verdadeiro, define a configuração de construção para o destino de produção. Por padrão, o destino de produção é definido na configuração do espaço de trabalho de forma que todas as compilações façam uso de agrupamento, agitação limitada de árvore e também eliminação limitada de código morto.
19	--progress = true | false	Registre o progresso no console durante a construção.
20	--proxyConfig = proxyConfig	Arquivo de configuração de proxy.
21	--publicHost = publicHost	A URL que o cliente do navegador (ou cliente live-reload, se habilitado) deve usar para se conectar ao servidor de desenvolvimento. Use para uma configuração de servidor de desenvolvimento complexa, como um com proxies reversos.
22	--servePath = servePath	O nome do caminho onde o aplicativo será servido.
23	--servePathDefaultWarning = true | false	Mostra um aviso quando deploy-url / base-href usa valores de caminho de serviço não suportados. Padrão: verdadeiro
24	--sourceMap = true | false	Mapas de origem de saída.
25	--ssl = true | false	Veicule usando HTTPS. Padrão: falso
26	--sslCert = sslCert	Certificado SSL a ser usado para servir HTTPS.
27	--sslKey = sslKey	Chave SSL a ser usada para servir HTTPS.
28	--vendorChunk = true | false	Use um pacote separado contendo apenas bibliotecas de fornecedores.
29	--verbose = true | false	Adiciona mais detalhes ao registro de saída.
30	--watch = true | false	Reconstrua na mudança. Padrão: verdadeiro

Primeiro vá para um projeto angular atualizado usando o comando ng build e, em seguida, execute o comando.

Exemplo

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

Aqui, o comando ng serve construiu e serve nosso projeto TutorialsPoint com sucesso. Agora abra http: // localhost: 4200 em uma janela do navegador e verifique a saída.

Sintaxe

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

ng lint executa a ferramenta linting no código do aplicativo angular. Ele verifica a qualidade do código do projeto angular especificado. Ele usa TSLint como ferramenta de linting padrão e usa a configuração padrão disponível no arquivo tslint.json. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<projeto>	O nome do projeto a ser lint.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--configuration = configuração	A configuração de linting a ser usada. Aliases: -c
2	--excluir	Arquivos para excluir do linting.
3	--arquivos	Arquivos a serem incluídos no linting.
4	--fix = true | false	Corrige erros de linting (pode sobrescrever arquivos linted). Padrão: falso
5	--force = true | false	É bem-sucedido mesmo se houver erros de linting. Padrão: falso
6	--format = format	Formato de saída (prosa, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist). Padrão: prosa
7	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso
8	--silent = true | false	Mostra o texto de saída. Padrão: falso
9	--tsConfig = tsConfig	O nome do arquivo de configuração TypeScript.
10	--tslintConfig = tslintConfig	O nome do arquivo de configuração TSLint.
11	--typeCheck = true | false	Controla a verificação de tipo de fiapos. Padrão: falso

Primeiro vá para um projeto angular atualizado usando o comando ng build .

Atualize goals.component.html e goals.component.ts como segue.

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

metas.component.html

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

Agora execute o comando linting.

Exemplo

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

Aqui, o comando lint verifica a qualidade do código do aplicativo e imprime o status do lint.

Agora corrija os erros em goals.component.ts.

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

Agora execute o comando linting.

Exemplo

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

Sintaxe

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

ng test execute os casos de teste de unidade no código do aplicativo angular. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<projeto>	O nome do projeto a ser testado.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--browsers = browsers	Substitua os testes dos navegadores em relação aos quais são executados.
2	--codeCoverage = true | false	Produza um relatório de cobertura de código. Padrão: falso
3	--codeCoverageExclude	Globs para excluir da cobertura do código.
4	--configuration = configuração	Um destino de compilação nomeado, conforme especificado na seção "configurações" do angular.json. Cada destino nomeado é acompanhado por uma configuração de padrões de opção para aquele destino. Definir isso substitui explicitamente o sinalizador "--prod" Aliases: -c
5	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso
6	--incluir	Globs de arquivos a serem incluídos, relativos à área de trabalho ou raiz do projeto. Existem 2 casos especiais - quando um caminho para o diretório é fornecido, todos os arquivos spec terminando em ".spec. @ (ts | tsx)" serão incluídos. quando um caminho para um arquivo for fornecido e um arquivo de especificação correspondente existir, ele será incluído.
7	--karmaConfig = karmaConfig	O nome do arquivo de configuração do Karma.
8	--main = main	O nome do arquivo de ponto de entrada principal.
9	--votação	Habilite e defina o período de tempo de pesquisa de monitoramento de arquivo em milissegundos.
10	--polyfills = polyfills	O nome do arquivo polyfills.
11	--preserveSymlinks = true | false	Não use o caminho real ao resolver módulos. Padrão: falso
12	--prod = true | false	Abreviação de "--configuration = production". Quando verdadeiro, define a configuração de construção para o destino de produção. Por padrão, o destino de produção é definido na configuração do espaço de trabalho de forma que todas as compilações façam uso de agrupamento, agitação limitada de árvore e também eliminação limitada de código morto.
13	--progress = true | false	Registre o progresso no console durante a construção.
13	--progress = true | false	Registre o progresso no console durante a construção.
14	- repórteres	Repórteres do Karma para usar. Passado diretamente para o corredor do carma.
15	--sourceMap = true | false	Mapas de origem de saída. Padrão: verdadeiro
16	--tsConfig = tsConfig	O nome do arquivo de configuração TypeScript.
17	--watch = true | false	Execute o build quando os arquivos forem alterados.
18	--webWorkerTsConfig = webWorkerTsConfig	Configuração de TypeScript para módulos Web Worker.

Primeiro vá para um projeto angular atualizado usando o comando ng build .

Agora execute o comando de teste.

Exemplo

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

Agora, para corrigir falhas, atualize o 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();
   });
});

Agora execute o comando de teste.

Exemplo

\>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 também abre o navegador e exibe o status do teste.

Sintaxe

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

ng e2e constrói, atende um aplicativo e, em seguida, executa os casos de teste de ponta a ponta usando o transferidor. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<projeto>	O nome do projeto a ser testado.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--baseUrl = baseUrl	URL base para conectar o transferidor.
2	--configuration = configuração	Um destino de compilação nomeado, conforme especificado na seção "configurações" do angular.json. Cada destino nomeado é acompanhado por uma configuração de padrões de opção para aquele destino. Definir isso substitui explicitamente o sinalizador "--prod" Aliases: -c
3	--devServerTarget = devServerTarget	Destino do servidor de desenvolvimento para executar testes.
4	--grep = grep	Execute especificações cujos nomes correspondem ao padrão, que é compilado internamente para um 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

Primeiro vá para um projeto angular atualizado usando o comando ng build .

Agora execute o comando e2e.

Exemplo

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

Agora, para corrigir as falhas, atualize o 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>

Agora execute o comando e2e.

Exemplo

\>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 também abre o navegador e o usa para executar casos de teste de aceitação usando a IU.

Sintaxe

ng add <collection> [options]

ng adiciona um pacote npm ao espaço de trabalho. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<coleção>	O nome do pacote a ser adicionado.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--defaults = true | false	Quando verdadeiro, desativa os prompts de entrada interativos para opções com um padrão.
2	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso
3	--registry = registro	O registro do NPM a ser usado.
4	--verbose = true | false	Exibe detalhes adicionais sobre operações internas durante a execução. Padrão: falso

Primeiro vá para um projeto angular atualizado usando o comando ng build .

Agora execute o comando add.

Exemplo

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

Sintaxe

ng analytics <settingOrProject> <projectSetting> [options]

O comando ng analytics configura as métricas de uso CLI angulares. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<settingOrProject> = on | off | ci | project | prompt	Ativa ou desativa diretamente todas as análises de uso para o usuário, ou solicita que o usuário defina o status interativamente, ou define o status padrão para o projeto. A seguir estão os detalhes das opções. on - Permite a coleta de análises e relatórios para o usuário. off - Desativa a coleta de análises e relatórios para o usuário. ci - Ativa análises e configura relatórios para uso com integração contínua, que usa um usuário de CI comum. prompt - Solicita ao usuário para definir o status interativamente. project- Define o status padrão do projeto para o valor projectSetting, que pode ser qualquer um dos outros valores. O argumento projectSetting é ignorado para todos os outros valores de settingOrProject.
2	<projectSetting> = on | off | prompt	Define o status de ativação de analítica padrão para o projeto.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso

Primeiro vá para um projeto angular atualizado usando o comando ng build .

Agora execute o comando analítico.

Exemplo

\>Node\>TutorialsPoint> ng analytics off

Sintaxe

ng config <jsonPath> <value> [options]

O comando ng config recupera ou define valores de configuração angular em angular.json. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<jsonPath>	A chave de configuração a ser definida ou consultada, no formato de caminho JSON. Por exemplo: "a [3] .foo.bar [2]". Se nenhum novo valor for fornecido, retorna o valor atual desta chave.
2	<valor>	Se fornecido, um novo valor para a chave de configuração fornecida.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--global = true | false	Quando verdadeiro, acessa a configuração global no diretório inicial do chamador. Padrão: falso Aliases: -g
2	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso

Primeiro vá para um projeto angular atualizado usando o comando ng build .

Agora execute o comando config.

Exemplo

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

Sintaxe

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

O comando ng doc abre a documentação oficial do Angular em um navegador e procura uma determinada palavra-chave. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<palavra-chave>	A palavra-chave a ser pesquisada, conforme fornecida na barra de pesquisa em angular.io.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso

Primeiro vá para um projeto angular atualizado usando o comando ng build .

Agora execute o comando doc.

Exemplo

\>Node\>TutorialsPoint> ng doc build

Agora, uma janela do navegador será aberta e pesquisará a palavra-chave relevante.

Sintaxe

ng update [options]

O comando ng update atualiza o aplicativo e suas dependências. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<palavra-chave>	A palavra-chave a ser pesquisada, conforme fornecida na barra de pesquisa em angular.io.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--all = true | false	Se deve atualizar todos os pacotes em package.json. Padrão: falso
2	--allowDirty = true | false	Permitir a atualização quando o repositório contém arquivos modificados ou não rastreados.
3	--createCommits = true | false	Crie confirmações de controle de origem para atualizações e migrações. Padrão: falso Aliases: -C
4	--force = true | false	Se for falso, ocorrerá um erro se os pacotes instalados forem incompatíveis com a atualização. Padrão: falso
5	--from = de	Versão da qual migrar. Disponível apenas com um único pacote sendo atualizado e apenas na migração.
6	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso
7	--migrateOnly = true | false	Realiza apenas uma migração, não atualiza a versão instalada.
8	--next = true | false	Use a versão maior, incluindo beta e RCs. Padrão: falso
9	- pacotes	Os nomes dos pacotes a serem atualizados.
10	--to = para	Versão até a qual aplicar as migrações. Disponível apenas com um único pacote sendo atualizado e apenas em migrações. Requer de para ser especificado. Padrão para a versão instalada detectada.
11	--verbose = true | false	Exibe detalhes adicionais sobre operações internas durante a execução. Padrão: falso

Primeiro vá para um projeto angular atualizado usando o comando ng build .

Agora execute o comando de atualização. Agora, o ng irá atualizar as dependências usando o npm.

Exemplo

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

Sintaxe

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

O comando ng xi18n extrai mensagens i18n do código-fonte. As opções são parâmetros opcionais.

Argumentos

Sr. Não.	Argumento e Sintaxe	Descrição
1	<projeto>	O nome do projeto. Pode ser um aplicativo ou biblioteca.

Opções

Sr. Não.	Opção e sintaxe	Descrição
1	--browserTarget = browserTarget	Alvo do qual extrair.
2	--configuration = configuração	Um destino de compilação nomeado, conforme especificado na seção "configurações" do angular.json. Cada destino nomeado é acompanhado por uma configuração de padrões de opção para aquele destino. Definir isso substitui explicitamente o sinalizador "--prod". Aliases: -c
3	--createCommits = true | false	Crie confirmações de controle de origem para atualizações e migrações. Padrão: falso Aliases: -C
4	--format = xmb | xlf | xlif | xliff | xlf2 | xliff2	Formato de saída para o arquivo gerado. Padrão: xlf
5	--help = true | false | json | JSON	Mostra uma mensagem de ajuda para este comando no console. Padrão: falso
6	--outFile = outFile	Nome do arquivo de saída.
7	--outputPath = outputPath	Caminho onde a saída será colocada.
8	--prod = true | false	Abreviação de "--configuration = production". Quando verdadeiro, define a configuração de construção para o destino de produção. Por padrão, o destino de produção é definido na configuração do espaço de trabalho de forma que todas as compilações façam uso de agrupamento, agitação limitada de árvore e também eliminação limitada de código morto.
9	--progress = true | false	Registre o progresso no console. Padrão: verdadeiro

Primeiro vá para um projeto angular atualizado usando o comando ng build . Atualize o app.component.html da seguinte maneira:

app.component.spec.ts

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

Agora execute o comando xi18n.

Exemplo

\>Node\>TutorialsPoint> ng xi18n

Adicione suporte de localização.

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

Agora ng irá criar um arquivo messages.xlf na pasta raiz que é um arquivo de tradução padrão da indústria.

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

Sintaxe

ng test <project> --codeCoverage=true

O comando ng test permite verificar a cobertura do código usando os casos de teste escritos. Veja o exemplo abaixo.

Mova para um projeto angular atualizado usando o comando ng xi18n . Agora execute o teste com o comando codeCoverage.

Exemplo

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

Agora o comando de teste criou uma pasta de cobertura dentro do TutorialsPoint, a pasta do projeto e preparou o relatório de cobertura no formato html disponível como \> Node \> TutorialsPoint \> cobertura \> TutorialsPoint \> index.html.