Why website is broken when i reload the page?

Issue

I used fuse template to build an angular project. I made it but when i reload the page website are broken. This is the mistake output:

Server Error 404 – File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.

Someone told that it is about app.module.ts but i do not know how to fix it. Could anyone help me to solve this problem?
Here is my app.module code=>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';
import { MarkdownModule } from 'ngx-markdown';
import { FuseModule } from '@fuse';
import { FuseConfigModule } from '@fuse/services/config';
import { FuseMockApiModule } from '@fuse/lib/mock-api';
import { CoreModule } from 'app/core/core.module';
import { appConfig } from 'app/core/config/app.config';
import { mockApiServices } from 'app/mock-api';
import { LayoutModule } from 'app/layout/layout.module';
import { AppComponent } from 'app/app.component';
import { appRoutes } from 'app/app.routing';

const routerConfig: ExtraOptions = {
    preloadingStrategy       : PreloadAllModules,
    scrollPositionRestoration: 'enabled'
};

@NgModule({
    declarations: [
        AppComponent
    ],
    imports     : [
        BrowserModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(appRoutes, routerConfig),

        // Fuse, FuseConfig & FuseMockAPI
        FuseModule,
        FuseConfigModule.forRoot(appConfig),
        FuseMockApiModule.forRoot(mockApiServices),

        // Core module of your application
        CoreModule,

        // Layout module of your application
        LayoutModule,

        // 3rd party modules that require global configuration via forRoot
        MarkdownModule.forRoot({})
    ],
    bootstrap   : [
        AppComponent,
    ],
})
export class AppModule
{
}

Solution

Try to update this line

RouterModule.forRoot(appRoutes, routerConfig),

to

RouterModule.forRoot(routes, { useHash: true })

or

import { HashLocationStrategy, LocationStrategy } from '@angular/common';
@NgModule({
    declarations: [...],
    imports: [...],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})
export class AppModule {}

Answered By – Mahesh T.

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.