Angular开发环境示例（NestJS版）

2 年 ago
宇, 华
2 minutes

首先

之前我创建了一个Angular + Express的开发环境示例，现在我将Express替换为NestJS，所以重新发布。

Angular + Nest Example 的中文释义：Angular与Nest示例

请参考「Angular＋Express开发环境示例」以了解有关功能和基本结构的信息。
以下是替代步骤的描述。

创建Nx工作区

使用 create-nx-workspace 命令在 Angular-Nest 上构建工作空间，并将 Angular + Express 的开发环境示例合并进来。

创建nx工作区

首先

> npx create-nx-workspace

创建一个工作空间。
在中间选择”angular-nest”，然后输入工作空间名称等信息。
※ 这次我们将应用程序名称设置为”web”。
这样一来，
· 前端：web
· 后端：api
就会变得简洁明了。

image.png

只需要这一步，就可以创建工作空间，并构建Angular的前端和NestJS的后端。

启动确认

我尝试启动。
首先是前端。

> nx serve web
image.png

后端

> nx serve api
image.png

当在浏览器中访问 http://localhost:4200/ 时，会显示以下画面。
“Welcome to api!” 部分已设为由API返回数据。

image.png

合并现有处理

因为环境已经设置完毕，现在可以正常开始开发了。

我现在想要替换”Angular + Express开发环境示例”，所以我需要将上述的源代码合并到我创建的工作空间中。
大部分情况下，只需将文件整个添加即可，但以下几点需要注意。

· angular-nest-example\apps\api\src\app\app.module.ts：将此文件路径进行本地语言化

这是后端API模块的定义。

如果在后端添加了服务或控制器，则需要将其添加到这里的定义中。

・angular-nest-example\apps\web\src\app\app.module.ts
・angular-nest-example\apps\web\src\app\app.component.html
・angular-nest-example\apps\web\src\app\app.component.ts

以下是使用本地化的中文翻译：
・angular-nest-example\apps\web\src\app\app.module.ts
・angular-nest-example\apps\web\src\app\app.component.html
・angular-nest-example\apps\web\src\app\app.component.ts

这是前端应用的定义。
在创建工作空间时，它显示的是“Welcome to web！”等页面，所以需要进行修改。
我认为在合并文件时覆盖这些部分应该没问题。

・angular-nest-example\apps\web\src\index.html
这是index文件。
如果需要加载外部图标等内容，需要在这里添加链接。
（例如使用Material Icons：
等等。）

・angular-nest-example\apps\web\src\styles.scss
这里存放着全局样式。
如果使用了全局样式，请将其移植到这里。

确认启动

我将尝试再次在http://localhost:4200/启动nx serve web、nx serve api。
如果登录页面显示出来并且成功登录，那就算是成功了。

image.png
image.png

同时启动后端和前端。

为了避免分别启动的麻烦，我会将它们一起启动。
在Linux中，可以使用&进行连续启动，所以只需简单地使用”nx serve api & nx serve web”即可，但为了能在Windows上运行，我会使用npm-run-all。
这样，我可以通过npm start同时启动两者。

{
  "name": "angular-nest-example",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",
    "start": "run-p start:api start:web",        ※ run-pで同時実行
    "start:api": "nx serve api",                 ※ バックエンドの起動
    "start:web": "nx serve web",                 ※ フロントエンドの起動
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.0",
    "@angular/common": "^12.2.0",
    "@angular/compiler": "^12.2.0",
    "@angular/core": "^12.2.0",
    "@angular/forms": "^12.2.0",
    "@angular/platform-browser": "^12.2.0",
    "@angular/platform-browser-dynamic": "^12.2.0",
    "@angular/router": "^12.2.0",
    "@nestjs/common": "^7.0.0",
    "@nestjs/core": "^7.0.0",
    "@nestjs/platform-express": "^7.0.0",
    "@nrwl/angular": "13.0.2",
    "npm-run-all": "^4.1.5",                    ※ npm-run-allを追加
    "reflect-metadata": "^0.1.13",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },

添加调试

为了进行调试，我们将添加launch.json文件。
这样，通过“Launch Chrome”我们就可以启动Chrome并进行前端调试。
如果想要进行后端调试，请使用“Attach Node”选项来连接正在运行的Node。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach Node",
            "port": 9229,
            "request": "attach",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        },
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

杂感

以上就是替换完成。
现在，源代码的更改将继续自动检测和更新，并且还可以进行调试等操作。

由于使用Nx来构建基础环境，所以文件结构非常清晰整洁。以前使用Express时，需要在后端的app.ts中写入路由处理等代码，现在不再需要这样做，真是帮了大忙。

然而，无法通过Heroku进行构建了。
可能是因为出现了错误R14（超过内存配额），所以可能只是简单的内存不足……。

既にNxを使用するのは手間がほとんどなかったため、ファイル構成を見直したい場合などにも、Nxを利用して置き換えることも考えられます。

添加

据说从Nx版本15.2.0开始，无法再使用”angular-nest”。

 

因此，好像需要分别生成nest和angular。我参考了以下网站并尝试了一下。

 

首先创建nest环境（api）。

npx create-nx-workspace@latest --preset nest --name angular-nest-example3 --appName api --nxCloud true

进入已创建的项目文件夹，并生成angular的web环境。

npm install @nrwl/angular
nx generate @nrwl/angular:application --name web

暫時只需要這樣，我們已經確認「api」和「web」的資料夾已被建立，並且可以藉由執行 nx serve api 和 nx serve web 分別啟動它們。

我认为你可以按照相同的方法来进行环境搭建。

✖
广告
将在 10 秒后关闭
bannerAds