Angular 2 Component templateUrl not showing

Question

I am porting a knockoutjs app to Angular 2. I have an Angular 2 component that at this stage consists purely of an html template (of the landing page of the web app).

However, none of the html is showing in the website. I know the angular 2 part of the website is working because I did have the page saying "my first angular 2 app", before I changed it to show the landing page.

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<landing-page></landing-page>'
})
export class AppComponent { }

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

landingpage.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'landing-page',
  templateUrl: 'app/scripts/landingpage.component.html',
})
export class LandingPage { }

landingpage.component.html:

<div id="landing-page" style="background-color: #696969;overflow-y:auto;" class="full-size special">
<div id="google-attribute"></div>
    <div style="height:100%;padding: 40px 40px 40px 40px; min-height:600px;">
        <div class="row sm" style="height:20%;">
            <div class="col-xs-3" style="height:100%;">
                <img class="small-monster" width="100"  src="assets/images/home_page/monster2.png"/>
            </div>
            <div class="col-xs-6"></div>
            <div class="col-xs-3 small-monster" style="height:100%;">
                <img class="small-monster" style="float:right;" width="100"  src="assets/images/home_page/monster4.png"/>
            </div>
        </div>
        <div class="row main-row">
            <div class="col-sm-3 bm" style="height:100%;">
              <div class="vertical-center">
                <img width="250"  src="assets/images/home_page/monster2.png"/>
              </div>
            </div>
            <div class="col-sm-12 col-md-6" style="height:100%;" >
                <div id="motto-text" class="vertical-center">
                    <h5 class="white-text medium-text">THE VEGAN REPOSITORY</h5>
                    <h1 id="main-text"
                        class="text-center white-text display-3">
                        FIND VEGAN STUFF* NEAR YOU.
                    </h1>
                    <a  id="try-now-button"
                        class="with-border clickable"
                        href="#search-filter-page" >
                        <h5 class="text-center medium-text">TRY NOW</h5>
                    </a>
                </div>
            </div>
            <div class="col-sm-3 bm" style="height:100%;">
              <div class="vertical-center">
                <img width="250"  src="assets/images/home_page/monster4.png"/>
              </div>
            </div>
            <div class="row br">
                    <div class="col-xs-12" style="display:table;height:100%;">
                      <h4 style="color:#FFF; display: table-cell; vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
                  </div>
            </div>
        </div>
    </div>
</div>

What is the missing link, that's stopping my html from displaying?

yurzui · Accepted Answer · 2016-07-24 07:38:25Z

3

landingpage.component.ts

@Component({
  selector: 'my-app',
  template: '<landing-page></landing-page>',
  directives: []
})
export class LangingPage { } <== it should be not AppComponent

Then you have to import it in your app.component.ts:

import { LangingPage } from './landingpage.component'

And don't forget to add it to directives metadata of component:

@Component({
  selector: 'my-app',
  template: '<landing-page></landing-page>',
  directives: [LangingPage ] <== this line
})
export class AppComponent { }

answered Jul 24, 2016 at 7:38

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 Component templateUrl not showing

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related