Angular 路由、国际化和部署

Question

我们有一个 Angular 12 应用程序，它有多个模块，如 ShippingModule、ReceivingModule 等。我们已经适当地设置了路由，并且可以使用 localhost:4200/Shipping 和 localhost:4200/接收.

我们已将其国际化，并希望将其部署到 nginx 服务器。当我们构建时，dist 目录包含三个完整的应用程序，一个用于 'en'、'es' 和 'vt'，非常完美。

文档位于 https://angular.io/guide/i18n-common-deploy says we host the main application under one url and rewrite based on the user's accept-language. So if I were to go to www.internaladdresss.com/Shipping, it would rewrite me to www.internaladdress.com/en/Shipping。

但是，我们是否需要重新编码路由模块以具有语言 id 变量，或者在每个 index.html 文件中使用 basehref 是否可以避免这样做？我们的示例路由模块具有如下定义的路由：

const routes: Routes[
{ path: 'shipping', loadChildren: () => import('./shippingdashboard/shipping.module').then(m=>m.ShippingDashboardModule)},
{ path: 'receiving', loadChildren: () => import('./receivingdashboard/receiving.module').then(m => m.ReceivingDashboardModule)}];
@NgModule({
import: [RouterModule.forRoot(routes)],
exports:[RouterModule]
})
export class AppRoutingModule{}

为了使 URL 正常工作，我们是否需要定义像 path: 'langId:/shipping 和 langId:/receiving 这样的路由？

Answer 1

为答疑解惑，答案是'No, you do not need to code for the language identifier in the URL path.'

生成的每个 index.html 文件都在 header:

中设置了基本 href

对于英语，

<base href="/en/">

西班牙语

<base href="/es/">

等等

真正的工作来自于 nginx 配置。

显然，将传入请求映射到的第一件事是接受语言

map $http_accept_language $accept_language {
    ~*^es es;
    ~*^en en;
}

接下来的部分需要反复试验，但一旦您看到它就非常简单：

# Fallback to default language if no preference defined by browser
if ($accept_language ~ "^$") {
  set $accept_language "en";
}

# Redirect "/" to Angular application in the preferred language of the browser
rewrite ^/$ /$accept_language permanent;

# Everything under the Angular application is always redirected to Angular in the
# correct language
location ~ ^(?!/(en|es)) {
  try_files $uri /en/index.html$args =404;
}

最后一个区域是解决方案的真正关键。如果用户指定的语言不受任何支持，默认情况下将他们的请求重定向到英文网站。

总而言之，您不需要将语言标识符编程到您的路由器中。大部分工作只是设置 nginx 以根据检测到的语言（或缺少语言）正确地解释和重定向到正确的站点文件夹。

Angular 路由、国际化和部署

Angular routing, internationalization, and deployment

routes

nginx

internationalization

angular