'router-outlet' is not a known element Angular2

Question

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

Not sure why I'm getting this error, I have Router imported in my app.component.ts

I'm trying to use the app.component to hold the main <router-outlet>, and serve up the login view first.

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);

I'm quite new to Angular2 myself. I'd try adding `RouterModule` to your app.module NgModule imports — Graham Walters, Mar 08 '17 at 14:13
there is no problem in this code. don't import `routing` and `RouterModule` beacuse `routing` is the same as `RouterModule` with some configuration — El houcine bougarfaoui, Mar 08 '17 at 14:15
Sometimes I have to stop `ng serve` and restart it for an error to go away. It always confuses the hell out of me — Graham Walters, Mar 08 '17 at 14:16
I'm still using systemjs atm so npm start, done that. Here is my repo, will make plunkr soon. https://github.com/leongaban/lifeleveler.io — Leon Gaban, Mar 08 '17 at 14:18
can't found your problem do you want me add wepack to your project instead of system.js — El houcine bougarfaoui, Mar 08 '17 at 14:34
@Bougarfaoui Sure, still not sure how webpack loaders work/do :) Yeah no idea what is going on. Wait did you `npm start` it fine? — Leon Gaban, Mar 08 '17 at 14:37
you gonna wrok with the new @angular/cli don't worry it's easy — El houcine bougarfaoui, Mar 08 '17 at 14:42

score 1 · Answer 1 · answered Mar 08 '17 at 14:20

It looks like you might be importing the RouterModule multiple times.

I would remove this line from your app.routing.ts

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

In your app.module I would import your routes with:

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

And then import the RouterModule as:

RouterModule.forRoot(routes)

score 1 · Accepted Answer · answered Mar 08 '17 at 15:17

1

I just refactored your project with webpack , your same code works just fine:

github repo

first :

npm install -g @angular/cli

npm install 

ng serve

answered Mar 08 '17 at 15:17

El houcine bougarfaoui

35,805
9
37
37

Thanks! Hmm I forked and downloaded it, `npm install` then had to update the angular-cli.json with new environment stuff from the warning, but now getting this error on ng serve `ERROR in ./src/main.ts Module build failed: TypeError: Cannot read property 'newLine' of undefined` – Leon Gaban Mar 08 '17 at 15:26
`ERROR in ./src/polyfills.ts Module build failed: TypeError: Cannot read property 'newLine' of undefined` – Leon Gaban Mar 08 '17 at 15:28
1

Checking this, because this is the answer, even though I couldn't get the app the run. Angular-CLI is the way to go with building new ng2 apps. – Leon Gaban Mar 09 '17 at 15:59

score 0 · Answer 3 · answered Mar 08 '17 at 14:19

You should add the RouterModule.forRoot(routes) statement inside your AppModule:

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

and remove it from your app.routing.ts file:

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

Still not working :( making a plnkr now but my app.component.html isn't loading, making a new question for that here: http://stackoverflow.com/questions/42674180/failed-to-load-app-component-html-in-plnkr — Leon Gaban, Mar 08 '17 at 14:36

score 0 · Answer 4 · answered Nov 03 '17 at 11:22

0

Just import RouterOutlet

import { RouterOutlet } from '@angular/router';

answered Nov 03 '17 at 11:22

Sajin M Aboobakkar

4,051
4
30
39

'router-outlet' is not a known element Angular2

app.module

app.component.ts

app.component.html

app.routing.ts

4 Answers4