J'ai réussi à configurer des routes pour certaines pages de mon application Angular 4 en utilisant le générateur yeoman ngx-rocket. Par exemple, j'ai créé une page appelée «manger» et quand vous allez à ma page d'accueil à www.haakon.io et puis cliquez sur le lien manger, vous êtes amené à cette page. Si vous essayez de taper ce lien dans le navigateur, par exemple http://www.haakon.io/eat et essayez d'y naviguer, vous obtenez la page d'erreur 404. Je sais que cela a à voir avec des problèmes de liens profonds mais j'ai essayé certaines des solutions angulaires 1.5 et elles ne fonctionnent pas. Plus précisément, j'ai le href de base situé dans ma page index.html:Problème de routage Angular 4 ngx-rocket deep link
<base href="/"/>
Voici mon fichier app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
// Fallback when no prior route is matched
{ path: '**', redirectTo: '', pathMatch: 'full' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
Voici mes route.service.ts:
import { Routes } from '@angular/router';
import { ShellComponent } from './shell/shell.component';
/**
* Provides helper methods to create routes.
*/
export class Route {
/**
* Creates routes using the shell component and authentication.
* @param routes The routes to add.
* @return {Routes} The new routes using shell as the base.
*/
static withShell(routes: Routes): Routes {
return [{
path: '',
component: ShellComponent,
children: routes
}];
}
}
Et enfin mes manger-routing.module.ts:
import { Route } from '../core/route.service';
import { extract } from '../core/i18n.service';
import { EatComponent } from './eat.component';
const routes: Routes = Route.withShell([
{ path: 'eat', component: EatComponent, data: { title: extract('Eat') } }
]);
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: []
})
export class EatRoutingModule { }