Мне нужно реализовать многоязычный веб-сайт на Angular 7. На котором при выборе языка приложение будет переводиться на этот конкретный язык.
Ниже приведена ссылка на учебник: https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-app
Выполните шаги, описанные в руководстве, и мое приложение работает с определенным языком с помощью команды
ng serve --configuration = es или ng serve --configuration = ru
Работает нормально с одним языком, но когда я пытаюсь создать приложение на обоих языках и запуститькоманда ниже
npm run build: i18n-ssr && npm run serve: ssr
Затем появляется сообщение об ошибке на консоли -:
Ошибка: не удалось найти представление "en / index" в каталоге представлений "E: \ internationalization \ dist \ browser" в Function.render (E: \ internationalization \ dist \ server.js: 122127: 17) в ServerResponse.render (E: \ интернационализация \ расстояние \ server.js: 132058: 7) на E: \ internationalization \ dist \ server.js: 142: 9 на Layer.handle [как 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 в параметре (E: \ internationalization \ dist \ server.js: 123207: 14) в параметре (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 });
});
```
У нас есть две ссылки: английский и испанский в приложении -:
При нажатии на испанское приложение будет перенаправлено на испанский язык и наоборот