流星不呈现HTML模板,仅呈现路径

时间:2018-08-28 06:32:02

标签: angular meteor render angular2-template angular-meteor

我只是根据以下内容在angular meteor中开始新项目:

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

我的浏览器在下面显示了此内容,这是pathhtml内容所在的文件:

browser output

但是,在浏览器中,它应该仅为My App。流星不呈现html temlate内容,而是呈现内容的路径。请给我建议。谢谢。

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

编辑:

谢谢您的回答。编辑模板格式=>后,出现新错误。我的页面现在为空(应该有文本“我的应用”),并且控制台中出现新的错误:

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)

1 个答案:

答案 0 :(得分:0)

编译器软件包和angular现在需要稍微不同的格式。删除导入行并更新组件

@Component({   选择器:“ my-app”,   templateUrl:“ ./ app.html” })