как включить диплинкинг в angular4

Я пытаюсь реализовать простую маршрутизацию в своем приложении angular4, но у меня проблема с неработающими глубокими ссылками.

например, у меня есть компонент «О программе» и компонент «Домашняя страница» (todos), мой файл app.routing.ts выглядит следующим образом:

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

import { TodosComponent } from './todos/todos.component';
import { AboutComponent } from './about/about.component';
import { CallbackComponent } from './callback/callback.component';

const appRoutes: Routes = [

  {
    path: '',
    component: TodosComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'callback',
    component: CallbackComponent
  }

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Теперь навигация работает для этих компонентов, когда я нажимаю в приложении из routerLink, но если я ввожу URL-адрес непосредственно в браузере, я получаю 404..

Это нарушает мой обратный вызов из моего источника аутентификации :(

мой файл app.module.ts импортировал файл маршрутизатора, но это все еще не работает.. как я могу включить здесь глубокие ссылки?


angular angular-routing angular4-router
person adam.sellers    schedule 26.05.2017    source источник
comment
Подсказка: ошибка 404 исходит от сервера. Когда вы нажимаете Enter в адресной строке, вы отправляете запрос на сервер. Ангуляр здесь не при чем. Прочитайте stackoverflow.com/questions/26894769/.   -  person JB Nizet    schedule 27.05.2017
comment
angular.io/docs/ts/latest/guide/deployment. html#!#откат   -  person yurzui    schedule 27.05.2017

Ответы (3)


arrow_upward
0
arrow_downward

Если у вас есть пустой путь route '' без дочерних элементов, вы должны использовать pathMatch: 'full'

  {
    path: '',
    component: TodosComponent,
    pathMatch: 'full'
  },

в противном случае каждый путь будет совпадать, и маршрутизатор будет искать совпадения (несуществующих) дочерних маршрутов с остальной частью пути.

Как упоминалось в комментариях, если вы используете PathLocationStrategy (по умолчанию), вам необходимо настроить сервер для его поддержки.

Вы можете проверить, является ли сервер виновником, переключившись на HashLocationStrategy

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, {useHash: true});

Маршруты выглядят по-другому, поэтому не ожидайте, что старые маршруты (без #) будут работать, если вы введете их напрямую.

person Günter Zöchbauer    schedule 25.10.2017

arrow_upward
0
arrow_downward

Надеюсь, вы решили свой вопрос.

Решением для этого является то, что я использовал HashLocationStrategy.

RouterModule.forRoot(appRoutes, {useHash: true});

Это приводит к тому, что все URL-адреса приложений представляют собой index.html, за которым следует "#", а затем информация о маршрутизации.

Поскольку вы всегда переходите на index.html, независимо от маршрута, вы не получите 404 для любого действительного URL-адреса.

person Jaykant    schedule 18.02.2019

arrow_upward
0
arrow_downward

Я думаю, вам нужно переписать URL. В IIS это будет примерно так:

<system.webServer>
      <rewrite>
        <rules>
            <rule name="Angular" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
        </rewrite>
    </system.webServer>
person Paul Story    schedule 23.08.2019