3

I am doing the Angular2-Meteor tutorial and for the most part not changing things, but ran into an issue where the index.html root file gets rendered and double rendered inside the app component. None of the Angular2 components are rendered. Not sure what is going on.

Below is the rendered html and the major code that supports it. Any ideas or help would be appreciated.

<html>
  <head>
    <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=da39a3ee5e6b4b0d3255bfef95601890afd80709">
    <base href="/">
  </head>
  <body class=" hasGoogleVoiceExt">
    <app>
      <html>
        <head>
          <link class="__meteor-css__" href="/merged-stylesheets.css?hash=da39a3ee5e6b4b0d3255bfef95601890afd80709" rel="stylesheet" type="text/css">
          <base href="/">
        </head>
        <body>
          <app>Application Loading ...</app>
        </body>
      </html>
    </app>
    ... script files removed ...
  </body>
</html>

index.html (before render):

<head>
  <base href="/">
</head>
<body>
  <app>Application Loading ...</app>
</body>

main.ts

import { bootstrap } from 'angular2-meteor-auto-bootstrap';
import { AppComponent } from './app.component';
import { DemoComponent } from './imports/demo/demo.component';
bootstrap(AppComponent, [DemoComponent])

app.component.ts

import { Component } from '@angular/core';
import { DemoComponent } from './imports/demo/demo.component';
@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  directives: [DemoComponent]
})
export class AppComponent {
  constructor() {
  }
}

demo.component.ts

import { Component } from '@angular/core';
import { MeteorComponent } from 'angular2-meteor';
import { DemoDataService } from './demo-data.service';
@Component({
  selector: 'demo',
  templateUrl: './demo.component.html',
  providers: [DemoDataService]
})
export class DemoComponent extends MeteorComponent {
  public greeting: string;
  constructor(private demoDataService: DemoDataService) {
    super();
    this.greeting = 'Hello Demo Component!';
  }
  public getData() {
    return this.demoDataService.getData();
  }
}
4

0 回答 0