Meteor doesn't render html template but only path

Question

I just start new project in angular meteor according this:

https://angular-meteor.com/tutorials/whatsapp2/meteor/setup

And my browser shows this below, which is the path to file where is placed html content:

But, in browser it should be only My App. Meteor doesnt render html temlate content, but path to content. Please give me advice. Thanks.

app.component.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import template from './app.html';

@Component({
  selector: 'my-app',
  template
})
export class MyApp {
  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      if (platform.is('cordova')) {
        StatusBar.styleDefault();
        Splashscreen.hide();
      }
    });
  }
}

app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { BrowserModule } from '@angular/platform-browser';

import { MyApp } from './app.component';

@NgModule({
    declarations: [
      MyApp
    ],
    imports: [
      IonicModule.forRoot(MyApp),
      BrowserModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      MyApp
    ],
    providers: [
      { provide: ErrorHandler, useClass: IonicErrorHandler }
    ]
  })
  export class AppModule {}

main.html:

<head>
  <title>Ionic2-MeteorCLI-WhatsApp</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="theme-color" content="#4e8ef7">
</head>

<body>
  <ion-app></ion-app>
</body>

tsconfig.json:

{
    "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "baseUrl": ".",
      "declaration": false,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [
        "dom",
        "es2015"
      ],
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "target": "es5",
      "skipLibCheck": true,
      "stripInternal": true,
      "noImplicitAny": false,
      "typeRoots": [
        "node_modules/@types/"
      ],
      "types": [
        "meteor-typings",
        "@types/underscore"
      ]
    },
    "include": [
      "client/**/*.ts",
      "server/**/*.ts",
      "imports/**/*.ts"
    ],
    "exclude": [
      "node_modules"
    ],
    "compileOnSave": false,
    "atom": {
      "rewriteTsconfig": false
    }
  }

Edit:

Thank you for answer. After editing format of template => I got new error. My page is now empty (there should be text "My app") and I have new Error in console:

ERROR RangeError: Maximum call stack size exceeded
    at Object.resolveDep (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:40111)
    at Injector_.get (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:39683)
    at Object.resolveDep (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:40179)
    at Injector_.get (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:39683)
    at Object.resolveDep (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:40179)
    at Injector_.get (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:39683)
    at Object.resolveDep (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:40179)
    at Injector_.get (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:39683)
    at Object.resolveDep (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:40179)
    at Injector_.get (modules.js?hash=3bc92748a65daa75c5e4de9e0dbe6210430d61f0:39683)

I'm also having this issue. @Urigo, you edited the question but didn't answer? :-/ — Day Davis Waterbury
I haven't solved it until now. I am a little disappointed with meteor. I would appreciate some suggestion, how to solve it. Thanks — antos junior
As far as I can tell, Urigo's tutorial is b0rked because of package versions and compatibility divergence. Note that it's some years old. Also note that the majority of unsolved issues in this stack are related to this tutorial. If I knew the answers, I'd contribute them, but I don't and I'm stumped finding only other lost souls out here. At this point, I'm thinking to abandon the idea of using Meteor/Angular/Ionic together and playing with the idea of just building my app in Ionic. Still on the hunt though for the perfect JS full stack. — Day Davis Waterbury

Paul Cochrane Paul Cochrane · Accepted Answer · 2018-09-25T22:27:03

The compiler package and angular now need a slightly different format. Remove the import line and update the component

@Component({ selector: 'my-app', templateUrl: ‘./app.html’ })

Meteor doesn't render html template but only path

1 Answers