05test 中文文档教程

Question

Angular CLI

CLI for Angular applications based on the ember-cli project.

Note

如果您想合作，请查看我们的问题列表。

Prerequisites

CLI 和生成的项目都具有需要 Node 6.9.0 或更高版本的依赖项 使用 NPM 3 或更高版本。

Table of Contents

• Installation
• Usage
• Generating a New Project
• Generating Components, Directives, Pipes and Services
• Updating Angular CLI
• Development Hints for working on Angular CLI
• Documentation
• License

Installation

安装前：请阅读先决条件

npm install -g @angular/cli

Usage

ng help

Generating and serving an Angular project via a development server

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

导航至http://localhost:4200/。 如果您更改任何源文件，该应用程序将自动重新加载。

您可以使用两个命令行选项配置开发服务器使用的默认 HTTP 主机和端口：

ng serve --host 0.0.0.0 --port 4201

Generating Components, Directives, Pipes and Services

您可以使用 ng generate（或只是 ng g）命令生成Angular 组件：

ng generate component my-new-component
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ./newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp

您可以在下表中找到所有可能的蓝图：

Scaffold	Usage

angular-cli 会自动在<代码>应用程序模块.ts。 如果您需要将此引用添加到另一个自定义模块，请按照以下步骤操作：

1. ng g module new-module to create a new module
2. call ng g component new-module/new-component

这应该将新的 component、directive 或 pipe 引用添加到new-module 你已经创建了。

Updating Angular CLI

如果您使用的是 Angular CLI 1.0.0-beta.28 或更低版本，则需要卸载 angular-cli 包。 由于包的名称和范围从 angular-cli 更改为 @angular/cli，所以应该这样做：

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

要将 Angular CLI 更新到新版本，您必须同时更新全局包和项目的本地包。

全局包：

npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest

本地项目包：

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

如果您要从测试版或 RC 版本更新到 1.0，请查看我们的 1.0 更新指南。

您可以在 GitHub 上的发布选项卡中找到有关版本之间更改的更多详细信息。

Development Hints for working on Angular CLI

Working with master

git clone https://github.com/angular/angular-cli.git
cd angular-cli
npm link

npm link 与 npm install -g 非常相似，除了它不是下载包 从 repo 中，刚刚克隆的 angular-cli/ 文件夹成为全局包。 此外，这个存储库发布了几个包，我们使用特殊的逻辑来加载所有这些包 关于开发设置。

对 angular-cli/ 文件夹中文件的任何更改都会立即影响全局 @angular/cli 包， 允许您快速测试对 cli 项目所做的任何更改。

现在您可以通过命令行使用 @angular/cli：

ng new foo
cd foo
npm link @angular/cli
ng serve

npm link @angular/cli 是必需的，因为默认情况下全局安装的 @angular/cli 只是加载 从 npm 远程获取的项目中的本地 @angular/cli。 npm link @angular/cli 将全局 @angular/cli 包符号链接到本地​​ @angular/cli 包。 现在，您之前克隆的 angular-cli 位于三个位置： 您将其克隆到的文件夹、存储全局包的 npm 文件夹以及您刚刚创建的 Angular CLI 项目。

您还可以使用 ng new foo --link-cli 自动链接 @angular/cli 包。

请阅读官方 npm-link 文档 和 npm-link cheatsheet 了解更多信息。

要运行 Angular CLI 测试套件，请使用 node tests/run_e2e.js 命令。 它还可以接收一个文件名以仅运行该测试（例如 node tests/run_e2e.js tests/e2e/tests/build/dev-build.ts）。

作为测试过程的一部分，将构建和链接所有包。 测试完成后，您需要重新运行 npm link 以重新链接开发 Angular CLI 环境。

Documentation

Angular CLI 的文档位于此存储库的 wiki 中。

License

麻省理工学院