CODEWITHSUNDEEP
.htaccessangularangular2-routing
Erwann Jallier
Erwann Jallier

Reputation: 21

Angular2 router issues when refreshing pages

I all,

I have a really common issue, but I didn't find the solution, and really need your help for this one.

I have an angular2 app on an apache server, and have issues with the router in lazy loaded modules.

I have a root module, and this is his router file:

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

// App Components
import { AppComponent }   from './app.component';
import { LoginComponent }   from './auth/login.component';


const ROUTES: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {   path: 'home',
      loadChildren: 'dist/home/home.module.js#HomeModule'
  }
  {
      path: 'childapp',
      loadChildren: 'dist/childapp/childapp.module.js#ChildappModule'

  },
  {
      path: 'login',
      component: LoginComponent
  },
  { path: '**', redirectTo: '/home'}
];

@NgModule({
    imports: [ RouterModule.forRoot(ROUTES) ],
    exports: [ RouterModule ]
})
export class RoutingModule {}

Here is on exemple of the routing of a child module:

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

import { ChildappComponent} from './childapp.component';
import { Sub1Component} from './sub1/Sub1.component';
import { Sub2Component} from './sub2/Sub2.component';

const routes = [
    {
        path: "",
        component: ChildappComponent,

        children: [
          {path: "sub2",
          component: Sub2Component},
          {path: "",
          component: Sub1Component},
        ]
    },

];

@NgModule({
    imports: [ RouterModule.forChild(routes) ],
    exports: [ RouterModule ]
})
export class LocobookRoutingModule {}

When I click on links, everything is OK.

When I refresh "http://mywebsite.com/app/home", or "http://mywebsite.com/app/childapp", everything is OK.

But, when I try to refresh on "http://mywebsite.com/app/childapp/sub2", The page does not display. If it helps, this is my .htacces file:

RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# otherwise forward it to index.php
RewriteRule . index.php

Thanks for your help on this.

Upvotes: 1

Views: 123

Answers (1)

Erwann Jallier
Erwann Jallier

Reputation: 21

I found a way to solve my problem.

Because I'm using Apache and PhP, I can easily specify an absolute in my index.php file:

<base href="<?= "http://".$_SERVER['HTTP_HOST'].str_replace("index.php", "", $_SERVER['SCRIPT_NAME']); ?>">

I hope it will help someone !

Upvotes: 0

Related Questions