如何修复：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（{
进口：[
appRouting，
BrowserModule，
FormsModule，
ReactiveFormsModule
]，
添加 routerLink 属性到您的链接：
< ul class =nav navbar-nav>
< li> < a routerLink =>主页< / a>< / li>
< li>< a routerLink =about>关于< / a>< / li>
< li>< a routerLink =contact>联系< / a>< / li>
< / ul>
不要忘记你的HTML页面需要一个基本标签：
< html>
< head>
< 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屋！
查看全文
