Angular 15 Universal+i18n本地化部署IIS问题求助

核心问题分析 #

启用i18n后，Angular构建产物的目录结构发生了拆分：server目录新增ar、en等语言子文件夹，browser目录也对应生成语言专属的静态资源子目录。原有直接将server根目录文件移至网站根目录的部署方式，无法匹配多语言路由和静态资源路径，导致部署失效。

具体解决步骤 #

1. 调整部署文件结构 #

不再直接将server根目录文件移到网站根目录，按语言维度整理部署文件：

• 将dist/app-name/server/en下的所有文件（main.js、app-root等）复制到网站根目录的en子目录
• 将dist/app-name/server/ar下的所有文件复制到网站根目录的ar子目录
• 将dist/app-name/browser/en下的静态资源（js、css、assets等）复制到网站根目录en/browser路径，同理处理ar对应的browser资源（若存在）

2. 修改web.config配置（IIS环境） #

更新重写规则，让不同语言的请求指向对应的server入口，同时正确映射静态资源：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 处理英文路由 -->
        <rule name="En Universal" stopProcessing="true">
          <match url="^en/(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="en/main.js" />
        </rule>
        <!-- 处理阿拉伯文路由 -->
        <rule name="Ar Universal" stopProcessing="true">
          <match url="^ar/(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="ar/main.js" />
        </rule>
        <!-- 默认跳转至英文版本 -->
        <rule name="Default to En" stopProcessing="true">
          <match url="^$" />
          <action type="Redirect" url="/en/" />
        </rule>
      </rules>
    </rewrite>
    <!-- 配置静态资源MIME类型 -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <handlers>
      <add name="iisnode" path="*/main.js" verb="*" modules="iisnode" />
    </handlers>
  </system.webServer>
</configuration>

3. 调整server.ts的语言识别逻辑 #

确保Universal服务器能从请求URL中提取语言标识，加载对应的本地化模块：

import { join } from 'path';
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { existsSync } from 'fs';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const server = app.getHttpServer();
  const appName = require('../package.json').name;

  server.on('request', (req, res) => {
    // 从URL前缀提取语言标识
    const lang = req.url.split('/')[1] || 'en';
    const distFolder = join(process.cwd(), `dist/${appName}/server/${lang}`);
    
    // 语言目录不存在则跳转至默认语言
    if (!existsSync(distFolder)) {
      res.writeHead(302, { Location: '/en/' });
      res.end();
      return;
    }

    // 加载对应语言的server bundle
    const bootstrap = require(join(distFolder, 'main.js')).default;
    bootstrap(req, res);
  });

  await app.listen(process.env.PORT || 4000);
}
bootstrap();

4. 验证部署 #

• 启动IIS站点后，访问/en/应正常加载英文版本应用
• 访问/ar/应正常加载阿拉伯文版本应用
• 检查静态资源（如css、图片）是否加载正常，若有问题，调整web.config中静态文件的路径映射

内容的提问来源于stack exchange，提问作者Mo Bdair