Understanding Angular 4 Production Deployment
After successfully building my first Angular 4 app, I used angular-cli to create a production build for an Apache server on Ubuntu by executing the following command:
ng build --base-href /my-new-app/ -prod
The specific setup was necessary due to other apps hosted on the Apache server with URLs like this:
Encountering a Issue
Reviewing my app-routing-module revealed the following structure:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponent } from './my-comp/my-component.component';
const routes: Routes = [
{ path: '', redirectTo: '/my-comp', pathMatch: 'full' },
{ path: 'my-comp', component: MyComponent },
{ path: '**', redirectTo: '/my-comp', pathMatch: 'full'}];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
Accessing the app via redirects correctly to . However, refreshing the page or entering leads to a "404 not found" error.
During development using ng serve --host 0.0.0.0 --open, the app functions properly, but it opens on localhost:4200/my-comp, indicating there might be differences in behavior between development and production environments.
What could be causing only the initial route to work while subsequent routes result in a 404 error during production deployment?