File not found after refreshing page in angular 2

Question

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 {}

Do you mean a 404 if you refresh your browser? If so this is a duplicate of http://stackoverflow.com/questions/42393963/angular2-website-breaks-on-refreshing-any-page-other-than-base-url — Jeff Justice, Feb 24 '17 at 00:38
Yest, it is ! I very sorry for duplicate but i browsed many topics and many docs and nothing help. Thank you for help. I have another question. What i need to do to have link without "#" ( I need server which return at the end of link file html e.g www.test.com/about.html ) ? — Mrfet, Feb 24 '17 at 22:01
Configure your server to route 404 errors to the Angular2 bootstrap and all other routes will be passed through to the server. Then you don't need the hash location strategy. Or if you have only specific Angular routes make sure the server routes those to Angular if you still want to display a server side 404. — Jeff Justice, Feb 24 '17 at 23:08

score 1 · Answer 1 · answered Nov 09 '17 at 18:58

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/">

File not found after refreshing page in angular 2

1 Answers1