MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Node.js安装为Angular开发做准备

2021-04-275.5k 阅读

1. 为什么要在Angular开发中使用Node.js

在深入探讨Node.js的安装之前，我们先来了解一下为什么Node.js对于Angular开发至关重要。Angular是一个基于JavaScript的前端应用程序框架，而Node.js是一个基于Chrome V8引擎的JavaScript运行时环境。Node.js使得JavaScript能够在服务器端运行，这为Angular开发带来了许多优势。

首先，Angular CLI（命令行界面）是Angular开发中不可或缺的工具，它依赖于Node.js环境。Angular CLI可以帮助我们快速创建Angular项目、生成组件、服务等代码结构，并且提供了诸如开发服务器、构建、测试等一系列强大功能。没有Node.js，Angular CLI就无法运行，我们也就无法高效地进行Angular项目的开发。

其次，Node.js丰富的生态系统为Angular开发提供了大量的第三方模块。例如，在构建Angular应用时，我们可能需要使用webpack来进行模块打包，而webpack是一个基于Node.js的工具。通过npm（Node.js的包管理器），我们可以轻松地安装和管理这些依赖模块，极大地提高开发效率。

2. 安装Node.js

2.1 Windows系统下安装Node.js

2.2 macOS系统下安装Node.js

  • 使用Homebrew安装： Homebrew是macOS上常用的包管理器。如果你的系统还没有安装Homebrew，可以在终端中运行以下命令进行安装： 
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    安装好Homebrew后，在终端中输入以下命令安装Node.js： 
    brew install node
    Homebrew会自动下载并安装Node.js及其依赖。安装完成后，Homebrew会提示安装成功的信息。
  • 验证安装： 打开终端，输入： 
    node -v
    查看Node.js版本号。再输入： 
    npm -v
    查看npm版本号。如果都能正确输出版本号，说明Node.js在macOS系统上安装成功。
  • 使用Node.js官方安装包： 也可以从Node.js官方网站下载适用于macOS的.pkg安装包。下载完成后，双击安装包启动安装向导。按照安装向导的提示逐步进行安装，安装过程中会提示输入管理员密码以完成安装。安装完成后，同样在终端中通过“node -v”和“npm -v”命令验证安装。

2.3 Linux系统下安装Node.js

  • 基于Debian或Ubuntu系统： 对于基于Debian或Ubuntu的系统，首先更新系统软件包列表： 
    sudo apt update
    然后添加Node.js官方的APT源。可以通过以下命令添加： 
    curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
    这个命令会自动根据你的系统配置合适的Node.js源。接着安装Node.js： 
    sudo apt install -y nodejs
    安装完成后，在终端输入“node -v”和“npm -v”验证安装。
  • 基于CentOS系统： 在CentOS系统上，先安装EPEL（Extra Packages for Enterprise Linux）仓库，因为Node.js在默认的CentOS仓库中没有提供。可以使用以下命令安装EPEL： 
    sudo yum install epel - release
    安装好EPEL后，安装Node.js： 
    sudo yum install nodejs
    安装完成后，同样通过“node -v”和“npm -v”命令验证安装。

3. Node.js环境配置

3.1 设置npm镜像源

npm默认的镜像源在国外，有时候下载速度会很慢。为了提高下载速度，我们可以将npm的镜像源设置为国内的镜像源，例如淘宝的npm镜像源。在命令行中输入以下命令来设置镜像源：

npm config set registry https://registry.npm.taobao.org

设置完成后，可以通过以下命令检查镜像源是否设置成功：

npm config get registry

如果输出为“https://registry.npm.taobao.org”，则说明设置成功。

3.2 全局安装常用工具

在Angular开发中，有一些工具是需要全局安装的，这样在系统的任何目录下都可以使用这些工具。例如，我们需要全局安装Angular CLI。在命令行中输入以下命令进行全局安装：

npm install -g @angular/cli

“-g”参数表示全局安装。安装完成后，可以通过以下命令检查Angular CLI是否安装成功：

ng --version

如果能正确输出Angular CLI的版本号，说明安装成功。

4. 使用Node.js和Angular CLI创建项目

4.1 创建一个新的Angular项目

在安装好Node.js和Angular CLI后，就可以开始创建Angular项目了。打开命令行，切换到你想要创建项目的目录，例如：

cd C:\projects

然后使用Angular CLI创建一个新的项目，命令如下：

ng new my - app

这里“my - app”是项目的名称，你可以根据自己的需求修改。在创建项目的过程中，Angular CLI会询问一些问题，例如是否使用路由（Routing）、选择CSS预处理器等。如果不需要使用路由，可以输入“n”，对于CSS预处理器，如果没有特别需求，保持默认的CSS即可。

4.2 启动Angular开发服务器

项目创建完成后，进入项目目录：

cd my - app

然后启动Angular开发服务器，命令如下：

ng serve

这会启动一个本地开发服务器，默认监听在“http://localhost:4200”。在浏览器中打开“http://localhost:4200”，就可以看到你刚刚创建的Angular应用的初始页面。当你在项目中修改代码时，开发服务器会自动检测到变化并实时刷新页面，方便你进行开发调试。

4.3 项目结构分析

Angular项目创建后，有一个特定的目录结构。以下是一个基本的Angular项目目录结构分析：

  • src目录：这是项目的源代码目录，所有的应用代码都放在这里。
    • app目录：包含应用的组件、服务等核心代码。例如，“app.component.ts”是应用的根组件，所有其他组件通常都嵌套在根组件之下。
    • assets目录：用于存放静态资源，如图像、字体、JSON文件等。
    • environments目录：包含不同环境的配置文件，如“environment.ts”用于开发环境配置，“environment.prod.ts”用于生产环境配置。这些配置文件可以用于设置API地址等不同环境下可能变化的参数。
  • node_modules目录：存放项目的所有依赖模块。npm安装的各种包都会放在这个目录下。项目运行时，Node.js会从这里加载所需的模块。
  • .angular - cli.json：这是Angular CLI的配置文件，用于配置项目的各种设置，如项目名称、构建输出目录、样式文件等。在Angular 6及以上版本，该文件已被“angular.json”取代，功能更加强大且配置更灵活。例如，在“angular.json”中可以配置不同的构建目标，如开发构建和生产构建的不同参数。
  • package.json：记录了项目的依赖包信息以及一些脚本命令。例如，“dependencies”字段列出了项目运行时需要的依赖包，“devDependencies”字段列出了开发过程中需要的依赖包，如测试框架、代码检查工具等。“scripts”字段定义了一些可以通过npm运行的脚本，比如“npm start”实际上是运行了“ng serve”命令。

5. Node.js在Angular开发中的深入应用

5.1 使用Node.js进行后端模拟

在前端开发过程中，有时后端API还未开发完成，或者为了便于独立测试前端功能，我们可以使用Node.js搭建一个简单的后端模拟服务器。例如，使用Express框架（一个基于Node.js的流行的Web应用框架）来创建一个模拟API。 首先，确保已经全局安装了Express（如果没有安装，可以使用“npm install -g express”命令安装）。然后在项目根目录下创建一个新的目录，例如“server”，进入该目录并初始化一个新的Node.js项目：

mkdir server
cd server
npm init -y

“npm init -y”命令会使用默认设置初始化一个“package.json”文件。接着安装Express：

npm install express

创建一个新的文件，例如“server.js”，编写以下代码：

const express = require('express');
const app = express();
const port = 3000;

// 模拟一个GET请求的API
app.get('/api/data', (req, res) => {
  const data = { message: 'This is mock data from Node.js server' };
  res.json(data);
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

在上述代码中，我们创建了一个简单的Express应用，监听在3000端口，并定义了一个“/api/data”的GET请求API，返回一个包含消息的JSON数据。在命令行中运行“node server.js”启动服务器，然后在Angular应用中就可以通过HTTP请求访问这个模拟API。例如，在Angular的服务中可以这样使用：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('/api/data');
  }
}

这里假设Angular应用已经正确配置了代理，使得对“/api/data”的请求能转发到Node.js模拟服务器（关于代理配置，我们会在后面介绍）。这样，在前端开发阶段，即使后端API未完成，也可以进行相关功能的开发和测试。

5.2 使用Node.js进行构建优化

在Angular项目构建过程中，Node.js可以发挥重要作用。例如，我们可以使用一些基于Node.js的工具来优化构建过程，减少打包文件的大小。Webpack是Angular项目默认使用的打包工具，我们可以通过配置Webpack来实现更多的优化。 首先，安装“@angular - webpack”和“@angular - cli - webpack”这两个包，它们可以帮助我们更好地集成Webpack和Angular CLI：

npm install @angular - webpack @angular - cli - webpack --save - dev

然后在项目根目录下创建一个“webpack.extra.js”文件，用于扩展Webpack的默认配置。例如，我们可以使用“terser - webpack - plugin”来压缩JavaScript代码，提高构建后文件的加载速度。在“webpack.extra.js”中编写如下代码：

const TerserPlugin = require('terser - webpack - plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          ecma: 5,
          compress: {
            drop_console: true
          }
        }
      })
    ]
  }
};

上述代码中，我们使用了“terser - webpack - plugin”插件，并配置了一些选项，比如开启并行压缩（parallel: true），设置ECMAScript版本为5（ecma: 5），并且在压缩时移除console.log语句（drop_console: true）。

接下来，在“angular.json”文件中配置使用这个扩展的Webpack配置。找到“architect.build”部分，添加以下内容：

"builder": "@angular - cli - webpack:browser",
"options": {
  "customWebpackConfig": {
    "path": "./webpack.extra.js"
  },
  // 其他原有的配置选项...
}

这样，在运行“ng build”命令进行项目构建时，就会使用我们扩展的Webpack配置，对构建过程进行优化，生成更小的打包文件，提升应用在生产环境中的加载性能。

5.3 Node.js与Angular的代理配置

在开发过程中，当Angular应用需要与后端API进行交互时，由于浏览器的同源策略限制，可能会出现跨域问题。一种解决方案是使用代理，而Node.js可以帮助我们实现这一点。Angular CLI提供了简单的代理配置方式。 在项目根目录下创建一个“proxy.conf.json”文件，编写以下内容：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

上述配置表示，当Angular应用中出现对“/api”开头的请求时，会将请求代理到“http://localhost:3000”地址。“secure: false”表示允许不安全的请求（适用于开发环境），“changeOrigin: true”表示修改请求头中的Origin字段，以避免跨域问题。

然后在运行“ng serve”命令时，通过“--proxy - config”参数指定代理配置文件，例如：

ng serve --proxy - config proxy.conf.json

这样，Angular应用对“/api”相关的请求就会被转发到指定的后端服务器（这里是“http://localhost:3000”），从而解决开发过程中的跨域问题。如果后端服务器运行在不同的端口或者域名下，只需要修改“target”字段的值即可。这种代理配置方式简单方便，适用于开发阶段，使得前端开发可以独立于后端环境进行，同时又能顺利与后端API进行交互。

6. 常见问题及解决方法

6.1 Node.js版本不兼容问题

有时候在安装或使用某些基于Node.js的工具（如Angular CLI）时，可能会遇到版本不兼容问题。例如，某些较新的Angular CLI版本可能需要特定版本范围的Node.js才能正常运行。如果遇到此类问题，可以参考以下解决方法：

  • 查看版本兼容性文档：首先，查阅Angular官方文档或相关工具的官方文档，了解工具所支持的Node.js版本范围。例如，Angular CLI的文档通常会明确指出支持的Node.js版本。
  • 升级或降级Node.js：
    • 升级Node.js：在Windows和macOS系统上，如果使用的是Node.js官方安装包安装的Node.js，可以直接到Node.js官网下载最新的LTS版本安装包进行安装，安装过程会覆盖原有版本。在Linux系统上，根据不同的发行版，可以通过相应的包管理器进行升级。例如，在基于Debian或Ubuntu的系统上，可以先更新软件包列表（“sudo apt update”），然后尝试安装最新版本的Node.js（“sudo apt install -y nodejs”）。如果是使用nvm（Node Version Manager）来管理Node.js版本，可以使用“nvm install ”命令安装指定的新版本，其中“”是你想要安装的Node.js版本号。
    • 降级Node.js：如果升级Node.js后出现问题，可能需要降级到之前的版本。同样，使用nvm的话，可以通过“nvm install <old - version>”安装旧版本，然后使用“nvm use <old - version>”切换到旧版本。如果没有安装nvm，在Windows和macOS系统上，需要先卸载当前版本的Node.js，然后到Node.js官网下载历史版本的安装包进行安装。在Linux系统上，可能需要手动下载历史版本的安装文件并进行编译安装（这种方式相对复杂，需要一定的Linux操作经验）。

6.2 npm安装依赖失败问题

在使用npm安装依赖包时，可能会遇到安装失败的情况，常见原因及解决方法如下：

  • 网络问题：npm安装依赖包时需要从网络下载，网络不稳定或代理设置不正确可能导致安装失败。 
    npm config get proxy
npm config get https - proxy
    如果设置不正确，可以使用以下命令修改代理设置： 
    npm config set proxy http://your - proxy - server:port
npm config set https - proxy http://your - proxy - server:port
    如果不需要代理，可以使用以下命令取消代理设置： 
    npm config delete proxy
npm config delete https - proxy
  • 权限问题：在某些系统（如Linux系统）上，可能由于权限不足导致npm安装失败。
    • 使用sudo权限：在Linux系统上，如果使用普通用户安装依赖包失败，可以尝试使用“sudo npm install <package - name>”命令，以管理员权限安装。但要注意，使用sudo可能会带来一些安全风险，尽量在必要时使用。另外，也可以考虑将普通用户添加到npm安装目录的所属组，以获得适当的权限，这样就不需要每次都使用sudo。例如，假设npm安装目录为“/usr/local/lib/node_modules”，可以使用以下命令将用户添加到该目录所属组：
    sudo usermod -a -G $(stat -c '%G' /usr/local/lib/node_modules) your - username
    然后重新登录用户，就可以在不使用sudo的情况下安装依赖包。
  • 依赖包冲突问题：当项目中已经安装的某些依赖包与要安装的新依赖包存在版本冲突时，npm可能会安装失败。
    • 查看依赖树：可以使用“npm list”命令查看项目当前的依赖树，分析已安装的依赖包及其版本，找出可能存在冲突的地方。例如，如果要安装的新包依赖于某个特定版本的库，而当前项目中已安装的该库版本不同，就可能导致冲突。
    • 解决冲突：一种解决方法是尝试更新已安装的相关依赖包到新包所需的版本。可以使用“npm update <package - name>”命令更新指定的依赖包。但要注意，更新依赖包可能会引入新的问题，所以在更新前最好备份项目。另外，也可以尝试找到一个兼容的新包版本，使其与现有依赖包不冲突。有些情况下，可能需要手动修改“package.json”文件，调整依赖包的版本范围，然后重新运行“npm install”安装依赖。

6.3 Angular CLI运行错误问题

在使用Angular CLI时，可能会遇到各种运行错误。以下是一些常见错误及解决方法：

  • “ng”命令未找到：如果在命令行中输入“ng”命令提示未找到，可能是Angular CLI没有正确安装或没有添加到系统路径。
    • 重新安装Angular CLI：先使用“npm uninstall -g @angular/cli”命令卸载全局安装的Angular CLI，然后重新使用“npm install -g @angular/cli”命令进行安装。安装完成后，确保安装目录已添加到系统路径中。在Windows系统上，安装目录（如“C:\Users\your - username\AppData\Roaming\npm”）应在系统的“Path”环境变量中；在macOS和Linux系统上，安装目录（如“/usr/local/bin”）也应在“PATH”环境变量中。可以通过在命令行中输入“echo $PATH”（在macOS和Linux系统上）或查看系统环境变量设置（在Windows系统上）来确认。
  • 构建错误：在运行“ng build”命令进行项目构建时，可能会遇到各种构建错误，如语法错误、模块找不到等。
    • 检查语法错误：仔细查看错误提示信息，通常错误信息会指出错误发生的文件和大致位置。例如，如果提示某个TypeScript文件有语法错误，打开该文件，检查代码语法是否正确。常见的语法错误包括缺少分号、括号不匹配、变量未定义等。
    • 解决模块找不到问题：如果错误提示某个模块找不到，首先确认该模块是否已经安装。可以通过查看“package.json”文件中的“dependencies”或“devDependencies”字段，或者使用“npm list”命令查看已安装的依赖包。如果模块未安装，使用“npm install <package - name>”命令安装。如果模块已安装，但仍然找不到，可能是模块的导入路径不正确。检查项目中的导入语句，确保路径与模块的实际位置相符。在Angular项目中，要注意相对路径和绝对路径的使用，以及模块是否在正确的作用域下。例如，对于自定义的模块，可能需要在相关的NgModule中正确导入和声明。

通过以上对Node.js安装及在Angular开发中的应用介绍，以及常见问题的解决方法，希望能帮助你顺利进行基于Node.js和Angular的前端开发工作，构建出高质量的前端应用程序。