Angular routing does not work after deploy in prod. But work on localhost with ng serve

Viewed 33

I have a project in angular 8.3.29. when I test with ng server, all run in right way. When I deploy on azure (ng build -prod), I have 404 error.

here you can see my route:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { MeetingendedComponent } from './pages/meetingended/meetingended.component';
import { VideosessionComponent } from './pages/video/videosession/videosession.component';

export const routes: Routes = [
  //{ path: '', component: DashboardComponent, pathMatch: 'full' },
  {
    path: 'video/:id',
    component: VideosessionComponent,
  },
  {
    path: 'meeting-ended',
    component: MeetingendedComponent
  }
];

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

and my module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { LoaderComponent } from './pages/loader/loader.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';
import { VideochatService } from './services/videochat.service';
import { CommonService } from './services/common.service';
import { DatetimeService } from './services/datetime.service';
import { StorageService } from './services/storage.service';
import { InterceptService } from './services';
import { VideosessionComponent } from './pages/video/videosession/videosession.component';
import { CameraComponent } from './pages/video/camera/camera.component';
import { OtmvideoComponent } from './pages/video/otmvideo/otmvideo.component';
import { AppRoutingModule } from './app-routing.module';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { MeetingendedComponent } from './pages/meetingended/meetingended.component';

@NgModule({
  declarations: [
    AppComponent,
    LoaderComponent,
    VideosessionComponent,
    CameraComponent,
    OtmvideoComponent,
    DashboardComponent,
    MeetingendedComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgbModule,
    CommonModule,
    AppRoutingModule,
    AngularFontAwesomeModule
  ],
  exports:[AppComponent, VideosessionComponent, CameraComponent, ],
  providers: [CommonService, DatetimeService, InterceptService, StorageService, VideochatService],
  bootstrap: [AppComponent]
})
export class AppModule { }

I call on browser with href: https://vinchatfrontend.azurewebsites.net/video/fd2a1815-11b1-4060-6f68-08d96181122c

Do you have any idea?

Thanks Alessandro

0 Answers
Related