Проблема с роутингом Angular 5. Не на всех страница (+ видео скрин проблемы)?

Question

[Илья Белобородов]

Запилил видео скрин с проблемой: youtu.be

Суть проблемы. На одних страницах при обновлении страницы подгружается нужный компонент, на других Cannot GET

module.ts

//...........
const appRoutes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: ':alias',
        component: CategoryComponent
    },
    {
        path: 'site/:alias',
        component: SiteComponent
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            appRoutes,
            { enableTracing: true }
        ),
        BrowserModule,
        HttpClientModule
    ],
    providers: [
        { provide: [APP_BASE_HREF, LocationStrategy], useClass: HashLocationStrategy, useValue : '/' }
    ],
    declarations: [AppComponent, CategoryComponent, HomeComponent, SiteComponent],
    bootstrap: [AppComponent]
})
//.........

В чем прикол? Ладно, понимаю если бы везде такое вылазило...
Вообщем, помогите кто может, учу всего лишь второй день

Answer 1

[Даша Циклаури]

Заметь, что у тебя криво работает когда параметр ":alias" содержит точки и дефисы, проверь кодирование/декодирование этих символов, тут нужно смотреть серверный entry-point. Проверь по RFC валидны ли символы
Если еще быть точнее, то routerLink и navigate ( !!! не navigateByUrl) сами энкодят насколько я помню спецсимволы

Comments

[Илья Белобородов]

точно. проблема с точками. а как решить? я просто вообще не представляю где и как? точки в url'e быть должны

[Даша Циклаури]

Илья Белобородов, не использовать routerLink для данного кейса, закостыливать (использовать router.navigateByUrl) или писать свою директиву, которая не будет энкодить параметры

[Даша Циклаури]

Илья Белобородов, вообще SEO-ники старой школы не одобряют такие урлы, можно использовать только [a-Z0-9_-]

[Илья Белобородов]

Даша Циклаури, а это точно поможет? просто именно с переходом со страницы на страницу все ок, это если зайти на проблемную страницу и обновить ее - тогда вылезет ошибка

[Илья Белобородов]

Даша Циклаури,
в webpack.config.js добавил

....
devServer: {
        historyApiFallback: {
            disableDotRule: true
        }
    },
....

теперь хавает нормально точки