Angular CLI - 快速指南

Angular CLI - 概述

Angular 命令行界面 (CLI) 让您可以轻松启动任何 Angular 项目。它附带的命令可以帮助我们非常快速地创建和启动我们的项目。现在让我们浏览一下可用于创建项目、组件和服务、更改端口等的命令。

要使用 Angular CLI，我们需要将其安装在我们的系统上。让我们使用以下命令来实现相同的目的 -

npm install -g @angular/cli

要创建一个新项目，我们可以在命令行中运行以下命令，项目就会被创建。

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

ngserve //将编译，您可以在浏览器中看到项目的输出 -

http://localhost:4200/

4200是创建新项目时使用的默认端口。您可以使用以下命令更改端口 -

ng serve --host 0.0.0.0 --port 4201

Angular 4 的命令

下表列出了使用 Angular 4 项目时所需的一些重要命令。

先生编号	命令和说明
1	成分 ng g 组件新组件
2	指示 ng g 指令新指令
3	管道 ng g 管道新管道
4	服务 ng g 服务新服务
5	模块 ng g 模块 my−module

每当创建新模块、组件或服务时，其引用都会在父模块app.module.ts 中更新。

Angular CLI - 环境设置

要使用 Angular CLI，我们需要在系统上安装 Node。让我们详细了解 Angular CLI 所需的环境设置。

下载 Node.js 存档

从Node.js 下载下载最新版本的 Node.js 可安装存档文件，该文件位于https://nodejs.org/download/。在撰写本教程时，不同操作系统上可用的版本如下 -

操作系统	档案名称
Windows	节点-v6.3.1-x64.msi
Linux	节点-v6.3.1-linux-x86.tar.gz
苹果	节点-v6.3.1-darwin-x86.tar.gz
太阳操作系统	节点-v6.3.1-sunos-x86.tar.gz

在 UNIX/Linux/Mac OS X 和 SunOS 上安装

根据您的操作系统架构，下载存档node-v6.3.1-osname.tar.gz并将其解压到/tmp中，然后最后将解压的文件移动到/usr/local/nodejs目录中。

例如 -

$ cd /tmp
$ wgethttp://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

将 /usr/local/nodejs/bin 添加到 PATH 环境变量。

操作系统	输出
Linux	导出 PATH=$PATH:/usr/local/nodejs/bin
苹果	导出 PATH=$PATH:/usr/local/nodejs/bin
自由BSD	导出 PATH=$PATH:/usr/local/nodejs/bin

在 Windows 上安装

使用 MSI 文件并按照提示安装Node.js。默认情况下，安装程序使用C:\Program Files\nodejs中的 Node.js 发行版。

安装程序应在 Windows PATH 环境变量中设置C:\ProgramFiles\nodejs\bin目录。重新启动任何打开的命令提示符以使更改生效。

验证安装：执行文件

在您的计算机（Windows 或 Linux）上创建一个名为main.json的 js 文件，其中包含以下代码 -

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

现场演示的链接是https://www.tutorialspoint.com/execute_nodejs_online.php。

现在，使用 Node.js 解释器执行 main.js 文件以查看结果 -

$ node main.js

如果您的安装一切正常，这应该会产生以下结果 -

Hello, World!

现在，节点已安装。您可以运行以下命令来安装 Angular CLI。

npm install -g @angular/cli

验证安装

现在，运行以下命令查看结果 -

$ 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

在 Windows 上，如果 ng 未被识别为内部或外部命令，请更新系统路径变量以包含以下路径。

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

Angular CLI - ng version 命令

本章解释了 ng version 命令的语法、选项以及示例。

句法

ng version 命令的语法如下 -

ng version [options]
ng v [options]

ng version 命令显示已安装的 Angular CLI 版本。

选项

选项是可选参数。

先生。	选项和语法	描述
1	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值： false

例子

下面给出了 ng version 命令的示例 -

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

Angular CLI - ng 新命令

本章通过示例解释了 ng new 命令的语法、参数和选项。

句法

ng new 命令的语法如下 -

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

ng new 命令使用默认的 Angular 应用程序创建给定名称的工作区。

它提供交互式提示来设置可选配置。所有提示都有默认值可供选择。

争论

ng new 命令的参数如下 -

先生。	参数和语法	描述
1	<名字>	新工作区和初始项目的名称。

选项

选项是可选参数。

先生。	选项和语法	描述
1	--集合=集合	用于生成初始应用程序的示意图集合。别名：-c.
2	--commit=true\|false	初始 git 存储库提交信息。默认值：true。
3	--createApplication=true\|false	如果为 true（默认值），则在新工作区的 src 文件夹中创建一个新的初始应用程序项目。如果为 false，则创建一个没有初始应用程序的空工作区。然后，您可以使用生成应用程序命令，以便在项目文件夹中创建所有应用程序。默认值：true。
4	-默认=真\|假	如果为 true，则禁用默认选项的交互式输入提示。
5	--目录=目录	要在其中创建工作区的目录名称。
6	--dryRun=true\|false	如果为 true，则运行并报告活动而不写出结果。默认值：假。别名：-d。
7	--force=true\|false	如果为 true，则强制覆盖现有文件。默认值：假。别名：-f.
8	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假。
9	--inlineStyle=true\|false	如果为 true，则在组件 TS 文件中包含内联样式。默认情况下，会在组件 TS 文件中创建并引用外部样式文件。默认值：假。
10	--inlineStyle=true\|false	如果为 true，则在 componentTS 文件中包含内联样式。默认情况下，会在组件 TS 文件中创建并引用外部样式文件。默认值：假。别名：-t。
11	--交互=真\|假	如果为 true，则创建一个没有任何测试框架的项目。（仅用于学习目的。）默认值：假。
12	--newProjectRoot=newProjectRoot	将创建新项目的路径，相对于新工作区根目录。默认：项目。
13	--packageManager=npm\|yarn\|pnpm\|cnpm	包管理器用于安装依赖项。
14	--prefix=前缀	应用于为初始项目生成的选择器的前缀。默认值：应用程序。别名：-p。
15	--prefix=前缀	应用于为初始项目生成的选择器的前缀。默认值：应用程序。别名：-p。
16	--路由=真\|假	如果为 true，则为初始项目生成路由模块。
17 号	--skipGit=true\|false	如果为 true，则不会初始化 git 存储库。默认值：假。别名：-g.
18	--skipInstall=true\|false	如果为 true，则不安装依赖包。默认值：假。
19	--skipTests=true\|false	如果为 true，则不会为新项目生成“spec.ts”测试文件。默认值：假。别名：-S.
20	--严格=真\|假	创建具有更严格的 TypeScript 编译器选项的工作区。默认值：假。
21	--style=css\|scss\|sass\|less\|styl	用于样式文件的文件扩展名或预处理器。
22	--verbose=true\|false	如果为 true，则向输出日志记录添加更多详细信息。默认值：假。别名：-v。
23	-- viewEncapsulation=Emulated\|Native\|None\|ShadowDom	在初始项目中使用的视图封装策略。

例子

下面给出了 ng new 命令的示例 -

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

在这里，ng new 命令在我们的 Node 目录中创建了一个 Angular 工作区和一个名为 TutorialsPoint 的项目。

Angular CLI - ng help 命令

本章通过示例解释了 ng help 命令的语法和选项。

句法

下面给出了 ng help 命令的示例 -

ng help [options]

ng help 命令列出了可用命令及其简短描述。

选项

选项是可选参数。

先生。	选项和语法	描述
1	--help= true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假

实施例1

下面给出了 ng help 命令的示例 -

\>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
project 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
defined 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.angular.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"

如果是单个命令，请在命令中使用 --help 或 -h 选项。首先移动到使用ng new命令创建的 Angular 项目，然后运行该命令。解释 ng new 命令的章节可在https://www.tutorialspoint.com/angular_cli/angular_cli_ng_new.htm 上找到。

实施例2

下面给出一个例子 -

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

Angular CLI - ng 生成命令

本章通过示例解释了 nggenerate 命令的语法、参数和选项。

句法

ng生成命令的语法如下 -

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

nggenerate命令根据原理图生成和/或修改文件。

争论

ng help 命令的参数如下 -

先生。	参数和语法	描述
1	<示意图>	原理图集合：要生成的原理图。此选项可以采用以下子命令之一：应用程序外壳应用班级成分指示枚举警卫拦截器界面图书馆模块管道服务服务工作者网络工作者

选项

选项是可选参数。

先生。	选项和语法	描述
1	--默认=true\|false	如果为 true，则禁用默认选项的交互式输入提示。
2	--dryRun=true\|false	如果为真，则运行并报告活动而不写出结果。默认值：假。别名：-d。
3	--force=true\|false	如果为 true，则强制覆盖现有文件。默认值：假。别名：-f.
4	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假。
5	--交互=真\|假	当为 false 时，禁用交互式输入提示。

首先移动到使用ng new命令创建的 Angular 项目，然后运行该命令。本章可从https://www.tutorialspoint.com/angular_cli/angular_cli_ng_new.htm 获取。

例子

下面给出了 ng 生成命令的示例 -

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

在这里，nggenerate命令在我们的项目TutorialsPoint中创建了一个新组件，并在app.module.ts中添加了这个新组件条目。

Angular CLI - ng build 命令

本章通过示例解释了 ng build 命令的语法、参数和选项。

句法

ng build 命令的语法如下 -

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

ng build 命令将 Angular 应用程序/库编译到给定路径下名为 dist 的输出目录中。

论点

ng build 命令的参数如下 -

先生。	参数和语法	描述
1	<项目>	要构建的应用程序或库的名称。

选项

选项是可选参数。

先生。	选项和语法	描述
1	--aot=真\|假	使用提前编译进行构建。默认值：假。
2	--baseHref=baseHref	正在构建的应用程序的基本 url。
3	--buildEventLog=buildEventLog	实验构建事件协议事件的输出文件路径。
4	--buildOptimizer=true\|false	使用“aot”选项时启用“@angular-devkit/build-optimizer”优化。默认值：假。
5	--commonChunk=true\|false	使用包含跨多个包使用的代码的单独包。默认值：假。
6	--configuration=配置	命名的构建目标，如 angular.json 的“配置”部分中所指定。每个命名目标都附有该目标的选项默认配置。显式设置此选项会覆盖“--prod”标志。别名：-c.
7	--crossOrigin=none\|匿名\|使用凭证	定义提供 CORS 支持的元素的跨域属性设置。默认值：无。
8	--deleteOutputPath=true\|false	构建之前删除输出路径。默认值：true。
9	--deployUrl=deployUrl	将部署文件的 URL。
10	--experimentalRollupPass=true\|false	在使用 Webpack 捆绑模块之前，使用 Rollup 连接模块。默认值：假。
11	--extractCss=true\|false	将全局样式中的 css 提取到 css 文件中，而不是 js 文件中。默认值：假。
12	--extractLicenses=true\|false	将所有许可证提取到单独的文件中。默认值：假。
13	--forkTypeChecker=true\|false	在分叉进程中运行 TypeScript 类型检查器。默认值：true。
14	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假。
15	--i18nMissingTranslation=警告\|错误\|忽略	如何处理 i18n 缺失的翻译。默认值：警告。
16	--索引=索引	配置应用程序 HTML 索引的生成。
17 号	--localize=true\|false
18	--主=主	应用程序主入口点相对于当前工作区的完整路径。
19	--namedChunks=true\|false	使用延迟加载块的文件名。默认值：true。
20	--ngswConfigPath=ngswConfigPath	ngsw-config.json 的路径。
21	--优化=true\|false	启用构建输出的优化。
22	--outputHashing=无\|所有\|媒体\|捆绑	定义输出文件名缓存破坏哈希模式。默认值：无。
23	--outputPath=输出路径	新输出目录相对于当前工作空间的完整路径。默认情况下，将输出写入当前项目中名为 dist/ 的文件夹。
24	- 轮询	启用并定义文件监视轮询时间段（以毫秒为单位）。
25	--polyfills=polyfills	Polyfills 文件相对于当前工作空间的完整路径。
26	--preserveSymlinks=true\|false	解析模块时不要使用真实路径。默认值：假。
27	--prod=真\|假	“--configuration=生产”的简写。如果为 true，则将构建配置设置为生产目标。默认情况下，生产目标是在工作区配置中设置的，以便所有构建都利用捆绑、有限的树摇动以及有限的死代码消除。
28	--进度=真\|假	构建时将进度记录到控制台。默认值：true。
27	--resourcesOutputPath=资源输出路径	样式资源放置的路径，相对于outputPath。
28	--serviceWorker=true\|false	为生产构建生成服务工作线程配置。默认值：假。
29	--showCircularDependency=true\|false	显示构建上的循环依赖警告。默认值：true。
30	--sourceMap=true\|false	输出源图。默认值：true。
31	--statsJson=true\|false	生成一个“stats.json”文件，可以使用“webpack-bundle-analyzer”等工具进行分析。默认值：假。
32	--subresourceIntegrity=true\|false	启用子资源完整性验证的使用。默认值：假。
33	--tsConfig=tsConfig	TypeScript 配置文件相对于当前工作区的完整路径。
34	--vendorChunk=true\|false	使用仅包含供应商库的单独捆绑包。默认值：true。
35	--verbose=true\|false	向输出日志记录添加更多详细信息。默认值：true。
36	--watch=true\|false	当文件更改时运行构建。默认值：假。
37	--webWorkerTsConfig=webWorkerTsConfig	Web Worker 模块的 TypeScript 配置。

首先，移动到使用nggenerate命令更新的 Angular 项目。将 app.component.html 的内容替换为以下内容，然后运行命令。本章可从https://www.tutorialspoint.com/angular_cli/angular_cli_ng_generate.htm 获取。

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

例子

下面给出了 ng build 命令的示例 -

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

这里 ng build 命令已经成功构建了我们的项目TutorialsPoint。

Angular CLI - ng run 命令

本章通过示例解释了 ng run 命令的语法、参数和选项。

句法

ng run 命令的语法如下 -

ng run project:target[:configuration]

ng run 命令运行 Architect 目标，其中包含项目中 angular.json 中定义的可选自定义构建器配置。这里的项目是 angular.json 中定义的应用程序的名称。

论点

ng run 命令的参数如下 -

先生。	参数和语法	描述
1	<目标>	架构师目标运行。

选项

选项是可选参数。

先生。	选项和语法	描述
1	--configuration=配置	命名构建器配置，在 angular.json 的“配置”部分中定义。构建器使用命名配置来运行给定的目标。别名：-c.
2	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假。

先生。

选项和语法

描述

--configuration=配置

命名构建器配置，在 angular.json 的“配置”部分中定义。构建器使用命名配置来运行给定的目标。

别名：-c.

--help=true|false|json|JSON

在控制台中显示此命令的帮助消息。

默认值：假。

首先移动到使用nggenerate命令更新的 Angular 项目，然后运行该命令。本章可从 https://www.tutorialspoint.com/angular_cli/angular_cli_ng_generate.htm 获取。

例子

下面给出了 ng run 命令的示例 -

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

这里 ng build 命令已经成功构建了我们的项目TutorialsPoint。

Angular CLI - ng 服务命令

本章通过示例解释了 ngserve 命令的语法、参数和选项。

句法

ngserve 命令的语法如下 -

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

ngserve 命令构建并服务应用程序。如果发生更改，它会重建应用程序。这里的项目是 angular.json 中定义的应用程序的名称。

论点

ngserve 命令的参数如下 -

先生。	参数和语法	描述
1	<项目>	要构建的项目的名称。可以是应用程序或库。

选项

选项是可选参数。

先生。	选项和语法	描述
1	--允许的主机	允许访问开发服务器的主机白名单。
2	--aot=真\|假	使用提前编译进行构建。
3	--baseHref=baseHref	正在构建的应用程序的基本 url。
4	--buildEventLog=buildEventLog	实验构建事件协议事件的输出文件路径
5	--commonChunk=true\|false	使用包含跨多个包使用的代码的单独包。
6	--configuration=配置	命名的构建目标，如 angular.json 的“配置”部分中所指定。每个命名目标都附有该目标的选项默认配置。显式设置此选项会覆盖“--prod”标志。别名：-c
7	--deployUrl=deployUrl	将部署文件的 URL。
8	--disableHostCheck=true\|false	不验证连接的客户端是否属于允许的主机。默认值：假
9	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假
10	--hmr=真\|假	启用热模块更换。默认值：假
11	--hmrWarning=true\|false	启用 --hmr 选项时显示警告。默认值：true
12	--主机=主机	主持人来听听。默认值：本地主机
13	--liveReload=true\|false	是否在更改时重新加载页面，使用实时重新加载。默认值：true
14	--打开=真\|假	在默认浏览器中打开 URL。默认值：假别名：-o
15	--优化=true\|false	启用构建输出的优化。
16	- 轮询	启用并定义文件监视轮询时间段（以毫秒为单位）。
17 号	- 港口	要侦听的端口。默认值：4200
18	--prod=真\|假	“--configuration=生产”的简写。如果为 true，则将构建配置设置为生产目标。默认情况下，生产目标是在工作区配置中设置的，以便所有构建都利用捆绑、有限的树摇动以及有限的死代码消除。
19	--进度=真\|假	构建时将进度记录到控制台。
20	--proxyConfig=代理配置	代理配置文件。
21	--publicHost=公共主机	浏览器客户端（或实时重新加载客户端，如果启用）应用于连接到开发服务器的 URL。用于复杂的开发服务器设置，例如带有反向代理的服务器。
22	--servePath=服务路径	将在其中提供应用程序的路径名。
23	--servePathDefaultWarning=true\|false	当deploy-url/base-href 使用不支持的服务路径值时显示警告。默认值：true
24	--sourceMap=true\|false	输出源图。
25	--ssl=真\|假	使用 HTTPS 提供服务。默认值：假
26	--sslCert=sslCert	用于服务 HTTPS 的 SSL 证书。
27	--sslKey=sslKey	用于服务 HTTPS 的 SSL 密钥。
28	--vendorChunk=true\|false	使用仅包含供应商库的单独捆绑包。
29	--verbose=true\|false	向输出日志记录添加更多详细信息。
30	--watch=true\|false	在变化中重建。默认值：true

首先移动到使用ng build命令更新的 Angular 项目，然后运行该命令。本章可在https://www.tutorialspoint.com/angular_cli/angular_cli_ng_build.htm 上找到。

例子

下面给出了 ng 服务命令的示例 -

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

这里 ngserve 命令已经成功构建并服务了我们的项目 TutorialsPoint。现在在浏览器窗口中打开 http://localhost:4200 并验证输出。

Angular CLI - ng lint 命令

本章通过示例解释了 ng lint 命令的语法、参数和选项。

句法

ng lint 命令的语法如下 -

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

ng lint 在 Angular 应用程序代码上运行 linting 工具。它检查指定的角度项目的代码质量。它使用 TSLint 作为默认 linting 工具，并使用 tslint.json 文件中提供的默认配置。

论点

ng lint 命令的参数如下 -

先生。	参数和语法	描述
1	<项目>	要 lint 的项目名称。

选项

选项是可选参数。

先生。	选项和语法	描述
1	--configuration=配置	要使用的 linting 配置。别名：-c
2	- 排除	从 linting 中排除的文件。
3	--文件	要包含在 linting 中的文件。
4	--修复=真\|假	修复 linting 错误（可能会覆盖 linting 文件）。默认值：假
5	--force=true\|false	即使存在 linting 错误，也会成功。默认值：假
6	--格式=格式	输出格式（散文、json、时尚、详细、pmd、msbuild、checkstyle、vso、文件列表）。默认：散文
7	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假
8	--沉默=真\|假	显示输出文本。默认值：假
9	--tsConfig=tsConfig	TypeScript 配置文件的名称。
10	--tslintConfig=tslintConfig	TSLint 配置文件的名称。
11	--typeCheck=true\|false	控制 linting 的类型检查。默认值：假

首先转到使用ng build命令更新的 Angular 项目。该命令位于 https://www.tutorialspoint.com/angular_cli/angular_cli_ng_build.htm。

更新 goal.component.html 和 goal.component.ts 如下 -

目标.组件.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 {
   }
}

目标.component.html

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

现在运行 linting 命令。

例子

下面给出了 ng lint 命令的示例 -

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

这里 ng lint 命令检查了应用程序的代码质量并打印了 linting 状态。

现在更正 goal.component.ts 中的错误。

目标.组件.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 {
   }
}

现在运行 linting 命令。

例子

下面给出了一个例子 -

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

Angular CLI - ng test 命令

本章通过示例解释了 ng test 命令的语法、参数和选项。

句法

ng test 命令的语法如下 -

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

ng test 在 Angular 应用程序代码上运行单元测试用例。

论点

ng test 命令的参数如下 -

先生。	参数和语法	描述
1	<项目>	要测试的项目的名称。

选项

选项是可选参数。

先生。	选项和语法	描述
1	--browsers=浏览器	覆盖运行测试的浏览器。
2	--codeCoverage=true\|false	输出代码覆盖率报告。默认值：假
3	--codeCoverage排除	要从代码覆盖率中排除的 Glob。
4	--configuration=配置	命名的构建目标，如 angular.json 的“配置”部分中所指定。每个命名目标都附有该目标的选项默认配置。显式设置会覆盖“--prod”标志别名：-c
5	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假
6	- 包括	相对于工作区或项目根目录要包含的文件团。有两种特殊情况 - 当提供目录路径时，将包含所有以“.spec.@(ts\|tsx)”结尾的规范文件。当提供文件路径并且存在匹配的规范文件时，它将被包含在内。
7	--karmaConfig=karmaConfig	Karma 配置文件的名称。
8	--主=主	主入口点文件的名称。
9	- 轮询	启用并定义文件监视轮询时间段（以毫秒为单位）。
10	--polyfills=polyfills	Polyfills 文件的名称。
11	--preserveSymlinks=true\|false	解析模块时不要使用真实路径。默认值：假
12	--prod=真\|假	“--configuration=生产”的简写。如果为 true，则将构建配置设置为生产目标。默认情况下，生产目标是在工作区配置中设置的，以便所有构建都利用捆绑、有限的树摇动以及有限的死代码消除。
13	--进度=真\|假	构建时将进度记录到控制台。
13	--进度=真\|假	构建时将进度记录到控制台。
14	——记者	噶记者使用。直接传递给业力转轮。
15	--sourceMap=true\|false	输出源图。默认值：true
16	--tsConfig=tsConfig	TypeScript 配置文件的名称。
17 号	--watch=true\|false	当文件更改时运行构建。
18	--webWorkerTsConfig=webWorkerTsConfig	Web Worker 模块的 TypeScript 配置。

首先转到使用ng build命令更新的 Angular 项目。本章的链接是https://www.tutorialspoint.com/angular_cli/angular_cli_ng_build.htm。

现在运行测试命令。

例子

下面给出了 ng test 命令的示例 -

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

现在要修复故障，请更新 app.component.spec.ts

应用程序.组件.规格.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();
   });
});

现在运行测试命令。

例子

下面给出一个例子 -

\>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 还会打开浏览器并显示测试状态。

Angular CLI - ng e2e 命令

本章通过示例解释了 ng e2e 命令的语法、参数和选项。这里，e2e是指端到端。

句法

ng e2e 命令的语法如下 -

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

ng e2e 构建、提供应用程序，然后使用 Protractor 运行端到端测试用例。选项是可选参数。

论点

ng e2e 命令的参数如下 -

先生。	参数和语法	描述
1	<项目>	要测试的项目的名称。

选项

选项是可选参数。

先生。	选项和语法	描述
1	--baseUrl=baseUrl	Protractor连接的基本 URL。
2	--configuration=配置	命名的构建目标，如 angular.json 的“配置”部分中所指定。每个命名目标都附有该目标的选项默认配置。显式设置会覆盖“--prod”标志别名：-c
3	--devServerTarget=devServerTarget	要运行测试的开发服务器目标。
4	--grep=grep	执行名称与模式匹配的规范，该模式在内部编译为 RegExp。
5	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假
6	--主机=主机	主持人来听听。
7	--invertGrep=true\|false	反转“grep”选项指定的选择。默认值：假
8	- 港口	用于为应用程序提供服务的端口。
9	--prod=真\|假	“--configuration=生产”的简写。如果为 true，则将构建配置设置为生产目标。默认情况下，生产目标是在工作区配置中设置的，以便所有构建都利用捆绑、有限的树摇动以及有限的死代码消除。
10	--protractorConfig=Protractor配置	Protractor配置文件的名称。
11	- 眼镜	覆盖Protractor配置中的规格。
12	--套房=套房	覆盖Protractor配置中的套件。
13	--webdriverUpdate=true\|false	尝试更新网络驱动程序。默认值：true

首先转到使用ng build命令更新的 Angular 项目。该命令位于https://www.tutorialspoint.com/angular_cli/angular_cli_ng_build.htm。

现在运行 e2e 命令。

例子

下面给出了 ng e2e 命令的示例 -

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

现在要修复故障，请更新 app.component.html

应用程序组件.html

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

现在运行 e2e 命令。

例子

下面给出了 ng e2e 命令的示例 -

\>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 还会打开浏览器并使用它来使用 UI 运行验收测试用例。

Angular CLI - ng add 命令

本章通过示例解释了 ng add 命令的语法、参数和选项。

句法

ng add 命令的语法如下 -

ng add <collection> [options]

ng 添加 npm 包

先生。	选项和语法	描述
1	--集合=集合	用于生成初始应用程序的示意图集合。别名：-c.
2	--commit=true\|false	初始 git 存储库提交信息。默认值：true。
3	--createApplication=true\|false	如果为 true（默认值），则在新工作区的 src 文件夹中创建一个新的初始应用程序项目。如果为 false，则创建一个没有初始应用程序的空工作区。然后，您可以使用生成应用程序命令，以便在项目文件夹中创建所有应用程序。默认值：true。
4	-默认=真\|假	如果为 true，则禁用默认选项的交互式输入提示。
5	--目录=目录	要在其中创建工作区的目录名称。
6	--dryRun=true\|false	如果为 true，则运行并报告活动而不写出结果。默认值：假。别名：-d。
7	--force=true\|false	如果为 true，则强制覆盖现有文件。默认值：假。别名：-f.
8	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助消息。默认值：假。
9	--inlineStyle=true\|false	如果为 true，则在组件 TS 文件中包含内联样式。默认情况下，会在组件 TS 文件中创建并引用外部样式文件。默认值：假。
10	--inlineStyle=true\|false	如果为 true，则在 componentTS 文件中包含内联样式。默认情况下，会在组件 TS 文件中创建并引用外部样式文件。默认值：假。别名：-t。
11	--交互=真\|假	如果为 true，则创建一个没有任何测试框架的项目。（仅用于学习目的。）默认值：假。
12	--newProjectRoot=newProjectRoot	将创建新项目的路径，相对于新工作区根目录。默认：项目。
13	--packageManager=npm\|yarn\|pnpm\|cnpm	包管理器用于安装依赖项。
14	--prefix=前缀	应用于为初始项目生成的选择器的前缀。默认值：应用程序。别名：-p。
15	--prefix=前缀	应用于为初始项目生成的选择器的前缀。默认值：应用程序。别名：-p。
16	--路由=真\|假	如果为 true，则为初始项目生成路由模块。
17 号	--skipGit=true\|false	如果为 true，则不会初始化 git 存储库。默认值：假。别名：-g.
18	--skipInstall=true\|false	如果为 true，则不安装依赖包。默认值：假。
19	--skipTests=true\|false	如果为 true，则不会为新项目生成“spec.ts”测试文件。默认值：假。别名：-S.
20	--严格=真\|假	创建具有更严格的 TypeScript 编译器选项的工作区。默认值：假。
21	--style=css\|scss\|sass\|less\|styl	用于样式文件的文件扩展名或预处理器。
22	--verbose=true\|false	如果为 true，则向输出日志记录添加更多详细信息。默认值：假。别名：-v。
23	-- viewEncapsulation=Emulated\|Native\|None\|ShadowDom	在初始项目中使用的视图封装策略。