搭建Angular应用开发环境

2 年 ago

清, 宇

2 minutes

我希望在本文中解释一下涉及Angular应用程序开发方面的项目运行环境和所需的技术要点。

首要条件，建议，假设

最近，越来越多的使用Node.js来运行类似混合项目的案例。这次我也想从Node.js中运行Angular应用程序，所以首先，在创建项目之前，让我们安装Node.js。

安装Node.js。

需要按照以下顺序安装Node.js，并且必须先安装Node.js版本管理工具npm。安装方法如下。

# nodebrewをインストル
$ brew install nodebrew
# Node.jsとnpmのインストール
$ nodebrew install-binary latest
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
# 以下が表示
  Fetching: https://nodejs.org/dist/v11.12.0/node-v11.12.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

使用上述命令将安装最新版本。
启用Node.js。

# バージョンの一覧を確認
$ nodebrew list
# バージョンの一覧が表示
  v11.12.0
  current: none
# current: noneとなっているため、必要なバージョンを有効化する。
  nodebrew use v11.12.0
# バージョンの一覧を再確認
$ nodebrew list
# 以下が表示
  v11.12.0
  current: v11.12.0

为了使nodebrew易于使用，将环境路径设置为通用。
确认已安装的结果。

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
# node.jsがインストル済かどうかを確認
  node -v
# 以下が表示
  v11.12.0
# npmがインストル済かどうかを確認
$ npm -v
# 以下が表示
  6.7.0

当出现上述类似的每个版本号时，表示Node.js的安装已完成。

安装AngularCLI

使用以下命令安装AngulerCLI。

$ npm install -g @angular/cli
# 以下の内容が表示されたら、インストールがOK
  + @angular/cli@7.3.8
  added 363 packages from 197 contributors in 22.591s

将VSCode与其他应用程序进行连接

在VSCode中，安装Angular扩展功能”Angular Essentials”。这个扩展功能可以使得Angular的开发更加容易。

安装方法
VSCode的扩展功能→Angular Essentials→安装。

Angular Essentials包括的扩展功能。

Angular Inline

– Angular Material主题

?自动导入
Auto Import扩展是一个在Typescript和TSX中运行的扩展，类似于WebStorm，可以自动添加导入语句，从而加快开发速度。

安装方法
VSCode的扩展功能→Auto Import→安装

创建Angular应用

我将使用VSCode的终端创建一个Angular应用程序。

$ ng new coolesson

启动服务器。

$ cd coolesson
$ ng serve 
# 以下が表示されます
  ** Angular Live Development Server is listening on localhost:4200, open your browser on 
  http://localhost:4200/ **
  Date: 2019-04-24T13:12:14.814Z
  Hash: a27f36c54306bf454f91
  Time: 9382ms
  chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] 
  [rendered]
  chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
  chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
  chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
  chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
  chunk {vendor} vendor.js, vendor.js.map (vendor) 3.77 MB [initial] [rendered]