如何修复:由以下原因导致的 app/app.component.html:15:1 错误:没有 RouterOutletMap 的提供者 [英] How to fix: Error in app/app.component.html:15:1 caused by: No provider for RouterOutletMap
本文介绍了如何修复:由以下原因导致的 app/app.component.html:15:1 错误:没有 RouterOutletMap 的提供者的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在这里找到了这些答案,但它们对我没有帮助.我猜 Angular 2 还在不断变化?
解决方案
您需要导入您的 appRouting
模块,而不是 RouterModule:
@NgModule({进口:[应用路由,浏览器模块,表单模块,响应式表单模块],
将 routerLink
属性添加到您的链接:
不要忘记在 HTML 页面中需要一个基本标签:
<头><base href="/"/>
I found these answers here, but they did not help me. I guess Angular 2 is still in flux?
No provider for RouterOutletMap
Getting Angular2 error 'No provider for Router! (RouterOutlet -> Router)'
My app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent }
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);
app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { appRouting } from './app.routing';
import { TemplateFormComponent } from './template/template-form.component';
import { ReactiveFormComponent } from './reactive/reactive-form.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
@NgModule({
imports: [
RouterModule,
BrowserModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
ContactComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
My app.component.ts and it's template file
import { Component } from '@angular/core';
import { User } from './shared/models/user';
@Component({
selector: 'my-app',
templateUrl: './app/app.component.html',
styleUrls: ['./app/app.component.css']
})
export class AppComponent {
}
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="/" class="navbar-brand">Scotch.io</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<router-outlet></router-outlet>
</main>
What I've tried:
ROUTER_DIRECTIVES
解决方案
You need to import your appRouting
module, instead of RouterModule:
@NgModule({
imports: [
appRouting,
BrowserModule,
FormsModule,
ReactiveFormsModule
],
Add the routerLink
attribute to your links:
<ul class="nav navbar-nav">
<li><a routerLink="">Home</a></li>
<li><a routerLink="about">About</a></li>
<li><a routerLink="contact">Contact</a></li>
</ul>
Don't forget you need a base tag in your HTML page:
<html>
<head>
<base href="/" />
这篇关于如何修复:由以下原因导致的 app/app.component.html:15:1 错误:没有 RouterOutletMap 的提供者的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文