angular2 cli

This article has been updated for Angular v4 and Angular CLI v1.4

本文已针对Angular v4和Angular CLI v1.4更新

If you've ever gone through the or our over the past year, you'll know that a big part of getting started with Angular 2 is the setup.

如果您在过去的一年中曾经经历过或 ，那么您会知道的很大一部分就是设置。

It included things like:

它包括以下内容：

• Creating our app files
  创建我们的应用程序文件
• Configuring TypeScript and Typings
  配置打字稿和打字
• Adding script tags for
  • Angular 2
  • Rx.js
  • System.js
  为添加脚本标签
  • 角度2
  • Rx.js
  • System.js
• Configuring System.js
  配置System.js
• Creating our Angular 2 app component
  创建我们的Angular 2应用程序组件
• Bootstrapping our Angular 2 application
  引导我们的Angular 2应用程序

Talk about a lot! Thankfully, at , the Angular team announced a tool that will make creating and scaffolding Angular 2 applications incredibly easy.

谈论很多！ 值得庆幸的是，在 ，Angular团队宣布了一种工具，该工具将使创建和搭建Angular 2应用程序变得异常简单。

The Angular CLI

Angular CLI

The Angular CLI effectively takes all those configuration and setup steps shown above and condenses it down into one quick line:

Angular CLI有效地执行了上面显示的所有这些配置和设置步骤，并将其压缩为一条快速代码：

ng new scotchy-scotch

There are many things that the CLI can do so let's get it installed and walk through some features.

CLI可以执行许多操作，因此让我们进行安装并逐步了解一些功能。

( )

To install the CLI, we'll use .

要安装CLI，我们将使用 。

npm install -g @angular/cli

That's it! Now we can start using the CLI to build out our applications.

而已！ 现在，我们可以开始使用CLI来构建我们的应用程序。

( )

To start a new application, just run the command we saw earlier:

要启动新应用程序，只需运行我们之前看到的命令：

ng new scotchy-scotch

So what exactly does this do for us? Let's take a look at the newly generated folders and files:

那么这对我们到底有什么作用？ 让我们看一下新生成的文件夹和文件：

// end-to-end-tests|- e2e/  |----- app.e2e-spec.ts  |----- app.po.ts  |----- tsconfig.e2e.json// npm dependencies|- node_modules/// public facing app. built things go here. this wont show until we run a build|- dist/// where most of the work will be done|- src/  |----- app/      |----- app.component.css|html|spec.ts|ts      |----- app.module.ts  |----- assets/  |----- environments/      |----- environment.prod.ts|ts  |----- favicon.ico  |----- index.html  |----- main.ts  |----- polyfills.ts  |----- styles.css  |----- test.ts  |----- tsconfig.app.json  |----- tsconfig.spec.json  |----- typings.d.ts// overall configuration|- .angular-cli.json  // the main configuration file|- .editorconfig      // editorconfig which is used in some VS Code setups|- .gitignore|- karma.conf.js|- package.json|- protractor.conf.js|- README.md|- tsconfig.json|- tslint.json

It's important to take note of this directory structure and where the files are located because the application that the Angular CLI generates follows the recommended app structure and .

请务必注意此目录结构以及文件的位置，因为Angular CLI生成的应用程序遵循建议的应用程序结构和 。

The majority of our application is under src/app. This is where we will be working and everything that gets compiled and is available to our final application will be built to the public folder.

我们的大多数应用程序都在src/app 。 这是我们将努力和被编译并提供给我们最终的应用程序都将建成的public文件夹。

Learn from this stucture and style guide and incorporate these things into your own development. The Angular CLI will not only create the files and folders, it will also install any npm dependencies required.

从此结构和样式指南中学习，并将这些内容整合到您自己的开发中。 Angular CLI不仅会创建文件和文件夹，还将安装所需的所有npm依赖项。

Here is the default package.json that gets created:

这是创建的默认package.json ：

{
      "name": "scotchy-scotch",  "version": "0.0.0",  "license": "MIT",  "scripts": {
        "ng": "ng",    "start": "ng serve",    "build": "ng build",    "test": "ng test",    "lint": "ng lint",    "e2e": "ng e2e"  },  "private": true,  "dependencies": {
        "@angular/animations": "^4.0.0",    "@angular/common": "^4.0.0",    "@angular/compiler": "^4.0.0",    "@angular/core": "^4.0.0",    "@angular/forms": "^4.0.0",    "@angular/http": "^4.0.0",    "@angular/platform-browser": "^4.0.0",    "@angular/platform-browser-dynamic": "^4.0.0",    "@angular/router": "^4.0.0",    "core-js": "^2.4.1",    "rxjs": "^5.1.0",    "zone.js": "^0.8.4"  },  "devDependencies": {
        "@angular/cli": "1.2.1",    "@angular/compiler-cli": "^4.0.0",    "@angular/language-service": "^4.0.0",    "@types/jasmine": "~2.5.53",    "@types/jasminewd2": "~2.0.2",    "@types/node": "~6.0.60",    "codelyzer": "~3.0.1",    "jasmine-core": "~2.6.2",    "jasmine-spec-reporter": "~4.1.0",    "karma": "~1.7.0",    "karma-chrome-launcher": "~2.1.1",    "karma-cli": "~1.0.1",    "karma-coverage-istanbul-reporter": "^1.2.1",    "karma-jasmine": "~1.1.0",    "karma-jasmine-html-reporter": "^0.2.2",    "protractor": "~5.1.2",    "ts-node": "~3.0.4",    "tslint": "~5.3.2",    "typescript": "~2.3.3"  }}

All those dependencies are added and included in our src/index.html file. All of the setup that was in the Angular quickstart are now taken care of for us.

所有这些依赖项都已添加并包含在我们的src/index.html文件中。 现在，我们已经完成了Angular快速入门中的所有设置。

Notice that there's packages for testing with Karma and Protractor and it's great that the CLI handles the beginning setup for testing for us. (We all know adding in testing isn't the first thing on our list when starting new projects).

请注意，这里有用于使用Karma和Protractor进行测试的软件包，并且CLI为我们处理测试的初始设置非常好。 （我们都知道，在开始新项目时，添加测试并不是我们列表中的第一件事）。

Check out the src/index.html file and you'll see the beginning of our application with <app-root></app-root>. Our entire Angular app will get injected here.

检出src/index.html文件，您会看到<app-root></app-root>开头的应用程序。 我们整个Angular应用程序都将在这里注入。

System.js与Webpack (System.js vs webpack)

In previous CLI versions, we would also find the script tags for our dependencies here. Since the CLI is now using webpack, all of the following will be injected for us when serving (developing) or building (production) our application.

在以前的CLI版本中，我们还可以在此处找到依赖项的脚本标签。 由于CLI现在正在使用webpack，因此在服务（开发）或构建（生产）应用程序时，将为我们注入以下所有内容。

ng new选项 (ng new options)

Creating a new application has a few different options we can use. There are many options that can be seen by typing ng help. I'll show off a few of the important ones here:

创建一个新的应用程序可以使用一些不同的选项。 键入ng help可以看到许多选项。 我将在这里展示一些重要的东西：

• --directory: Specify the directory you want to create this project in
  --directory ：指定要在其中创建此项目的目录
• --style: (Default: css) The style file default extension. Possible values: css, scss, less, sass, styl(stylus). You can later change the value in ".angular-cli.json" (defaults.styleExt).
  --style ：（默认：css）样式文件的默认扩展名。 可能的值：css，scss，less，sass，styl（stylus）。 您以后可以在“ .angular-cli.json”（defaults.styleExt）中更改值。
• --prefix (Default: app) The prefix to use for all component selectors. You can later change the value in ".angular-cli.json" (apps[0].prefix)
  --prefix （默认：app）用于所有组件选择器的前缀。 您以后可以在“ .angular-cli.json”中更改值（apps [0] .prefix）
• --routing (Default: false) Generate a routing module.
  --routing （默认值：false）生成路由模块。

( )

Let's say you already have a folder that you've started working in. The ng init command is here so that you can use the current folder you're already working in.

假设您已经有一个已经开始使用的文件夹ng init命令在此处，以便您可以使用已经在使用的当前文件夹。

In the folder you are working in, run:

在您正在使用的文件夹中，运行：

ng init scotchy-scotch

( )

Another really cool thing that our CLI allows us to do is to serve our application in the browser. Previously, we would have to create a server using or create our own Node (or other) server.

CLI允许我们做的另一件非常酷的事情是在浏览器中提供应用程序。 以前，我们必须使用创建或创建我们自己的Node（或其他）服务器。

The Angular CLI let's us do this with one simple command:

Angular CLI让我们使用一个简单的命令执行此操作：

ng serve

Just like that, the Angular CLI will build a server for us with webpack and we can view it in browser at

就像这样，Angular CLI将使用webpack为我们构建服务器，我们可以在浏览器中通过对其进行查看

Angular CLI服务功能 (Angular CLI Serve Features)

What features are given to us with our new server?

新服务器为我们提供了哪些功能？

• Built with webpack: Reloads on saves
  使用webpack内置：在保存时重新加载
• Automatically routed for us
  自动为我们路由
• Found in the browser at
  在浏览器中的
• Simplicity and ease-of-mind
  简便易行
• Shows sizes of bundles needed for our app
  显示我们的应用所需的捆绑包大小

( )

This is where things get interesting. So far we've just created and instantiated a new project. The ng generate command can do so much for us:

这就是事情变得有趣的地方。 到目前为止，我们刚刚创建并实例化了一个新项目。 ng generate命令可以为我们做很多事情：

• Create a new component
  创建一个新组件
• Create a new directive
  创建一个新指令
• Create a new route
  建立新路线
• Create a new pipe
  创建一个新管道
• Create a new service
  创建一个新服务

That's a ton of functionality and helps speed up development. First let's talk about the options that we can use for all of the above.

这是一大堆功能，有助于加快开发速度。 首先，让我们讨论一下我们可以用于上述所有选项的选项。

ng generate选项 (ng generate options)

• --flat: Don't create the code in it's own directory. Just add all files to the current directory.
  --flat ：不要在自己的目录中创建代码。 只需将所有文件添加到当前目录即可。
• --route=<route>: Specify the parent route. Only used for generating components and routes.
  --route=<route> ：指定父路由。 仅用于生成零部件和路线 。
• --skip-router-generation: Don't create the route config. Only used for generating routes.
  --skip-router-generation ：不要创建路由配置。 仅用于生成路线 。
• --default: The generated route should be a default route.
  --default ：生成的路由应该是默认路由。
• --lazy: Specify if route is lazy. default true
  --lazy ：指定路由是否为惰性。 default true

Now we can run through each and see exactly what gets created and how the Angular CLI makes life easier.

现在，我们可以遍历每一个，并确切地看到创建了什么以及Angular CLI如何使生活更轻松。

( )

are the foundation of Angular development. Let's generate a new component:

是Angular开发的基础。 让我们生成一个新组件：

ng generate component hello# also can be simplified tong g component hello

Note: It's important to name your component simply. If a component is created with the name hello, these are the corresponding naming schemes:

注意 ：重要的是简单地命名您的组件。 如果使用名称hello创建组件，则它们是相应的命名方案：

• Folder: hello
  文件夹 ： hello
• Files: `hello.component.[css,html,spec.ts,ts]
  文件 ：`hello.component。[css，html，spec.ts，ts]
• Class: HelloComponent
  类 ： HelloComponent

If you use ng generate component HelloComponent, then your component class will be an undesirable HelloComponentComponent.

如果使用ng generate component HelloComponent ，则您的组件类将是不希望的HelloComponentComponent 。

Here are the files that get created:

以下是创建的文件：

|- src/  |----- app/    |----- hello/      |----- hello.component.css|html|spec.ts|ts

Our new component is relegated to its own folder within the src/app folder. We have all the parts (including tests) that we need for our new component.

我们的新组件被降级到src/app文件夹中自己的文件夹中。 我们拥有新组件所需的所有零件（包括测试）。

( )

In addition to generating components, we can generate modules. Modules are a way we can encapsulate similar functionality into a section of our app.

除了生成组件，我们还可以生成模块。 模块是一种将类似功能封装到应用程序部分中的方法。

By separating parts out into their own section, we can treat that module as its own compartment of our app with routing. This will become child routing for our app and then we can even lazy load it!

通过将各部分分成各自的部分，我们可以将该模块视为具有路由功能的应用程序自身部分。 这将成为我们应用程序的子路由，然后我们甚至可以延迟加载它！

To generate a module, we can use ng generate module. To add routing to it, we can add the --routing flag.

要生成模块，我们可以使用ng generate module 。 要为其添加路由，我们可以添加--routing标志。

ng generate module about --routing

We now have a brand new AboutModule that we can include in our main AppModule.

现在，我们有了一个全新的AboutModule ，可以将其包含在主AppModule 。

// about.module.tsimport {
      NgModule } from '@angular/core';import {
      CommonModule } from '@angular/common';import {
      AboutRoutingModule } from './about-routing.module';@NgModule({
       imports: [    CommonModule,    AboutRoutingModule  ],  declarations: []})export class AboutModule {
      }

We also have the routing for this module:

我们还有此模块的路由：

// src/app/about/about-routing.module.tsimport {
      NgModule } from '@angular/core';import {
      Routes, RouterModule } from '@angular/router';const routes: Routes = [];@NgModule({
       imports: [RouterModule.forChild(routes)],  exports: [RouterModule]})export class AboutRoutingModule {
      }

( )

So far we've only created a module. Let's say we wanted to build out components within this module. This AboutModule could have a UserComponent to display owner profiles for Scotch.

到目前为止，我们仅创建了一个模块。 假设我们要在此模块中构建组件。 此AboutModule可以具有一个UserComponent以显示Scotch的所有者配置文件。

Let's generate the component with a little trick. We can generate a component to be part of a module.

让我们生成一些技巧。 我们可以生成一个组件作为模块的一部分 。

ng g component about/user

We now have our new UserComponent and it lives inside the about folder. We can now use it and route to it using the provided files.

现在，我们有了新的UserComponent ，它位于about文件夹中。 现在，我们可以使用它，并使用提供的文件路由到它。

( )

The generate command comes with many other things we can generate:

generate命令还带有我们可以生成的许多其他东西：

Scaffold	Usage
	ng g component my-new-component
	ng g directive my-new-directive
	ng g pipe my-new-pipe
	ng g service my-new-service
	ng g class my-new-class
	ng g guard my-new-guard
	ng g interface my-new-interface
	ng g enum my-new-enum
	ng g module my-module

脚手架	用法
	ng g component my-new-component
	ng g directive my-new-directive
	ng g pipe my-new-pipe
	ng g service my-new-service
	ng g class my-new-class
	ng g guard my-new-guard
	ng g interface my-new-interface
	ng g enum my-new-enum
	ng g module my-module

( )

When we want to prepare our Angular app for deployment, we only need to run one command.

当我们要准备要部署的Angular应用程序时，我们只需要运行一个命令。

ng build

The build will take all of our files and bundle them into five main files. It will also generate everything into a dist folder. Go ahead and take a look in there and you'll see your deployment ready files. You'll even notice the index.html file that has all those scripts already injected for you.

构建将采用我们所有的文件，并将它们捆绑为五个主要文件。 它还会将所有内容生成到dist文件夹中。 继续浏览一下，您将看到准备就绪的文件。 您甚至会注意到已经为您注入了所有这些脚本的index.html文件。

Open that index.html file in browser and your Angular app works!

在浏览器中打开该index.html文件，您的Angular应用程序将运行！

生产建筑 (Building for Production)

We can also build for production to get some more efficiently sized bundles. Tree shaking goodness and more!

我们还可以为生产量身定制一些更有效尺寸的束。 树摇善良！

ng build --prod

提前编译 (Building with Ahead-of-Time Compilation)

We can also build with AOT to make sure our Angular app is compiled during build-time instead of in browser at run-time. This can help reduce the size of our app by more than half!

我们还可以使用AOT进行构建，以确保在构建时而不是在运行时在浏览器中编译Angular应用。 这可以帮助我们将应用程序的大小减少一半以上！

ng build --prod --aot

Once you do that, notice the difference in bundle sizes from the previous non-aot build.

完成此操作后，请注意与以前的非自动生成版本相比，捆绑包大小有所不同。

1.89MB vs 849kb! AOT FTW

1.89MB和849kb！ AOT FTW

( )

As the CLI get's more hashed out and more information, we'll be filling out this section with more commands and what they do. Some of these commands were a little buggy when we first tested out the CLI since it's in v1.0.0-beta.1 at the time of this writing.

随着对CLI的更多了解和更多信息，我们将在此部分中添加更多命令及其作用。 在我们初次测试CLI时，其中一些命令有些漏洞，因为在v1.0.0-beta.1时它位于v1.0.0-beta.1中。

Here's the list of commands that we can also run:

这是我们也可以运行的命令列表：

• ng test: Run unit tests with karma
  ng test：使用业力运行单元测试
• ng e2e: Run end-to-end tests with protractor
  ng e2e：使用量角器运行端到端测试
• ng get: Gets values for project
  ng get：获取项目的值
• ng set: Sets values for project
  ng set：设置项目的值
• ng version: Get the version of the CLI
  ng version：获取CLI的版本
• ng lint: Run to analyze code
  ng lint：运行分析代码
• ng doc: Generate docs for your project
  ng doc：为您的项目生成文档
• ng eject: Get access to the webpack configuration files
  ng弹出：访问Webpack配置文件

( )

The Angular CLI team has put together a section of the site called Stories that runs through popuplar real-life scenarios. Give it a look!

Angular CLI团队整理了一个名为Stories的网站部分，该部分贯穿流行的现实场景。 看看吧！

( )

The Angular CLI is an amazing tool and one that comes at a time when more and more people are getting into Angular 2 development. After all the announcments at , now is the time to dive in.

Angular CLI是一种了不起的工具，它是在越来越多的人开始进行Angular 2开发时出现的。 在所有公告之后，现在该是潜入的时候了。

The CLI makes diving in that much more accessible since setup, which took up the majority of the time for first-time developers is now handled for us.

自设置以来，CLI使潜水变得更容易进行，而现在，这为我们处理了初学者的大部分时间。

翻译自:

angular2 cli