Angular 2 маршруты - перенаправление в другое приложение

Question

Angular 2 маршруты - перенаправление в другое приложение

1

Я создаю различные версии своего приложения на альтернативных языках. Я использую AOT (раньше времени) компиляции, поэтому я заканчиваю статическими развертываемыми сайтами в структуре, которая выглядит так:

dist -
  index.html -- entry file for the default (English language) app
  -fr
    index.html -- entry file for French language version
  -de
    index.html -- entry file for German language version

В настоящее время я могу переключаться между веб-сайтами основного языка, используя раскрывающийся список, где пользователь может выбрать свой предпочтительный язык, и затем загружаю файл главной записи для требуемого сайта с помощью обычного JavaScript следующим образом:

const baseUrl = window.location.origin;
window.location.href = baseUrl + '/' + requestedLanguage + '/index.html'; // e.g. requestedLanguage = 'fr'

Это работает, поскольку кажется, что запрос фактического файла index.html означает, что Angular не будет интерпретировать запрос href как Угловой маршрут.

Однако я хочу, чтобы, когда пользователь вводит URL-адрес, который уже содержит языковой вариант в пути, я хочу, чтобы эта языковая версия была подана. Я также хочу, чтобы путь URL был сохранен, чтобы угловая маршрутизация загружала соответствующий компонент для запрошенного URL.

Например:

пользователь вводит myDomain.com/fr/myPage
приложение под подкаталогом /fr/ загружается, а угловая маршрутизация в этом приложении загружает связанный компонент для MyPage

В настоящее время, если я ввожу URL-адрес myDomain.com/fr/myPage, Угловая маршрутизация пытается интерпретировать желаемую вложенную папку fr в качестве маршрута, которого не существует, поэтому я получаю следующую ошибку:

Error: Cannot match any routes. URL Segment: 'fr/instruments'

Как загрузить нужное приложение и правильный компонент? Должен быть способ заставить Angular распознать, что fr в URL-адресе относится к другому приложению. Может, мне не хватает конфигурации сборки или чего-то еще? Здесь мой скрипт в package.json для создания версии на французском языке:

"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",

Chris Halcrow 15 июнь 2018, в 09:20

Источник

Теги:

angular

javascript

angular-routing

angular-i18n

3 ответа

Ещё вопросы

Anuragh KP · Answer 1 · 2018-06-15T04-54-00.000Z

просто используйте Компоненты вместо разных отдельных приложений и используйте ниже пример>

{path:'',component:EnHomeComponent},
  {path:'contact',component:EnContactComponent},
  {path:'fr',component:LayoutComponent,
   children:[
     {path:'',component:FrHomeComponent},
     {path:'contact',component:FrContactComponent}]}

то вы можете напрямую обращаться к страницам по URL-адресу

I. Ahmed · Answer 2 · 2018-06-15T05-41-00.000Z

Используйте концепцию углового router для разных путей английского, французского и датского языков.

Затем используйте путь, основанный на языке.

Спасибо, однако мне нужно решение Angular 2, а не AngularJS

Chris Halcrow · Answer 3 · 2018-06-18T01-45-00.000Z

Мне удалось загрузить различные языковые версии приложения, сконфигурировав конвейер для моей задней части.NET таким образом, чтобы страница Angular static index загружалась для каждого другого языкового приложения (называемого "SPA" в коде). Это работает, проверяя, есть ли страница index.html для первой вложенной папки в URL-адресе запроса (например, '/fr/', '/de/'), и она загружает эту страницу, если она существует:

Startup.cs

public class Startup
{
    public void Configuration()
    {
        app.Use((context, next) =>
        {
            if (!context.Request.Path.HasValue)
                return next();

            IFileInfo fi;
            string spaIndex = "index.html";

            Uri uri = new Uri(context.Request.Uri.ToString());
            var segs = uri.Segments;
            var folder = segs.Length > 1 ? String.Format("/{0}", segs[1]) : "/";

            if (!physicalFileSystem.TryGetFileInfo(context.Request.Path.Value, out fi)) {

                // check if this is a request for a sub-application, e.g an alternative language version
                // if so, load the app
                if (physicalFileSystem.TryGetFileInfo(String.Format("{0}{1}", folder, spaIndex), out fi))
                {
                    context.Request.Path = new PathString(String.Format("{0}{1}", folder, spaIndex));                           
                }
            }

            return next();
        });
    }
}

Остальная часть URL-адреса (часть после подпапки языка) затем интерпретируется как маршрут внутри загруженного приложения (например, приложение на французском языке). Это означает, что для приложения загружен правильный компонент (я не совсем уверен, как эта часть работает - может быть, оставшаяся часть пути попадает в другую часть конвейера запросов.NET и передается в приложение Angular? )