CODEWITHSUNDEEP
angular
Mrfet
Mrfet

Reputation: 135

File not found after refreshing page in angular 2

when I refresh my page at webserver not from command prompt then I can see file not found even when I try upload only file from dist. So I browsed some tutorials how to routing but it didn't help me. Maybe when I show my code someone find a problem!

It's my app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {AppRoutingModule, navigatableComponents} from './app.routes';
import {AppComponent} from './app.component';
import {APP_BASE_HREF} from "@angular/common";
import { HomeComponent } from './pages/index/home/home.component';
import { AboutComponent } from './pages/index/about/about.component';
import { ContactComponent } from './pages/index/contact/contact.component';
import { ProjectsComponent } from './pages/index/projects/projects.component';
import { IndexComponent } from './pages/index/index.component';

@NgModule({
  declarations: [
    AppComponent,
    ...navigatableComponents,
    HomeComponent,
    AboutComponent,
    ContactComponent,
    ProjectsComponent,
    IndexComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/fbrstudio-repository/fbr-app/fbr-app/dist/'}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.routes.ts

import {NgModule}             from '@angular/core';
import {RouterModule, Routes, Router, NavigationStart, NavigationEnd} from '@angular/router';
import {IndexComponent} from "./pages/index/index.component";
//ABOUT PAGE
import {AboutComponent} from "./pages/index/about/about.component";
//CONTACT PAGE
import {ContactComponent} from "./pages/index/contact/contact.component";
//HOME PAGE
import {HomeComponent} from "./pages/index/home/home.component";
//PROJECT PAGE
import {ProjectsComponent} from "./pages/index/projects/projects.component";

const routes: Routes = [

  {
    path: '',
    component: IndexComponent,
    children: [
      {
        path: '',
        component: HomeComponent
      },{
        path: 'about',
        component: AboutComponent
      },{
        path: 'contact',
        component: ContactComponent
      },{
        path: 'projects',
        component: ProjectsComponent
      }
    ]
  },

];

export const navigatableComponents = [
  IndexComponent,
  HomeComponent,
  AboutComponent,
  ContactComponent,
  ProjectsComponent
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {}

Upvotes: 0

Views: 864

Answers (1)

ZiaUllahZia
ZiaUllahZia

Reputation: 1142

You need to add the .htaccess in root mean where your index.html is

<IfModule mod_rewrite.c>
    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

Also use base url

<base href="/">

If your project is in subfolder like www.domainname.com/folder1/folder2, the user base URL like 

<base href="/folder1/folder2/">

Upvotes: 1

Related Questions