未处理的 Promise 拒绝：未设置基本 href。请提供 APP_BASE_HREF 令牌的值或向文档添加基本元素答案

【问题标题】：unhandled Promise rejection: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document未处理的 Promise 拒绝：未设置基本 href。请提供 APP_BASE_HREF 令牌的值或向文档添加基本元素
【发布时间】：2018-10-13 23:57:33
【问题描述】：

当我设置路由时，我在同一解决方案中将 angular 4 项目作为 asp.net MVC 和 API 的前端工作，但出现上述错误。我的代码如下

import { NgModule } from '@angular/core';
  import { CommonModule   } from '@angular/common';


 import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from 
'../../Components/dashboard/dashboard.component';
 import { TraitComponent } from '../../Components/trait/trait.component';

  const routes: Routes = [
     { path: ' ', redirectTo: '/dashboard', pathMatch: 'full' },
     { path: 'dashboard', component:DashboardComponent  },
     { path: 'Trait', component: TraitComponent },
      //{ path: 'heroes', component:  }
    ];
     @NgModule({
      imports: [
       RouterModule.forRoot(routes) ,
                                      CommonModule
                                                         ],

exports: [RouterModule],

}) 导出类 MyAppRoutingModuleModule {

我在我的 appmodule 中注册/导入“myapprouting” 那是我的 appComponent 中的代码

<nav>
            <a routerLink="localhost:56800/dashboard">Dashboard</a>
            <a routerLink="localhost:56800/Trait">Heroes</a>
        </nav>
        <!--  <app-trait></app-trait>-->
        <router-outlet>


        </router-outlet>

【问题讨论】：

你在 index.html 中添加了<base href=”/”>
是的，我试过了，但仍然有错误：- 未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'localhost:56800/dashboard' 错误：无法匹配任何路由。 URL 段：'localhost:56800/dashboard'

标签： asp.net-mvc angular angular4-router

【解决方案1】：

app.module.ts

        import { APP_BASE_HREF } from '@angular/common'; <-- add those ***

        const appRoutes: Routes = [
          { path: 'secondpage', component: SecondPageComponent },

        ];
        @NgModule({
          declarations: [
            AppComponent,
            NameEditorComponent,
            ProfileEditorComponent,
            SecondPageComponent
          ],
          imports: [

            BrowserModule,
            // other imports ...
            ReactiveFormsModule,
            RouterModule.forRoot(
              appRoutes,
              { enableTracing: true } //
            )
          ],
          providers: [{provide: APP_BASE_HREF, useValue: '/'}], <-- add those ****        bootstrap: [AppComponent]
        })
        export class AppModule { }

【讨论】：

【解决方案2】：

尝试将 routerLink 更改为此：

[routerLink]="['/dashboard']
[routerLink]="['/Trait']

【讨论】：

问题已解决，我的代码中有一个额外的 / 谢谢和尊重
你修好了它

【解决方案3】：

在您的 app.module.ts 中，添加以下内容：

{provide: APP_BASE_HREF, useValue: '/'}

致您的**供应商：[] ** 所以它会是这样的：

providers: [{provide: APP_BASE_HREF, useValue: '/'},SomeService,AnotherService]

【讨论】：

如果我设置'提供者：[{提供：APP_BASE_HREF，useValue：'/'}]，我得到错误说：-errors.ts：42错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'localhost:56800/dashboard' 错误：无法匹配任何路由。 URL 段：'localhost:56800/dashboard' 如果我设置提供者：[{提供：APP_BASE_HREF，useValue:'localhost:56800'}]，我得到了同样的错误