angular cli_Ultimate Angular CLI参考指南

angular cli

在本文中，我们将介绍什么是Angular CLI，它可以为您做什么，以及它如何在幕后发挥其神奇作用。 即使您已经使用Angular CLI，本文也可以作为参考，以更好地了解其内部工作原理。

从技术上讲，您不需要使用Angular CLI来开发Angular应用程序，但是它的许多功能可以极大地提高代码质量并节省大量时间。

更喜欢使用分步视频课程学习Angular？ 退房 了解角5 上SitePoint保费。

这是有关如何用Angular编写Todo应用程序的4部分系列文章中的初步文章。

1. 第0部分— Ultimate Angular CLI参考指南
2. 第1部分-启动并运行我们的Todo应用程序的第一个版本
3. 第2部分-创建单独的组件以显示待办事项列表和一个待办事项
4. 第3部分-更新Todo服务以与REST API通信
5. 第4部分-使用Angular路由器解析数据 。

一些历史

2016年9月15日， 发布了Angular Final 。

在AngularJS 1.x仅限于框架的情况下， Angular已成长为一个雄心勃勃的平台，可让您跨Web，移动Web，本机移动甚至本机桌面等所有平台开发快速且可扩展的应用程序。

随着向平台的过渡，工具变得比以往任何时候都更加重要。 但是，设置和配置工具并不总是那么容易。 为了确保Angular开发人员可以专注于构建尽可能少的麻烦的应用程序，Angular团队正竭尽全力为开发人员提供高质量的开发工具集。

该工具集的一部分是与各种IDE和编辑器的紧密集成。 该工具集的另一部分是Angular CLI 。

因此，让我们开始吧！

2017.04.25：截至3月24日，Angular CLI v1.0已发布。 本文已更新，以反映最新的更改。 如果要将Angular CLI v1.0的最新功能添加到使用较早版本的Angular CLI生成的现有Angular项目中，请查看Angular CLI v1.0迁移指南 。

2017.02.17：自2017年2月9日起， ng deploy命令已从Angular CLI的核心中删除。 在这里。

2017.01.27：自2017年1月27日起，官方建议对任何1.x版本使用名称AngularJS ，对于任何2+版本使用名称Angular 。 本文已更新，以反映官方的品牌指南 。

什么是Angular CLI？

Angular CLI是一个命令行界面（CLI），可自动执行您的开发工作流程。 它允许您：

• 创建一个新的Angular应用程序
• 运行具有LiveReload支持的开发服务器以在开发过程中预览您的应用程序
• 向现有的Angular应用程序添加功能
• 运行应用程序的单元测试
• 运行应用程序的端到端（E2E）测试
• 构建用于部署到生产的应用程序。

在详细介绍以上各项之前，让我们首先了解如何安装Angular CLI。

先决条件

在使用Angular CLI之前，必须在系统上安装Node.js 6.9.0和npm 3.0.0或更高版本。

您可以为您的操作系统下载最新版本的Node.js，并在Node.js官方网站上查阅最新的安装说明。

如果已经安装了Node.js和npm，则可以通过运行以下命令验证其版本：

$ node -v # => displays your Node.js version
$ npm -v # => displays your npm version

一旦安装了Node.js，就可以使用npm命令安装TypeScript ：

$ npm install -g typescript@2.2.0

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

尽管从技术上来讲TypeScript不是绝对要求，但Angular团队强烈建议使用它，因此，我建议您安装它以使与Angular的工作尽可能舒适。

现在您已经安装了Node.js和TypeScript，现在可以安装Angular CLI。

安装Angular CLI

要安装Angular CLI，请运行：

$ npm install -g @angular/cli

这将在系统上全局安装ng命令。

要验证安装是否成功完成，可以运行以下命令：

$ ng version

这将显示您已安装的版本：

@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64

现在您已经安装了Angular CLI，让我们使用它来创建一个新的应用程序。

创建一个新的Angular应用程序

有两种使用Angular CLI创建新应用程序的方法：

• ng init ：在当前目录中创建一个新的应用程序
• ng new ：创建一个新目录并在新目录中运行ng init 。

因此ng new与ng init类似，除了它还会为您创建目录。

假设尚未创建目录，让我们使用ng new来创建一个新项目：

$ ng new my-app

在幕后，发生以下情况：

• 创建了一个新目录my-app
• 新Angular应用程序的所有源文件和目录都是根据您指定的名称（ my-app ）和官方《 Angular样式指南》中的最佳做法创建的
• 已安装npm依赖项
• 为您配置了TypeScript
• 为您配置了Karma单元测试运行器
• 为您配置了量角器端到端测试框架
• 创建具有默认设置的环境文件。

您将在以下各节中详细了解这些方面。

此时，您有一个正常工作的Angular应用程序，新目录my-app如下所示：

.
├── README.md
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

可用选项

• --dry-run ：布尔值，默认为false ，执行空运行，因此不会将任何更改写入文件系统
• --verbose ：布尔值，默认为false
• --link-cli ：布尔值，默认为false ，自动链接@angular/cli包（ 更多信息 ）
• --skip-install ：布尔值，默认为false ，跳过npm install
• --skip-git ：布尔值，默认为false ，不初始化git仓库
• --skip-tests ：布尔值，默认为false ，跳过创建测试
• --skip-commit ：布尔值，默认为false ，跳过提交第一个git commit
• --directory ：字符串，要创建的目录名称，默认情况下，与应用程序名称相同
• --source-dir ：字符串，默认为'src' ，源目录名称
• --style ：字符串，默认为'css' ，使用的样式语言（ 'css' ， 'less'或'scss' ）
• --prefix ：字符串，默认为'app' ，生成新组件时使用的前缀
• --mobile ：布尔值，默认为false ，生成一个渐进式Web App应用程序（请参阅有关即将推出的功能的部分）
• --routing ：布尔值，默认为false ，添加带有路由信息的模块并将其导入主应用程序模块
• --inline-style ：布尔值，默认为false ，在生成新应用程序时使用内联样式
• --inline-template ：布尔值，默认为false ，在生成新应用程序时使用内联模板。

运行$ ng generate --help以查看本地安装的Angular CLI的所有可用选项。

让我们看看如何启动您的应用程序，以便您可以实际看到它。

运行您的应用程序

要在浏览器中预览新应用程序，请导航至其目录：

$ cd my-app

并运行：

$ ng serve

在端口4200上启动内置开发服务器：

** NG Live Development Server is running on http://localhost:4200 **
Hash: 09fb2ad840c1472e5885
Time: 6230ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

现在，您可以将自己喜欢的浏览器导航到http：// localhost：4200 /，以查看运行中的应用程序：

在幕后，发生以下情况：

1. Angular CLI从.angular-cli.json加载其配置
2. Angular CLI运行Webpack来构建和捆绑所有JavaScript和CSS代码
3. Angular CLI启动Webpack开发服务器以在localhost:4200上预览结果。

请注意，第3步之后ng serve命令不会退出并返回到终端提示符。

相反，因为它包括LiveReload支持，所以该过程会主动监视src目录中的文件更改。 当检测到文件更改时，将重复步骤2并将通知发送到您的浏览器，以便它可以自动刷新。

要停止该过程并返回到提示，请按ctrl-c 。

向Angular应用程序添加功能

您可以使用ng generate命令将功能添加到现有应用程序中：

• ng generate class my-new-class ：在您的应用程序中添加一个类
• ng generate component my-new-component ：将组件添加到您的应用程序
• ng generate directive my-new-directive ：向您的应用程序添加指令
• ng generate enum my-new-enum ：将枚举添加到您的应用程序
• ng generate module my-new-module ：将模块添加到您的应用程序
• ng generate pipe my-new-pipe ：将管道添加到您的应用程序
• ng generate service my-new-service ：将服务添加到您的应用程序

generate命令和不同的子命令也具有快捷方式符号，因此以下命令是相似的：

• ng g cl my-new-class ：将类添加到您的应用程序
• ng gc my-new-component ：将组件添加到您的应用程序
• ng gd my-new-directive ：向您的应用程序添加指令
• ng ge my-new-enum ：向您的应用程序添加一个枚举
• ng gm my-new-module ：将模块添加到您的应用程序
• ng gp my-new-pipe ：将管道添加到您的应用程序
• ng gs my-new-service ：将服务添加到您的应用程序。

每个不同的子命令执行不同的任务，并提供不同的选项和参数。

让我们看看它们中的每一个。

新增班级

要添加一个名为UserProfile的类，请运行：

$ ng generate class user-profile
installing componentcreate src/app/user-profile.ts

Angular CLI将自动为您调整文件名和类名的字母大小写，因此以下命令具有相同的效果：

# All three commands are equivalent
$ ng generate class user-profile
$ ng generate class userProfile
$ ng generate class UserProfile

在幕后，发生以下情况：

• 创建一个文件src/app/user-profile.ts ，该文件导出一个名为UserProfile的空类

可用选项

• --spec ：布尔值，默认为false ，使用单元测试生成规范文件

运行$ ng generate --help以查看本地安装的Angular CLI的所有可用选项。

例子：

# Generate class 'UserProfile'
$ ng generate class user-profile# Generate class 'UserProfile' with unit test
$ ng generate class user-profile --spec

添加新组件

要添加带有选择器app-site-header ，请运行：

$ ng generate component site-header
installing componentcreate src/app/site-header/site-header.component.csscreate src/app/site-header/site-header.component.htmlcreate src/app/site-header/site-header.component.spec.tscreate src/app/site-header/site-header.component.tsupdate src/app/app.module.ts

Angular CLI将自动为您调整文件名和组件名的字母大小写，并将前缀应用于组件选择器，因此以下命令具有相同的效果：

# All three commands are equivalent
$ ng generate component site-header
$ ng generate component siteHeader
$ ng generate component SiteHeader

在幕后，发生以下情况：

• 创建目录src/app/site-header
• 在该目录中，将生成四个文件：
  • 组件样式CSS文件
  • 组件模板HTML文件
  • 一个TypeScript文件，其具有名为SiteHeaderComponent的组件类和选择器app-site-header
  • 带有用于新组件的样本单元测试的规格文件
• SiteHeaderComponent被添加作为在声明@NgModule最接近模块的装饰，在这种情况下AppModule中src/app/app.module.ts 。

可用选项

• --flat ：布尔值，默认为false ，在src/app而不是src/app/site-header生成组件文件
• --inline-template ：布尔值，默认为false ，使用内联模板而不是单独HTML文件
• --inline-style ：布尔值，默认为false ，使用内联样式而不是单独CSS文件
• --prefix ：布尔值，默认为true ，使用组件选择器中.angular-cli.json中指定的前缀
• --spec ：布尔值，默认为true ，使用单元测试生成规范文件
• --view-encapsulation ：字符串，指定视图封装策略
• --change-detection ：字符串，指定更改检测策略。

运行$ ng generate --help以查看本地安装的Angular CLI的所有可用选项。

例子：

# Generate component 'site-header'
$ ng generate component site-header# Generate component 'site-header' with inline template and inline styles
$ ng generate component site-header --inline-template --inline-style

添加新指令

要使用选择器appAdminLink添加指令，请运行：

$ ng generate directive admin-link
installing directivecreate src/app/admin-link.directive.spec.tscreate src/app/admin-link.directive.tsupdate src/app/app.module.ts

Angular CLI将自动为您调整文件名和指令名称的字母大小写，并将前缀应用于指令选择器，因此以下命令具有相同的效果：

# All three commands are equivalent
$ ng generate directive admin-link
$ ng generate directive adminLink
$ ng generate directive AdminLink

在幕后，发生以下情况：

• 创建一个文件src/app/admin-link.directive.ts ，该文件导出带有选择器appAdminLink名为AdminLinkDirective的指令
• 使用指令的单元测试创​​建文件src/app/admin-link.directive.spec.ts
• AdminLinkDirective被添加作为在声明@NgModule最接近模块的装饰，在这种情况下AppModule中src/app/app.module.ts 。

可用选项

• --flat ：布尔值，默认为true ，在src/app而不是src/app/admin-link生成指令文件
• --prefix ：布尔值，默认为true ，使用在指令选择器中的.angular-cli.json中指定的前缀
• --spec ：布尔值，默认为true ，使用单元测试生成规范文件

运行$ ng generate --help以查看本地安装的Angular CLI的所有可用选项。

例子：

# Generate directive 'adminLink'
$ ng generate directive admin-link# Generate directive 'adminLink' without unit test
$ ng generate directive admin-link --spec=false

添加一个新的枚举

要添加一个名为Direction的枚举 ，请运行：

$ ng generate enum direction
installing enumcreate src/app/direction.enum.ts

Angular CLI将自动为您调整文件名和枚举名的字母大小写，因此以下命令具有相同的效果：

# Both commands are equivalent
$ ng generate enum direction
$ ng generate enum Direction

在幕后，发生以下情况：

• 创建一个文件src/app/direction.enum.ts该文件导出名为Direction的枚举

可用选项

此命令没有可用的命令行选项。

添加一个新模块

要将新模块添加到您的应用程序，请运行：

$ ng generate module admin
installing modulecreate src/app/admin/admin.module.ts

在幕后，发生以下情况：

• 创建目录src/app/admin
• 在src/app/admin/admin.module.ts内部创建一个AdminModule模块。

请注意， AdminModule模块不会自动添加到src/app/app.module.ts主模块AppModule中。 您可以根据需要将模块导入。

要将新模块导入另一个模块，可以在@NgModule定义@NgModule指定为导入。 例如：

import { AdminModule } from './admin/admin.module';@NgModule({// ...imports: [AdminModule]
})
export class AppModule { }

可用选项

• --routing ：布尔值，默认为false ，仅生成带有路由信息的附加模块AdminRoutingModule并将其作为导入添加到新模块中
• --spec ：布尔值，默认为false ，添加src/app/admin/admin.module.spec.ts以及用于检查模块是否存在的单元测试。

运行$ ng generate --help以查看本地安装的Angular CLI的所有可用选项。

例子：

# Add module 'admin'
$ ng generate module admin# Add module 'admin' with additional module containing routing information
$ ng generate module admin --routing

添加新管道

管道是AngularJS 1.x中过滤器的Angular等价物，可让您在模板中转换显示的值。

要添加名称为convertToEuro的管道，请运行：

$ ng generate pipe convert-to-euro
installing pipecreate src/app/convert-to-euro.pipe.spec.tscreate src/app/convert-to-euro.pipe.tsupdate src/app/app.module.ts

Angular CLI将自动为您调整文件名和管道名的字母大小写，因此以下命令具有相同的效果：

# All three commands are equivalent
$ ng generate pipe convert-to-euro
$ ng generate pipe convertToEuro
$ ng generate pipe ConvertToEuro

在幕后，发生以下情况：

• 创建一个文件src/app/convert-to-euro.pipe.ts ，该文件导出名为ConvertToEuroPipe的管道类
• 使用管道的单元测试创​​建文件src/app/convert-to-euro.pipe.spec.ts
• ConvertToEuroPipe被添加作为在声明@NgModule最接近模块的装饰，在这种情况下AppModule中src/app/app.module.ts 。

可用选项

• --flat ：布尔值，默认为true ，在src/app而不是src/app/site-header生成组件文件
• --spec ：布尔值，默认为true ，使用单元测试生成规范文件。

运行$ ng generate --help以查看本地安装的Angular CLI的所有可用选项。

例子：

# Generate pipe 'convertToEuro' with spec and in /src/app directory
$ ng generate pipe convert-to-euro# Generate pipe 'convertToEuro' without spec and in /src/app/convert-to-euro directory
$ ng generate pipe convert-to-euro --spec=false --flat=false

添加新服务

要添加带有依赖项注入令牌BackendApiService ，请运行：

$ ng generate service backend-api
installing servicecreate src/app/backend-api.service.spec.tscreate src/app/backend-api.service.tsWARNING Service is generated but not provided, it must be provided to be used

Angular CLI将自动为您调整文件名和管道名的字母大小写，因此以下命令具有相同的效果：

# All three commands are equivalent
$ ng generate service backend-api
$ ng generate service backendApi
$ ng generate service BackendApi

在幕后，发生以下情况：

• 创建一个文件src/app/backend-api.service.ts ，该文件导出名为BackendApiService的服务类
• 使用新服务的单元测试创​​建了文件src/app/backend-api.service.spec.ts 。

请注意，Angular CLI如何警告该服务已生成但尚未在任何地方提供。 您可以通过将服务添加到providers: []数组（例如，在模块或组件中）来将其注册为提供程序，这取决于您。 例如：

import { BackendApiService } from './backend-api.service';@NgModule({// ...providers: [BackendApiService],bootstrap: [AppComponent]
})

可用选项

• --flat ：布尔值，默认为true ，在src/app而不是src/app/backend-api生成服务文件
• --spec ：布尔值，默认为true ，使用单元测试生成规范文件

运行$ ng generate --help以查看本地安装的Angular CLI的所有可用选项。

例子：

# Generate service with DI token 'BackendApiService' in /src/app directory
$ ng generate service backend-api# Generate service with DI token 'BackendApiService' in /src/app/backend-api directory
$ ng generate service backend-api --flat=false

特别说明

Angular CLI不仅会为您盲目生成代码。 它使用静态分析来更好地理解应用程序的语义。

例如，当使用ng generate component添加新组件时，Angular CLI会在应用程序的模块树中找到最接近的模块，并将新功能集成到该模块中。

因此，如果您的应用程序具有多个模块，则Angular CLI会根据从中运行命令的目录自动将新功能集成到正确的模块中。

运行单元测试

最初创建应用程序时，Angular CLI会自动为您配置Karma测试运行程序。

在向应用程序中添加功能时，可以使用--spec选项来指定是否希望Angular CLI还创建一个带有新功能示例单元测试的相应.spec.ts文件。

规格文件在src目录中与它们相应功能相同的目录中创建。 这使您可以在使用功能时轻松找到它们。

因此，运行应用程序的所有单元测试都意味着运行src目录内所有目录中以.spec.ts结尾的所有文件中指定的所有单元测试。

要运行所有单元测试，请运行：

$ ng test

以下输出将出现在您的控制台中：

$ ng test
[karma]: No captured browser, open http://localhost:9876/
[karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
[launcher]: Launching browser Chrome with unlimited concurrency
[launcher]: Starting browser Chrome
[Chrome 57.0.2987 (Mac OS X 10.12.0)]: Connected on socket 4OBzlsVyIPZyE1AYAAAA with id 41455596
Chrome 57.0.2987 (Mac OS X 10.12.0): Executed 3 of 3 SUCCESS (0.132 secs / 0.121 secs)

一个特殊的浏览器实例也将启动：

这是幕后发生的事情：

1. Angular CLI加载.angular-cli.json 。
2. Angular CLI使用.angular-cli.json指定的配置运行Karma。 默认情况下，这是位于应用程序根目录中的karma.conf.js 。
3. Karma将打开Karma配置中指定的浏览器。 默认情况下，浏览器设置为Google Chrome 。
4. 然后，业力指示浏览器（Chrome）使用业力配置中指定的测试框架运行src/test.ts 默认情况下，这是Jasmine框架 。 创建应用程序时，将自动创建文件src/test.ts 它已预先配置为加载和配置测试Angular应用程序并运行src目录中以.spec.ts结尾的所有spec文件所需的代码。
5. 业力报告测试结果到控制台。
6. Karma监视src文件中的更改，并在检测到文件更改时重复步骤4和5。

要结束该过程，可以按ctrl-c 。

如果您想了解有关测试Angular代码的更多信息，可以查看《 官方Angular测试指南》 。

运行端到端（E2E）测试

最初创建应用程序时，Angular CLI会自动为您配置Protractor 。

要运行端到端测试，请运行：

$ ng e2e

以下输出将出现在您的控制台中：

** NG Live Development Server is running on http://localhost:49152 **
Hash: e570d23ac26086496e1d
Time: 6087ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
I/file_manager - creating folder /Users/jvandemo/Projects/test/my-app/node_modules/protractor/node_modules/webdriver-manager/selenium
I/downloader - curl -o /Users/jvandemo/Projects/test/my-app/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.29.zip https://chromedriver.storage.googleapis.com/2.29/chromedriver_mac64.zip
I/update - chromedriver: unzipping chromedriver_2.29.zip
I/update - chromedriver: setting permissions to 0755 for /Users/jvandemo/Projects/test/my-app/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.29
I/launcher - Running 1 instances of WebDriver
I/direct - Using ChromeDriver directly...
Spec startedmy-app App✓ should display message saying app worksExecuted 1 of 1 spec SUCCESS in 0.523 sec.
I/launcher - 0 instance(s) of WebDriver still running
I/launcher - chrome #01 passed

一个特殊的浏览器实例也将启动：

这是幕后发生的事情：

1. Angular CLI加载.angular-cli.json 。
2. Angular CLI使用.angular-cli.json指定的配置运行Protractor。 默认情况下，这是位于应用程序根目录中的protractor.conf.js文件。
3. 量角器打开在量角器配置中指定的浏览器。 默认情况下，浏览器设置为Google Chrome 。
4. 然后，量角器指示浏览器（Chrome）运行e2e目录中所有以.e2e-spec.ts结尾的规范文件。
5. 量角器将测试运行的结果报告给控制台。

然后，该过程将在步骤5之后自动退出。

如果您想了解有关端到端测试E2E的更多信息，可以查看《 官方Angular测试指南》和量角器文档。

建立生产申请

运行ng serve会在开发过程中自动将Angular应用程序构建并捆绑到虚拟文件系统。

但是，当您的应用程序准备投入生产时，您将需要可以部署到服务器或云中的真实文件。

要构建并捆绑您的应用程序以进行部署，请运行：

$ ng build

命令的输出发送到控制台：

Hash: 59aaa9ef8eac5d46cdf8
Time: 5433ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.61 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.07 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

这是幕后发生的事情：

1. Angular CLI从.angular-cli.json加载其配置。
2. Angular CLI运行Webpack来构建和捆绑所有JavaScript和CSS代码。
3. 结果将写入Angular CLI配置中指定的outDir目录。 默认情况下，这是dist目录。

可用选项

• --aot ：启用提前编译
• --base-href ：字符串，在索引文件中使用的基本href
• --environment ：字符串，默认dev ，要使用的环境
• --output-path ：字符串，将输出写入的目录
• --target ：字符串，默认development ，要使用的环境
• --watch ：布尔值，默认为false ，监视文件中的更改并在检测到更改时重建。

目标

指定目标会影响构建过程的运行方式。 其值可以是以下之一：

• development ：默认模式，请勿缩小或缩小代码
• production ：最小化和丑化代码。

在生产模式下构建应用程序：

$ ng build --target=production

这将导致包被缩小，丑化并在其名称中具有哈希值：

Hash: 4dea6adc9ac01de3c11b
Time: 5588ms
chunk    {0} polyfills.2d45a4c73c85e24fe474.bundle.js (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.a64b48e56248eb808195.bundle.js (main) 20.8 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.205c7417e47c580a2c34.bundle.js (vendor) 1.1 MB [initial] [rendered]
chunk    {4} inline.310ccba0fff49a724c8f.bundle.js (inline) 0 bytes [entry] [rendered]

环境环境

环境使您可以指定设置以自定义应用程序行为。

您可以在.angular-cli.json文件中定义自己的环境。 默认值为：

• source ：在限定使用设置environments/environment.ts
• dev ：使用在environments/environment.ts定义的设置
• prod ：使用environments/environment.prod.ts prod中定义的设置。

在这里， environments/environment.ts等于：

export const environment = {production: false
};

并且environments/environment.prod.ts /environment.prod.ts等于：

export const environment = {production: true
};

默认情况下，构建过程将使用dev环境。

如果您指定其他环境，则构建过程将使用相应的环境：

# Uses environments/environment.ts
$ ng build# Also uses environments/environment.ts
$ ng build --environment=dev# Uses environments/environment.prod.ts
$ ng build --environment=prod

如您在src/main.ts看到的，您可以通过导入environments/environment从代码中访问环境设置：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';
import { environment } from './environments/environment';if (environment.production) {enableProdMode();
}platformBrowserDynamic().bootstrapModule(AppModule);

导入过程中，构建过程将确保提供正确的环境。

部署您的应用

从2017年2月9日起， ng deploy命令已从Angular CLI的核心中删除。 在这里。

退出您的应用程序

从v1.0开始，Angular CLI提供了一个命令来将您的应用程序与Angular CLI分离。

默认情况下，Angular CLI为您管理基础的webpack配置，因此您不必处理其复杂性。

如果您希望在任何给定时间手动配置Webpack，并且不再希望将Angular CLI与Angular应用程序一起使用，则可以运行：

$ ng eject

这将在您的控制台中生成以下输出：

==========================================================================================
Ejection was successful.To run your builds, you now need to do the following commands:- "npm run build" to build.- "npm run test" to run unit tests.- "npm start" to serve the app using webpack-dev-server.- "npm run e2e" to run protractor.Running the equivalent CLI commands will result in an error.==========================================================================================
Some packages were added. Please run "npm install".

这是幕后发生的事情：

1. ejected: true的属性ejected: true被添加到.angular-cli.json文件
2. 使用独立的Webpack配置在应用程序的根目录中生成一个webpack.config.js文件，因此您可以在没有Angular CLI的情况下构建项目
3. package.json的build脚本已更新，因此您可以运行npm run build来构建项目
4. package.json的test脚本已更新，因此您可以运行npm run test或npm test来运行单元测试
5. package.json的start脚本已更新，因此您可以运行npm run start或npm start来启动开发服务器
6. package.json的e2e脚本已更新，因此您可以运行npm run e2e来运行端到端测试。

弹出应用程序后，您可以根据自己的喜好手动更新Webpack配置，并且Angular CLI命令将不再起作用。

因此，如果由于某种原因要退出Angular CLI，则可以使用弹出命令。

展望未来

Angular CLI的路线图包含许多激动人心的即将发布的功能：

• 渐进式Web应用程序（PWA）支持
  Angular CLI将能够为您创建Web应用程序清单，生成App Shell并提供Service Worker脚本来缓存您的应用程序数据。
  在此处了解有关移动支持的更多信息 。
• 重构支持
  除了向应用程序中添加功能外，Angular CLI还可以让您重构现有功能，例如，移动组件或重命名服务。
• 升级支持
  Angular CLI将能够帮助您进行Angular升级。 由于Angular CLI对您的应用程序有语义上的了解，因此它将能够帮助您进行升级到较新版本的Angular所需的代码更改。
• 可扩展性
  改进的可扩展性支持，因此您可以创建自己的自定义加载项和部署脚本。
• 性能提升
  性能得到改善，因此Angular CLI变得更快。
• 库开发人员模式
  除了创建新的应用程序之外，Angular CLI还可以让您创建可供其他人使用的新库。

其中一些功能已经部分可用。 如果您想和他们一起玩，请查看GitHub存储库 。

摘要

Angular CLI是一个命令行界面（CLI），可自动执行您的开发工作流程。

今天，您已经可以使用Angular CLI进行以下操作：

• 创建一个新的Angular应用程序
• 运行具有LiveReload支持的开发服务器以在开发过程中预览您的应用程序
• 向现有的Angular应用程序添加功能
• 运行应用程序的单元测试
• 运行应用程序的端到端（E2E）测试
• 生成用于部署到生产的应用程序
• 将您的应用程序部署到服务器。

尽管从技术上讲，不需要使用Angular CLI来开发Angular应用程序，但它绝对可以提高代码质量，并节省大量时间和精力。

由于随着时间的推移会增加许多令人兴奋的功能，因此Angular CLI可能会成为开发Angular应用程序必不可少的工具。

要了解有关Angular CLI的更多信息，请查看官方网站和GitHub存储库 。

Tim Severien ， Vildan Softic和Joan Yin同行评审了《最终Angular CLI参考指南》。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

翻译自: https://www.sitepoint.com/ultimate-angular-cli-reference/

angular cli

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！