首页 文章

'router-outlet'不是Angular2的已知元素

提问于
浏览 次
3

回购：https://github.com/leongaban/lifeleveler.io

不知道为什么我收到此错误，我在我的app.component.ts中导入了路由器

我正在尝试使用 app.component 来保存主 <router-outlet> ，并首先提供登录视图 .

enter image description here

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './shared/services/auth.service';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/throw';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule,
        routing
    ],
    declarations: [
        AppComponent,
        LoginComponent
    ],
    providers: [
        AuthService,
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from './shared/models/user';
import { Router } from '@angular/router';

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
    styleUrls: ['./app/app.component.css']
})
export class AppComponent implements OnInit {
    ngOnInit() {

    }
}

app.component.html

<router-outlet></router-outlet>

app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';

export const routes: Routes = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full',
    },
    {
        path: 'login',
        component: LoginComponent
    }
]

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
javascript angular angular2-routing

4 回答

  • 0

    我刚用webpack重构你的项目，你的代码工作得很好：

    github repo

    第一：

    npm install -g @angular/cli

npm install 

ng serve
    回复于
  • 1

    看起来您可能多次导入RouterModule .

    我会从你的 app.routing.ts 删除这一行

    export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

    在您的 app.module 中，我会导入您的路线：

    import { routes } from './app.routing';

    然后将 RouterModule 导入为：

    RouterModule.forRoot(routes)
    回复于
  • 1

    您应该在 AppModule 中添加 RouterModule.forRoot(routes) 语句：

    @NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(routes)
    ],
    declarations: [
        AppComponent,
        LoginComponent
    ],
    providers: [
        AuthService,
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

    并从 app.routing.ts 文件中删除它：

    export const routes: Routes = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full',
    },
    {
        path: 'login',
        component: LoginComponent
    }
];
    回复于
  • 0

    只需导入RouterOutlet

    import { RouterOutlet } from '@angular/router';
    回复于

相关问题