0

我有 angular 2 在流星内运行。我一直在关注它的教程并坚持这一步：

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

我似乎无法弄清楚为什么引用 *ngfor 的 app.component.html 文件会抛出该错误，因为所有 angular 和 angular2-meteor npm 包都安装在我的 node_modules 目录中。这是我的 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 repo 重新复制了客户端文件夹中的所有文件内容，但仍然无法正常工作。它仍然无法识别 *ngFor 标签，它以某种方式告诉我我的流星项目无法识别角度，或者可能是我的节点安装和操作系统浏览器组合。我在 Windows 7 上使用 Chrome，节点版本：v6.3.1

更新2：我认为@neeraj 提到我应该首先解决的问题......那就是我的 app.component.html 文件不应该有 head 或 body 标签。我认为这是正确的，因为流星将您的 html 文件内容添加到其“主”html 文件中，因此不需要头部和身体标签。但是，当我在 app.component.html 文件中省略 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 回答