Question

我必须在Angular 7中实现多语言网站。在选择语言时，将以该特定语言翻译App。

以下是教程的链接： https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-app

按照教程中提供的步骤进行操作，并且我的应用通过使用命令

正在使用特定的语言。

ng serve --configuration = es或ng serve --configuration = en

使用单一语言即可正常工作，但是当我尝试使用两种语言构建应用程序并在命令下运行时

npm运行build：i18n-ssr && npm运行serve：ssr

然后在控制台上出现错误-：

错误：无法在视图目录中查找视图“ en / index” Function.render上的“ E：\ internationalization \ dist \ browser” （E：\ internationalization \ dist \ server.js：122127：17）在 ServerResponse.render （E：\ internationalization \ dist \ server.js：132058：7）在 E：\ internationalization \ dist \ server.js：142：9位于Layer.handle [as handle_request]（E：\ internationalization \ dist \ server.js：123911：5）在下一个（E：\ internationalization \ dist \ server.js：123659：13）在 Route.dispatch（E：\ internationalization \ dist \ server.js：123634：3）位于 Layer.handle [作为handle_request] （E：\ internationalization \ dist \ server.js：123911：5）在 E：\ internationalization \ dist \ server.js：123134：22 at param （E：\ internationalization \ dist \ server.js：123207：14）在param （E：\ internationalization \ dist \ server.js：123218：14）

下面是通过的链接 https://angular.io/guide/i18n

https://medium.com/frontend-fun/angular-introduction-to-internationalization-i18n-28226a85e04e

在angular.json中添加了代码

> ```"production-es": { "fileReplacements": [ { "replace":
> "src/environments/environment.ts", "with":
> "src/environments/environment.prod.ts" } ], "optimization": true,
> "outputHashing": "all", "sourceMap": false, "extractCss": true,
> "namedChunks": false, "aot": true, "extractLicenses": true,
> "vendorChunk": false, "buildOptimizer": true, "outputPath":
> "dist/internationalization-es/", "i18nFile":
> "src/locale/messages.es.xlf", "i18nFormat": "xlf", "i18nLocale": "es",
> "i18nMissingTranslation": "error" }, "es": { "aot": true, "baseHref":
> "/es/", "outputPath": "dist/internationalization-es/", "i18nFile":
> "src/locale/messages.es.xlf", "i18nFormat": "xlf", "i18nLocale": "es",
> "i18nMissingTranslation": "error" }, "production-en": {
> "fileReplacements": [ { "replace": "src/environments/environment.ts",
> "with": "src/environments/environment.prod.ts" } ], "optimization":
> true, "outputHashing": "all", "sourceMap": false, "extractCss": true,
> "namedChunks": false, "aot": true, "extractLicenses": true,
> "vendorChunk": false, "buildOptimizer": true, "outputPath":
> "dist/internationalization-en/", "i18nFile":
> "src/locale/messages.en.xlf", "i18nFormat": "xlf", "i18nLocale": "en",
> "i18nMissingTranslation": "error" }, "en": { "aot": true, "baseHref":
> "/en/", "outputPath": "dist/internationalization-en/", "i18nFile":
> "src/locale/messages.en.xlf", "i18nFormat": "xlf", "i18nLocale": "en",
> "i18nMissingTranslation": "error" }```

在Package.json中添加了代码

```
"build:client-and-server-bundles-i18n": "ng run internationalization:build:production-es && ng run internationalization:build:production-en && ng run internationalization:server:production",
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:ssr": "node dist/server",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"build:client-and-server-bundles": "ng build --prod && ng run internationalization:server:production",
"build:i18n-ssr": "npm run build:client-and-server-bundles-i18n && npm run compile:server"

```

在server.ts中添加了代码

```
app.get('*', (req, res) => {
// this is for i18n
const supportedLocales = ['en', 'es'];
const defaultLocale = 'en';
const matches = req.url.match(/^\/([a-z]{2}(?:-[A-Z]{2})?)\//);
// check if the requested url has a correct format '/locale' and matches any of the supportedLocales
const locale = (matches && supportedLocales.indexOf(matches[1]) !== -1) ? matches[1] : defaultLocale;
// res.render('${locale}/index', { req });
res.render(`${locale}/index`, { req });
});

```

我们在APP-中有两个链接：英语和西班牙语：

点击西班牙语应用后，系统将重定向到西班牙语，反之亦然

错误：无法在视图目录“ internationalization \ dist \ browser

0 个答案: