📜  没有设置基础href.请提供 APP_BASE_HREF 令牌的值或向文档添加基本元素. (1)

📅  最后修改于: 2023-12-03 14:56:02.968000             🧑  作者: Mango

关于错误消息:没有设置基础 href.请提供 APP_BASE_HREF 令牌的值或向文档添加基本元素.

如果你在使用 Angular 应用程序时遇到了类似于“没有设置基础 href.请提供 APP_BASE_HREF 令牌的值或向文档添加基本元素.” 这样的错误消息,那么不要惊慌!这个问题其实是比较容易解决的。

这个错误消息通常出现在你试图在 Angular 应用程序中使用路由时。产生这个错误的原因是因为应用程序的基本 href 即“”没有被正确地配置。

在 Angular 应用程序中,这个 href 默认情况下是被设置为“/”,也就是根路径。但是,在某些情况下,这个基本 href 需要被手动配置,主要是为了解决一些 URL 相关的问题。

解决这个问题的方法很简单:你只需要在你的 Angular 应用程序的“app.module.ts”文件中添加对“APP_BASE_HREF”令牌的引用,并将其设置为“/”即可。

以下是一个示例代码片段:

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: '',
        component: HomeComponent
      }
    ])
  ],
  declarations: [
    AppComponent,
    HomeComponent
  ],
  providers: [
    { provide: 'APP_BASE_HREF', useValue: '/' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在这个代码片段中,我们在“providers”数组中添加了一个“APP_BASE_HREF”令牌,并将其设置为“/”。这样就可以解决这个错误了。

当然,如果你的基本 href 不是“/”,那么你需要将其设置为相应的值。需要注意的是,这个值需要与你的 Web 服务器上设置的相同。

总结一下,如果你在使用 Angular 应用程序时遇到了“没有设置基础 href.请提供 APP_BASE_HREF 令牌的值或向文档添加基本元素.” 这样的错误消息,你只需要在“app.module.ts”文件中添加对“APP_BASE_HREF”令牌的引用,并将其设置为正确的基本 href 即可。