Search code examples
angularhttp-status-code-404angular2-routing

Angular 14: Not found errors on CSS and JS files when using Routing

I have the following child routing specified in the app-routing.module.ts file:

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  {
    path: 'home', component: HomeComponent, children: [
      {
        path: 'ingredients',
        component: IngredientsComponent
      }]
  },
];

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

The home.component.html template looks like:

...
...
...
    <div [routerLink]="'ingredients'">Ingredients</div>
    <button type="submit" class="flex w-max justify-center items-center space-x-2 rounded-md border border-transparent bg-red-600 py-2 px-4 text-base text-white hover:bg-red-700 focus:outline-none">
      <span>Log out</span>
    </button>
  </div>
  <div class="flex flex-row bg-white">
    <router-outlet></router-outlet>
  </div>
</div>

When i click the routerLink, everything works fine, the ingredients.component.html template is inserted at <router-outlet></router-outlet> and the page is renders fine.

Although when i just type the url in the browser window http://localhost:4200/home/ingredients

The page is not loaded, and the console says:

enter image description here

My index.html looks like:

<app-root></app-root>

My app.component.html looks like:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <!-- Background shape -->
  <div class="fixed top-0 -z-10 w-full h-1/2 bg-gradient-to-r from-amber-500 to-amber-400"></div>
  <div class="text-center mt-24 mb-24">
    <p class="text-5xl font-Poppins font-bold text-white mb-4">Shopping Buddy <fa-icon [icon]="shoppingBagIcon" size="sm"></fa-icon></p>
      <ng-container *ngIf="showSecondaryText">
        <p class="text-2xl font-bold font-Poppins text-white">Clever grocery list for weekly shopping.</p>
      </ng-container>
  </div>
  <router-outlet></router-outlet>
</body>
</html>
Solution

  • How your app.component.html looks like?

    It turns out you have altered something on the default base href can you check in your index.html the base please?