Universal-Nest 项目教程

Universal-Nest 项目教程

universal-nestNest + Angular Universal = ❤️ by @TrilonIO项目地址:https://gitcode.com/gh_mirrors/un/universal-nest

1. 项目的目录结构及介绍

Universal-Nest 项目的目录结构如下：

universal-nest/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── app.server.module.ts
│   ├── environments/
│   │   ├── environment.prod.ts
│   │   ├── environment.ts
│   ├── main.ts
│   ├── main.server.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── angular.json
├── browserslist
├── karma.conf.js
├── package-lock.json
├── package.json
├── server.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.server.json
├── tslint.json

目录结构介绍

• src/：包含项目的源代码。
  • app/：包含 Angular 应用的主要组件和模块。
  • environments/：包含环境配置文件。
  • main.ts：客户端应用的入口文件。
  • main.server.ts：服务器端应用的入口文件。
  • polyfills.ts：包含浏览器兼容性填充代码。
  • styles.css：全局样式文件。
  • test.ts：测试配置文件。
• .gitignore：Git 忽略文件配置。
• .prettierrc：Prettier 代码格式化配置。
• LICENSE：项目许可证。
• README.md：项目说明文档。
• angular.json：Angular CLI 配置文件。
• browserslist：浏览器兼容性配置。
• karma.conf.js：Karma 测试运行器配置。
• package-lock.json：npm 依赖锁定文件。
• package.json：npm 包配置文件。
• server.ts：NestJS 服务器入口文件。
• tsconfig.app.json：客户端 TypeScript 配置。
• tsconfig.json：全局 TypeScript 配置。
• tsconfig.server.json：服务器端 TypeScript 配置。
• tslint.json：TSLint 代码检查配置。

2. 项目的启动文件介绍

客户端启动文件

• src/main.ts：这是 Angular 应用的客户端入口文件。它负责引导 Angular 应用模块。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

服务器端启动文件

• src/main.server.ts：这是 Angular 应用的服务器端入口文件。它负责引导 Angular 服务器端模块。

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServer

universal-nestNest + Angular Universal = ❤️ by @TrilonIO项目地址:https://gitcode.com/gh_mirrors/un/universal-nest