Angular 2 does not render custom tags in the template HTML

Question

I am having a weird behaviour with Angular 2. Actually, my application is pretty straightforward. It has a main page component called kys-app. In that, I am specifying the template HTML as kys-app.html. The HTML is also very simple. It has four parts: header, sidemenu, footer and the main contents. Header, footer and sidemenu have their own template HTMLs which are defined in their own component files. (header.ts, footer.ts and sidemenu.ts). The main content is expected to be displayed in router-outlet. Here is kys-app.ts :

            import { Component, OnInit, Input, Injectable, Inject, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
            import { Router, RouterModule }         from '@angular/router';
            import { FormsModule }                  from '@angular/forms';
            import { HttpModule, XHRBackend }       from '@angular/http';

            //import { HeaderComp }      from '../../components/app/header';
            import { FooterComp }        from '../../components/app/footer';
            //import { SideMenuComp }    from '../../components/app/side-menu';
            //import { AuthGuard }       from '/app/services/auth-guard';

            @Component({
                imports: [ HttpModule, RouterModule ],
                selector: 'kys-app',
                templateUrl: '/app/components/app/kys-app.html',
                directives: [ FooterComp ], 
                schemas:      [ CUSTOM_ELEMENTS_SCHEMA ]
               // providers: [ {provide: Router, useClass: RouterModule} ]
            })

            export class KYSAppComp {

                 constructor() {
                     console.log(' %% KYSAppComp %%');

                 }
            }

And my kys-app.html content is as follows:

            <!-- Main Content -->
                <section class="content-wrap">
                    <div class="card-panel">

                  <router-outlet></router-outlet>

                <!--   Footer -->
                <kys-footer></kys-footer>
                    </div>

                </section>
                <!-- /Main Content -->

Note: In order to simplify it, temporarily I removed header and sidemenu components. So, when I access the main page, I expect to see the main content in router-outlet section and below it the footer contents.

What I am seeing is: Although the main contents (the contents of the component that I am accessing through the Router path (e.g: /#/login )) are correctly being displayed but other sections of kys-app are not being displayed (e.g footer contents). In other words Angular 2 does not render the custom tags defined in kys-app (e.g.: <kys-footer> ).

Could anyone have a look at the codes above and tell me what I might be doing wrong?

Answer 1

imports: [] needs to go to @NgModule(), it's invalid in @Component() same with directives: [ FooterComp ],, which should be

 @NgModule({ 
   imports: [ HttpModule, RouterModule ],
   declarations: [ FooterComp ], 

You seem to somehow mix pre 2.0.0 final with post 2.0.0 final style. Please check the docs at angular.io for more details how to create components and modules.