此问题通常是由于Angular应用程序的基本URL不正确导致的。当应用程序位于子目录中或在服务器上托管时,这可能会发生。解决这个问题需要在应用程序的根模块中设置正确的基本URL。
例如,如果应用程序正在托管在“https://example.com/myapp/”下,则需要在根模块中设置基本URL:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([], {
// 设置基本URL为/myapp/
// 确保trailing slash存在
// 新版本Router中不需要链接PreloadAllModules
relativeLinkResolution: 'legacy',
useHash: true,
baseHref: '/myapp/'
})
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
通过设置基本URL为应用程序的实际基本URL,“RouterLinks”将解析正确的URL并正确导航。
注意,如果您使用了HashLocationStrategy,则需要将useHash设置为true,否则将其设置为false。