How to fix: Error in app/app.component.html:15:1 c

2019-03-02 03:06发布

站内问答 / JavaScript
1724 1 5

enter image description here

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

enter image description here

1条回答
Evening l夕情丶
2楼-- · 2019-03-02 03:39

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="/" />
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)