2

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?

Vladimir
  • 1,751
  • 6
  • 30
  • 52

1 Answers1

4

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>.

Community
  • 1
  • 1
Tyler Jennings
  • 8,761
  • 2
  • 44
  • 39
  • I am using Angular Universal with universal-cli so after creating project I think it already have inside... – Vladimir Mar 06 '17 at 16:09
  • The examples in the Angular Universal repo https://github.com/angular/universal/tree/master/examples, the only example that uses `Routing`(the Playground example) also manually includes `BrowserModule`. https://github.com/angular/universal/blob/master/examples/playground/src/app.browser.module.ts I'm not saying that in some way the BrowserModule isn't included already, I'm just following the docs and examples. – Tyler Jennings Mar 06 '17 at 16:11