'router-outlet' is not a known element Angular 2

Question

I am using universal-cli...

My app.node.module.ts look like this:

/**
 * This file and `main.browser.ts` are identical, at the moment(!)
 * By splitting these, you're able to create logic, imports, etc that are "Platform" specific.
 * If you want your code to be completely Universal and don't need that
 * You can also just have 1 file, that is imported into both
 * client.ts and server.ts
 */

import {NgModule} from '@angular/core';
import {UniversalModule} from 'angular2-universal';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './index';
import {AlertModule, CollapseModule, } from 'ng2-bootstrap';


import {LoginComponent} from './login/login.component';
import {RegisterComponent} from './register/register.component';
import {HomeComponent} from './home/home.component';
import {SharedComponent} from './shared/shared.component';
import {NavigationComponent} from './shared/navigation/navigation.component';
import {RouterModule} from '@angular/router';
import {appRoutes} from './app.routing';

/**
 * Top-level NgModule "container"
 */
@NgModule({
    /** Root App Component */
    bootstrap: [AppComponent],
    /** Our Components */
    declarations: [AppComponent, LoginComponent, RegisterComponent, HomeComponent, SharedComponent, NavigationComponent],
    imports: [
        /**
         * NOTE: Needs to be your first import (!)
         * NodeModule, NodeHttpModule, NodeJsonpModule are included
         */
        UniversalModule,
        FormsModule,
        /**
         * using routes
         */
        CollapseModule.forRoot(),
        AlertModule.forRoot(),
        RouterModule.forRoot(appRoutes)
    ]
})
export class AppModule {

}

app.routing.ts:

import {HomeComponent} from './home/home.component';
import {LoginComponent} from './login/login.component';

export const appRoutes: any = [
    {path: '', component: HomeComponent, useAsDefault: true},
    {path: 'login', component: LoginComponent}
] 

Here is log from console:

Unhandled Promise rejection: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]"): AppComponent@0:0 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]"): AppComponent@0:0 at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:12070:19) at RuntimeCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:30623:51) at http://localhost:4200/vendor.bundle.js:30543:62 at Set.forEach (native) at RuntimeCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:30543:19) at createResult (http://localhost:4200/vendor.bundle.js:30439:19) at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:61439:26) at Zone.run (http://localhost:4200/vendor.bundle.js:61321:43) at http://localhost:4200/vendor.bundle.js:61709:57 at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:61472:35) Error: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]"): AppComponent@0:0 at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:12070:19) at RuntimeCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:30623:51) at http://localhost:4200/vendor.bundle.js:30543:62 at Set.forEach (native) at RuntimeCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:30543:19) at createResult (http://localhost:4200/vendor.bundle.js:30439:19) at ZoneDelegate.invoke (http://localhost:4200/vendor.bundle.js:61439:26) at Zone.run (http://localhost:4200/vendor.bundle.js:61321:43) at http://localhost:4200/vendor.bundle.js:61709:57 at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:61472:35)

Also other thinks not working like: (click)... Anyone know what can be a problem?

Answer 1

You are missing BrowserModule from your AppModule imports. It is required.

From https://angular.io/docs/ts/latest/guide/ngmodule.html

The metadata imports a single helper module, BrowserModule, which every browser app must import.

BrowserModule registers critical application service providers. It also includes common directives like NgIf and NgFor, which become immediately visible and usable in any of this module's component templates.

This is likely the reason the <router-outlet> is not recognized, is BrowserModule is required for Angular to interpret many(not all) DOM elements and attributes. Some attributes such as ngModel are imported from the FormsModule. Technically speaking, <router-outlet> comes from the RouterModule, but BrowserModule is required for the DOM rendering, which is why it fails on interepreting the tag <router-outlet>.