使用VSCode搭建Angular 7开发环境并运行应用程序

2 年 ago
逸, 科
4 minutes

简要概述

我本来正在写一篇关于Tesseract和Raspberry Pi的文章，但突然决定使用Angular，开发过程中出现了许多疑问。现在开发工作暂时平稳下来了，所以我想把从搭建Angular到执行应用程序的全过程记录成文章，作为备忘录。关于在开发过程中遇到的问题，我想单独写一篇文章来发布。

假设

Angular是基于TypeScript的Web应用程序框架。
常常和React和Vue.js进行比较。
由于本次开发使用的是Angular，所以只涉及到了Angular，但如果你对其他框架有兴趣，也可以进行调查。
本文总结了进行Angular开发所需的前提条件和构建开发工具的步骤。
需要说明的是，本文使用Visual Studio Code作为开发编辑器，如果你想使用其他编辑器，请随意更换。

安装

在这篇文章中，我们需要安装 npm 来安装 Angular CLI。

直到安装Node.js

如果不需要进行版本管理，则直接下载和安装Node.js即可。但如果进行应用开发的话，一般会经常进行版本管理。因此，在这里不仅要安装Node.js，还需要一起安装版本管理工具。

1. 如果是Mac的情况

我认为在Mac上使用nodebrew作为版本管理工具的情况很常见。
为了安装nodebrew，需要先安装Homebrew，因此我会安装这两个工具。

1.1. 安装自制软件 (homebrew)

在homebrew的官方网站上有安装步骤指南。

启动终端后，执行以下命令：
注意：安装步骤和执行命令可能会有所变化，请尽量查看官方网站并按照那里的步骤执行。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

执行完成后，进行版本确认以确认安装成功。

brew --version

# インストールされている場合下記が出力される
Homebrew 2.1.4
Homebrew/homebrew-core (git revision 35b8; last commit 2019-05-30)

1.2. 安装 nodebrew

1.2.1. 安装
确认已安装Homebrew，然后安装nodebrew。

brew install nodebrew

1.2.2. 设置nodebrew的路径

安装后的初始状态下，由于没有设置nodebrew路径，需要将执行文件的路径添加到环境变量PATH中进行上述设置。通过这样的设置，可以在终端上执行”nodebrew xx”这样的命令。

# home/.bash_profileが作成されていない場合、homeディレクトリに移動後に先にこちらのコマンドを実行する
touch ~/.bash_profile

# vimで.bash_profileを編集する
vim ~/.bash_profile

# 実行直後にiキーを押して挿入モードに移行後、以下の行を追加
# 追加後にEscキーを押してノーマルモードに戻った後、:wqで保存してvimを終了させる
export PATH=$HOME/.nodebrew/current/bin:$PATH

执行完之后，重新加载.bash_profile文件。

source ~/.bash_profile

完成后，请确认已成功安装。

nodebrew --version

执行以下命令以安装或切换到最新版本或指定版本的Node.js：

# 最新バージョンをインストールする場合
nodebrew install-binary latest

# バージョンを指定してインストールする場合
nodebrew install-binary 12.4.0

# 現在インストール可能なバージョンを表示する
nodebrew ls-remote

〜省略〜
v11.0.0   v11.1.0   v11.2.0   v11.3.0   v11.4.0   v11.5.0   v11.6.0   v11.7.0
v11.8.0   v11.9.0   v11.10.0  v11.10.1  v11.11.0  v11.12.0  v11.13.0  v11.14.0
v11.15.0  

v12.0.0   v12.1.0   v12.2.0   v12.3.0   v12.3.1   v12.4.0

如果 `nodebrew install-binary latest` 失败，事先创建一个目录

解决 Node.js 安装失败的解决方案（没有这个文件或目录）

# ホームディレクトリで実行する
mkdir -p ~/.nodebrew/src

完成后，确认安装的版本。

nodebrew list

# 現在インストールされているバージョンの一覧と、currentに現在使用しているバージョンが表示される
v12.2.0
v12.4.0

current: v12.2.0

如果是初次安装或者切换版本的情况下，请使用以下命令。

nodebrew use  v12.4.0

# 正常に切り替えができているかを確認する
nodebrew list

# 切り替えができている場合currentが指定したものに切り替わっている
v12.2.0
v12.4.0

current: v12.4.0

1.2.4. 设置Node.js的PATH。

如果保持上述内容不变，那么无法直接执行node和npm命令，因此需要设置环境变量来使其可执行。

# vimで.bash_profileを編集する
vim ~/.bash_profile

# 実行直後にiキーを押して挿入モードに移行後、以下の行を追加
# 追加後にEscキーを押してノーマルモードに戻った後、:wqで保存してvimを終了させる
export PATH=$HOME/.nodebrew/current/bin:$PATH

执行完毕后，重新加载.bash_profile。

source ~/.bash_profile

完成后，请确保安装正常。

node --version

# パスが正常に通っている場合バージョンが表示される
v12.2.0

npm --version

# パスが正常に通っている場合バージョンが表示される
6.9.0

2. 在Windows的情况下

在Windows10中，可以使用WSL来进行构建，就像在Mac中使用homebrew + nodebrew一样，但如果不使用WSL或者不是在Windows10上，就需要另一种版本管理工具。
据我的调查，nodist似乎是主流，因此本次我们将以此为基础进行说明。

2.1. 安装nodist

2.1.1. 安装
nodist官方网站

nodist_インストール手順_01
nodist_インストール手順_02

在安装完成后，执行以下命令以确保刚刚安装的nodist版本显示出来。

nodist -v
0.9.1

2.1.2. 切换 Node.js 和 npm 的版本

您可以通过以下命令查看当前可安装的Node.js版本列表。

nodist dist

安装指定版本的Node.js。

nodist + 12.2.0

在安装完成后，切换Node.js的版本。

nodist 12.2.0

安装适用于最新的Node.js版本的npm
附注
如果nodist版本为0.8.8，则据说下面的命令会失败
请在最新版本上执行它

nodist npm match

2.1.3. 确认版本

请分别执行以下命令，确认node和npm版本正确，并检查安装是否已完成。

node --version

npm --version

nodist ls

安装VSCode

为了进行Angular代码的修正，需要安装VSCode。

1. 安装

VSCode_インストール_01

1.1. 关于Mac的情况
下载VSCode-darwin-stable.zip文件并进行解压操作
解压后会生成Visual Studio Code.app文件，将其存放在应用程序文件夹中，并执行。

在Windows系统下，将会下载”VSCodeUserSetup-x64-1.35.1.exe”文件，然后执行它。

install_00.png
install_01.png
install_02.png
install_03.png
install_04.png
install_05.png

如果安装顺利完成，请点击“完了”以结束。

2. 添加扩展功能

完成安装 VSCode 后，安装扩展功能以便于进行 Angular 开发。

2.1. 添加扩展功能的方法

Extention_install_01

2.2. 必要的擴展功能 de

在使用Angular进行开发时，有一个方便易用的扩展插件套装可以一次性安装。Angular Essentials是这个扩展插件。安装了这个扩展插件后，下面列出的所有扩展插件都会被同时安装。如果只想安装个别或部分插件，则需要每个人自行安装。

    • Angular2 Inline

 

    • Angular Language Service

 

    • Angular Snippets

 

    • Angular Console

 

    • Chrome Debugger

 

    • Editor Config

 

    • Material Icon Theme

 

    • npm

 

    • Peacock

 

    • Prettier

 

    • tslint

 

    Winter is Coming

2.3. 将日本语言化

如果想实现日语化，请安装以下的扩展功能。

Visual Studio Code 的日语语言包

2.4. 其他推荐

在下面的文章中，介绍了一些非Angular也非常实用的扩展功能，如果有需要的话，请进行安装。
推荐使用的24种VSCode扩展功能（以及一些小技巧）

3. 更改设置

如果有在VSCode中需要进行更改的最佳配置，请随时补充。

安装 Angular CLI

完成上述的步骤后，我们将进行Angular CLI的安装。
本次安装将进行版本7的安装，但由于版本8已发布，根据情况建议您安装版本8。
https://angular.jp/guide/releases

1. 关于全局安装和本地安装的问题

如果进行多个开发项目，可能会发现不同的 Angular 版本被用于不同的项目。当你希望使用与全局 Angular 不同的 Angular 版本，或者想要安装多个版本时，建议你将其安装在本地。

2. 全球安装（如果不安装在本地，则必须）

2.1. 安装

用以下命令将Angular全局安装：

npm install -g @angular/cli

# バージョンを指定する場合は以下のコマンドを実行
npm install -g @angular/cli@7.3.9

# 途中で匿名の使用情報データを使用するかを確認されるのでNを入力
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. (y/N)

确认版本。

如果安装完成，可以使用以下命令来确认版本。

ng --version

# 正常にインストールされている場合以下が出力される
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.3.9
Node: 12.2.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.9
@angular-devkit/core         7.3.9
@angular-devkit/schematics   7.3.9
@schematics/angular          7.3.9
@schematics/update           0.13.9
rxjs                         6.3.3
typescript                   3.2.4

3. 本地安装（可选）

经过尝试，即使全局安装也似乎可以在本地安装。

3.1. 安装

创建文件夹并在创建计划中的项目后，将其移至该文件夹。

mkdir 【プロジェクト名】
cd 【プロジェクト名】

完成后，安装Angular（不需要使用-g选项）。

npm install @angular/cli

# バージョンを指定する場合は以下のコマンドを実行
npm install @angular/cli@7.3.9

# 途中で匿名の使用情報データを使用するかを確認されるのでNを入力
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. (y/N)

3.2. 确认版本

如果安装完成，请使用以下命令确认版本：
※ 为了安装与全局版本不同的版本，请安装ver.8

npx ng --version

# 正常にインストールされている場合以下が出力される

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.4
Node: 12.2.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.4
@angular-devkit/core         8.0.4
@angular-devkit/schematics   8.0.4
@angular/cli                 8.0.4
@schematics/angular          8.0.4
@schematics/update           0.800.4
rxjs                         6.4.0

创建并执行项目确认

为了确认 Angular CLI 已成功安装，我们将创建一个项目并执行它。项目将在创建后立即生成可执行状态，因此我们希望在不做任何更改的情况下先尝试执行。

1. 创建项目

使用下列命令创建一个新的工作空间。

# グローバルにインストールした場合
ng new 【出力パスを含めたプロジェクト名】

# 例
ng new C:/Angular/AngularProject

# ローカルにインストールした場合
# プロジェクト直下に移動していない場合は移動しておくこと
cd 【プロジェクト名】
npx ng new 【プロジェクト名】 --directory=./

2019年10月23日更新：
如果您使用nodist通过Windows安装Node.js，并在本地进行安装时执行npx命令，可能会出现’npx’被识别为内部命令或外部命令、可执行程序或批处理文件的情况。这时，请在执行项目创建之前先运行npm install -g npx命令。

如果在创建时要添加路由功能，请输入”y”。
如果添加了路由功能，则会在工作空间中添加app-routing.module.ts。

Would you like to add Angular routing? (y/N)

如果选择使用扩展了CSS的元语言进行编写，除了CSS之外，本次选择SCSS。

? Which stylesheet format would you like to use? (Use arrow keys)
  CSS 
❯ SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ]

这些设定会等同于设置以下选项

# グローバルの場合
ng new 【出力パスを含めたプロジェクト名】 --routing=true --style=scss

# ローカルの場合
npx ng new 【プロジェクト名】 --directory=./ --routing=true --style=scss

在执行命令后，请确认工作空间已成功创建。

进行项目

打开VSCode并打开之前创建的工作区。在这个例子中，选择“打开文件夹”，然后选择C:/Angular/AngularProject，并点击“打开”按钮。

Angularプロジェクトの起動_01

点击”综合终端”界面的”终端”选项卡，并执行以下命令后，在浏览器中打开http://localhost:4200。

# グローバルの場合
ng serve

# ローカルの場合
npx ng serve

# 起動時に自動的に対象のアプリケーションをブラウザに開きたい場合はオプションをつける
ng serve --open
terminal_01

如果没有显示综合终端，请点击菜单中的“显示”、“终端”来显示它。

terminal_02
実行画面

自动修整

在上述的操作中，Angular本身的环境已经配置完毕。
如果只是进行开发，上述设置就足够了，但是在多人协作开发的情况下，遵循代码风格就显得很重要。
因此，在开发过程中将自动进行语法检查。
以下是在每个项目创建时需执行的操作。
将每个项目单独设置的原因是为了避免与使用其他语言时相悖的设置混合在一起。

设置 TSLint

点击菜单中的“Code”（如果是Windows系统，则为“文件”），然后点击“基本设置”、“设置”
打开设置窗口后，点击“工作区”选项卡，然后点击任意项目下的“编辑settings.json”

config_01

打开settings.json文件后，通过以下方式修改，使得TypeScript可以进行Lint检查。

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "tslint.configFile": "tslint.json",
  "[typescript]": {
    // ファイル保存時に自動フォーマットをしないようにする
    "editor.formatOnSave": false,
    // 貼り付けた内容に対して自動フォーマットをしないようにする
    "editor.formatOnPaste": false,
    // 入力後に行に対して自動フォーマットをしないようにする
    "editor.formatOnType": false,
    "editor.codeActionsOnSave": {
      // 保存時に対して行われるアクションにtslintを設定する
      "source.fixAll.tslint": true
    }
  }
}

如果想要为TypeScript设置规则，需要修改[项目目录]/tslint.json。
※如有需要添加的更好的规则，请随时进行追加。

在Windows10上运行npx或ng命令失败。

如果执行了”npx ng generate component”这样的命令，而出现了”此系统禁用了脚本执行，因此～”的错误，那么是因为受到了脚本执行策略的限制。

要检查是否有限制，需要在启动 PowerShell 后执行以下代码。

>Get-ExecutionPolicy
# スクリプト実行に制限あり
Restricted

如果允许脚本执行，请更改为允许脚本执行的执行策略，如RemoteSigned。
※避免使用Bypass，因为它会增加安全风险。

若要更改执行策略，请以管理员权限启动PowerShell，并执行以下代码。

>Set-ExecutionPolicy RemoteSigned
# 実行後、ポリシーを再確認する。変更に成功している場合は指定したポリシーが表示される
>Get-ExecutionPolicy
RemoteSigned

最后

如果成功运行应用程序，则建议按照Angular官方教程依次进行，以加深对Angular的理解。

请参考

以下是在中国的原生的中文方式来改写上述内容的选项：

1. 在Mac上安装node.js的步骤。
【Mac】安装node.js的方法
整理.bash_profile和.bashrc文件
解决Node.js安装失败的解决方案（没有这样的文件或目录）
使用nodist进行Node.js版本管理
关于无法在nodist上升级到npm6.2.0及更高版本的故事
在Mac上安装VSCode（Visual Studio Code）的方法
在Windows上安装VSCode（Visual Studio Code）的方法
【Mac】构建Angular开发环境
必备的用于Angular开发的VSCode扩展
24个推荐的VSCode扩展（以及一些小贴士）
【TypeScript】在VSCode中保存文件时执行tslint.json中的格式化
创建Angular6项目后首先要做的事情
在不全局安装Angular CLI的情况下使用ng new的方法
您可以使用npx来执行本地软件包！
【Windows10】使用nodist安装node
快速执行Powershell的方法

bannerAds