0

meteor 内で angular 2 を実行しています。私はそれに関するチュートリアルに従ってきましたが、このステップで立ち往生しています:

http://www.angular-meteor.com/tutorials/socially/angular2/dynamic-template

すべての angular & angular2-meteor npm パッケージが node_modules ディレクトリにインストールされているため、 *ngfor を参照する app.component.html ファイルがそのエラーをスローする理由がわかりません。ここに私のpackage.jsonファイルがあります:

{
  "name": "angular2-meteor-base",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --driver-package practicalmeteor:mocha",
    "test:ci": "meteor test --once --driver-package dispatch:mocha-phantomjs"
  },
  "devDependencies": {
    "chai": "3.5.0",
    "chai-spies": "0.7.1"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-alpha.8",
    "angular2-meteor": "0.6.2",
    "angular2-meteor-auto-bootstrap": "0.6.0",
    "angular2-meteor-polyfills": "0.1.1",
    "angular2-meteor-tests-polyfills": "0.0.2",
    "es6-shim": "0.35.1",
    "meteor-node-stubs": "0.2.3",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12"
  }
}

app.component.html は次のとおりです。

<head>
  <title>tutorial</title>
</head>

<body>
  <h1>Welcome to Price Compare!</h1>

  <ul>
    <li>
        <span>Dubstep-Free Zone</span>
        <p>
        Can we please just for an evening not listen to dubstep.
        </p>
    </li>
    <li>
        <span>All dubstep all the time</span>
        <p>
        Get it on!
        </p>
    </li>
</ul>

<div>
  <ul>
    <li *ngFor="let party of parties">
      {{party.name}}
      <p>{{party.description}}</p>
      <p>{{party.location}}</p>
    </li>
  </ul>
</div>


</body>

app.component.ts は次のとおりです。

import { Component } from '@angular/core';

import template from './app.component.html';




@Component({
  selector: 'app',
  template
})

export class AppComponent {
  parties: any[];

  constructor() {
    this.parties = [
      {'name': 'Dubstep-Free Zone',
        'description': 'Can we please just for an evening not listen to dubstep.',
        'location': 'Palo Alto'
      },
      {'name': 'All dubstep all the time',
        'description': 'Get it on!',
        'location': 'Palo Alto'
      },
      {'name': 'Savage lounging',
        'description': 'Leisure suit required. And only fiercest manners.',
        'location': 'San Francisco'
      }
    ];
  }
}

ここに私のindex.htmlがあります：

<head>
    <base href="/">
</head>
<body>
  <app> </app>
</body>

ここに私のmain.tsがあります：

import { bootstrap } from 'angular2-meteor-auto-bootstrap';

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

bootstrap(AppComponent);

コンソール出力:

ここに画像の説明を入力

私のファイルはチュートリアルと正確に一致していると思いますが、明らかに何かが見えていないだけかもしれません...

更新 1: node_modules ディレクトリを削除して meteor npm install を再実行し、チュートリアルの git リポジトリから client フォルダー内のすべてのファイル コンテンツを再コピーしましたが、まだ機能しません。*ngFor タグをまだ認識していないため、流星プロジェクトが角度を認識していないか、ノードのインストールと OS ブラウザーのコンボが認識されていない可能性があります。Chrome を使用して Windows 7 を使用しています。ノード バージョン: v6.3.1

更新 2: @neeraj が最初に解決する必要があると述べた可能性があると思います。meteor は HTML ファイルのコンテンツを「マスター」HTML ファイルに追加するため、head タグと body タグは必要ないため、これは正しいと思います。ただし、app.componentl ファイルで head タグと body タグを省略すると、次のエラーがスローされます。

While processing files with templating (for target web.browser):
client/app.component.html:1: Expected one of: <body>, <head>, <template>
4

1 に答える 1

1

私の投稿で述べたように、「おそらく@neerajが最初に解決すべきだと言ったことがあると思います...それは私のapp.component.htmlファイルにheadタグまたはbodyタグを含めてはならないということでした」

その問題を解決すると、他のすべてが適切に解決されたように見えました ---- 私が解決した方法は、git からチュートリアルを複製し、ステップ 1 からやり直すことでした。

于 2016-09-06T00:34:11.037 に答える