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

标签 javascript angular angular2-routing

repo :https://github.com/leongaban/lifeleveler.io

不确定为什么会出现此错误,我在我的 app.component.ts 中导入了 Router

我正在尝试使用 app.component持主<router-outlet> ,并首先提供登录 View 。

enter image description here

应用程序模块

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

应用程序组件.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>

应用程序路由.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);

最佳答案

我刚刚用 webpack 重构了你的项目,你的相同代码工作得很好:

github repo

首先:

npm install -g @angular/cli

npm install 

ng serve

关于javascript - 'router-outlet' 不是 Angular2 的已知元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42673406/

相关文章:

javascript - 使用 Marko.js 发出值的正确方法

javascript - Google Maps V3 不会删除事件监听器

css - Angular Kendo Grid 不可滚动,并允许高度适合行内容?

Angular2 + RxJS - 无法读取未定义的下一个属性

Angular:如何确定带参数的事件路线?

javascript - 单击 html 按钮发送电子邮件

返回后执行的 JavaScript 代码

javascript - 如何使用angular创建可重用的音频播放器组件

Angular2 - 将 routerLink 参数添加到所选表值

javascript - Angular 2 子路由未解决