Question

我在一个角度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 {

我注册/导入“myapprouting”并在我的appmodule中这是我的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>

Answer 1

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

{provide: APP_BASE_HREF, useValue: '/'}

给你的**提供者：[] **所以它会是这样的：

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

Answer 2

尝试将routerLink更改为：

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

Answer 3

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 { }

未处理的承诺拒绝：没有基本的href设置。请提供APP_BASE_HREF标记的值或向文档添加基本元素

3 个答案: