Angular 4路由功能异常求助：首页正常其他路由报错

Hey there, I’ve dealt with this exact problem in Angular 4 projects before—this is super common with single-page apps, and it usually boils down to either a misconfigured frontend router or a server that doesn’t understand Angular’s client-side routing. Let’s walk through the fixes:

1. First, Double-Check Your Router Configuration in app.module.ts #

Make sure your routes are set up correctly and the Product component is properly registered. Here’s what a working configuration should look like:

import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';

// Define your route paths
const appRoutes: Routes = [
  { path: '', component: HomeComponent }, // Root route for your homepage
  { path: 'product', component: ProductComponent }, // Route for your Product page
  { path: '**', redirectTo: '' } // Catch-all: redirect unknown routes to homepage
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes) // Critical: use forRoot() for the root module's routes
  ],
  exports: [RouterModule]
})
export class AppModule { }

Also, don’t forget to add <router-outlet></router-outlet> in your app.component.html—this is where Angular renders your routed components. Without it, the Product component has nowhere to load!

2. Fix Server-Side Routing Conflicts #

If your router config looks good but direct visits to /product still return 404, the issue is with your server. When you type a sub-route into the address bar or refresh, the browser sends a request to the server, which doesn’t recognize Angular’s client-side routes and returns a 404. Here’s how to fix this for different environments:

For Development (Using ng serve) #

Angular CLI’s dev server has built-in support for handling this, but sometimes you need to explicitly set the base href. Try running your dev server with this command:

ng serve --base-href / --deploy-url /

Or, you can update your angular.json to enable historyApiFallback in the serve options:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build",
    "historyApiFallback": true
  }
}

For Production (Deployed to Nginx/Apache) #

Nginx Setup

Edit your Nginx config file to add a try_files directive that routes all requests to index.html:

location / {
  try_files $uri $uri/ /index.html;
}

This tells Nginx to first look for actual files, and if none exist, pass the request to Angular’s frontend router.

Apache Setup

Create a .htaccess file in your project’s root directory with these rewrite rules:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

This will redirect all non-static file requests to index.html, letting Angular handle the routing.

3. Quick Sanity Checks #

• Confirm the ProductComponent is added to the declarations array in app.module.ts—Angular can’t load components that aren’t declared here:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProductComponent // Don't forget this!
  ],
  // ... rest of your config
})

• If you’re using lazy loading for modules, double-check the loadChildren path in your routes—typos here can cause silent failures.

内容的提问来源于stack exchange，提问作者Akhil Sahu