使用NestJS来展示通过Angular制作的用户界面
使用Angular创建UI,并使用NestJS同时发布REST API的方式是有的,下面整理一下这种做法。然而,NestJS类似于在Express上运行,所以需要做的基本上与Express相同,没有特别新颖的事情。
Angular端的配置
通过build命令将使用Angular创建的UI捆绑,并生成到NestJS可见的路径中。生成路径由angular.json中的outputPath参数指定。
{
"projects": {
...中略...
"options": {
"outputPath": "<NestJsプロジェクトの場所>/public等",
只需要执行ng build或ng build -w来进行构建。
在NestJS中指定静态文件的路径。
为了能够打开生成的捆绑文件,在以下静态文件路径(以main.ts为基准的相对路径)上进行指定。(参考:https://docs.nestjs.com/techniques/mvc)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { join } from 'path';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.useStaticAssets(join(__dirname, '..', 'public'));
await app.listen(3000);
}
bootstrap();
更正:以下的內容沒有必要
在公开public文件夹时,无需从终端发布index.html文件…
从控制器发布
为了能够像REST API一样从GET方法中打开静态文件,需要添加控制器。实际上,有很多种方法可以实现这个功能,但什么方法最好还不太清楚。
- 参考: https://github.com/nestjs/nest/issues/402
发文件的方法。
使用Res(响应对象)的sendFile方法返回文件的方法。不知道为什么,直接返回似乎更快。
以下代码将index.html文件直接作为GET方法的响应返回给路由。
import { Controller, Get, Res } from '@nestjs/common';
@Controller()
export class AppController {
constructor() {}
@Get()
root( @Res() res ) {
res.sendFile( 'index.html' );
}
}
第二个方法是进行渲染。
如果是关于Angular捆绑之后的文件,我认为这种方法并没有太多优点,但也有一种方法可以使用模板引擎进行渲染。
通过将模板(位于static文件夹下的index.html)与@Render装饰器结合使用,设置渲染方式为通过模板引擎公开Angular打包后的文件。
通常情况下,函数体(这里是root())会返回传递给模板引擎的参数,但是由于Angular生成的文件并不需要进行处理,所以root()函数没有实际操作。由于经过了模板引擎的处理,相比方法1可能会稍微慢一些。
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
constructor() {}
@Get()
@Render('index.html')
root() {}
}
执行结果
使用Angular CLI创建一个示例,并将其在NestJS服务器(端口:3000)上公开。然后会显示以下屏幕内容。
