创建Web应用程序的Angular CLI开发环境备忘录，用于在MacOS上搭建

2 年 ago

文, 翔

3 minutes

Angular CLI 是什么

这是一个使用Angular进行开发的命令行工具。在使用Angular时，基本上都会使用它，有许多优点。

この点について考える必要はなくなる
保守性が向上する
環境構築が簡単にできる様になる
ビジネスロジックの実装に素早くすすめる

安装 Angular CLI 的方法

npm install -g @angular/cli

备忘录：在尝试通过npm安装Angular CLI时，如果出现EEXIST：文件已存在的错误，请进行以下处理。

这次版本将是 @angular/cli@10.0.1。

创建一个项目

确定项目名称

这次虽然很普通，但让我们试试我的应用。

命令

% ng new my-app

当输入↑命令时，将显示如下的问题提示。
请回答。

? Would you like to add Angular routing? (y/N)
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                         ]

然后，将会生成如下的文件。

CREATE probless/README.md (1026 bytes)
CREATE probless/.editorconfig (274 bytes)
CREATE probless/.gitignore (631 bytes)
CREATE probless/angular.json (3670 bytes)
CREATE probless/package.json (1258 bytes)
CREATE probless/tsconfig.base.json (458 bytes)
CREATE probless/tsconfig.json (475 bytes)
CREATE probless/tslint.json (3184 bytes)
CREATE probless/.browserslistrc (852 bytes)
CREATE probless/karma.conf.js (1020 bytes)
CREATE probless/tsconfig.app.json (292 bytes)
CREATE probless/tsconfig.spec.json (338 bytes)
CREATE probless/src/favicon.ico (948 bytes)
CREATE probless/src/index.html (294 bytes)
CREATE probless/src/main.ts (372 bytes)
CREATE probless/src/polyfills.ts (2835 bytes)
CREATE probless/src/styles.styl (80 bytes)
CREATE probless/src/test.ts (753 bytes)
CREATE probless/src/assets/.gitkeep (0 bytes)
CREATE probless/src/environments/environment.prod.ts (51 bytes)
CREATE probless/src/environments/environment.ts (662 bytes)
CREATE probless/src/app/app-routing.module.ts (246 bytes)
CREATE probless/src/app/app.module.ts (393 bytes)
CREATE probless/src/app/app.component.styl (0 bytes)
CREATE probless/src/app/app.component.html (25757 bytes)
CREATE probless/src/app/app.component.spec.ts (1065 bytes)
CREATE probless/src/app/app.component.ts (213 bytes)
CREATE probless/e2e/protractor.conf.js (869 bytes)
CREATE probless/e2e/tsconfig.json (299 bytes)
CREATE probless/e2e/src/app.e2e-spec.ts (641 bytes)
CREATE probless/e2e/src/app.po.ts (301 bytes)
⠼ Installing packages...
✔ Packages installed successfully.
    Successfully initialized git.

启动项目

$ cd my-app
$ ng serve

当您输入上述命令时，将显示以下类似的文本。

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/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 esm2015Compiling @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

chunk {main} main.js, main.js.map (main) 60.6 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.9 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.64 MB [initial] [rendered]
Date: 2020-07-09T08:47:41.158Z - Hash: 485f10dac3e8cce82aab - Time: 8120ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

编译将不断进行，可以在浏览器中通过 localhost:4200 进行确认。

一旦这样，我们就可以建立一个适用的开发环境了。