若要使用server文件夹进行服务器端呈现，需要在server文件夹中创建一个web.config文件。web.config文件应该包含服务器端呈现的重写规则。参考如下：-

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="server.js" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这个web.config文件将把所有请求路由到服务器文件夹中的**server.js file。可以修改add元素的path属性中的文件路径，使其与服务器端呈现文件的名称匹配。此外，请确保已在Azure Web App中安装iisnode module**。

• 我尝试使用示例API部署一个示例Angular应用程序，以下是我的文件：-*
  使用ssr创建了一个新的Angular应用：-

ng new my-ssr-app
cd my-ssr-app

npm install json-server --save

创建了示例db.json：-

{
  "data": [
    { "id": 1, "name": "Item 1" },
    { "id": 2, "name": "Item 2" }
  ]
}

我的包。json：-

{
  "name": "my-ssr-app",
  "version": "0.0.0",
  "scripts": {
    "start": " npm run start:api",
    "start:api": "json-server --watch db.json",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "engines": {
    "node": "18.x"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "json-server": "^0.17.4",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "^16.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

创建了一个服务API：-

ng generate service api

API.service.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-ssr-app';
}

生成的组件列表如下：-

ng generate component item-list

item-list.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit {
  items: any[];

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getItems().subscribe((data: any) => {
      this.items = data;
    });
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ItemListComponent } from './item-list/item-list.component';

const routes: Routes = [
  { path: 'items', component: ItemListComponent },
  { path: '', redirectTo: '/items', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

本地输出：-

• 在部署Angular应用时，请确保使用ng build在本地构建Angular应用，然后将dist文件夹部署到Web应用，而不是整个文件夹：-*

部署后：-

请确保您在默认文档中有index.html：-

请确保您已将路径添加到**site\wwwroot\<your-app-name-from-package.json-file>**

示例Angular SSR应用程序成功运行如下：-

此外，请查看Azure Web应用程序中的“诊断和解决问题”选项卡以了解更多信息。