Question

我正在使用angular2.0.0-rc4。我已经设置了gulp任务，将所有必需的文件推送到dist文件夹以进行持续集成。但是，在组件中使用*ngFor时，执行此操作似乎会中断templateUrl。角度非常简单

组件

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

@Component({
  moduleId: module.id,
  selector: 'app',
  templateUrl: 'app.component.html'
})

export class AppComponent {
  names:string[];
  constructor(){
     this.names=['name1','name2','name3']
  }
 }

HTML

<ul>
  <li *ngFor="let name of names">{{name}}</li>
</ul>

我收到错误 Can't bind to 'ngforOf' since it isn't a known native property

对于/ dist我正在通过我认为我需要的库中的gulp任务

 return gulp.src([
        'systemjs/dist/system-polyfills.js',
        'systemjs/dist/system.src.js',
        'reflect-metadata/Reflect.js',
        'rxjs/**',
        'zone.js/dist/**',
        '@angular/**',
        'core-js/**'
    ], { cwd: 'node_modules/**' })
        .pipe(gulp.dest('./dist/lib'));

然后我在systemjs.config.js中更改地图

 var map = {
   'app': 'app', // 'dist',
   '@angular': 'lib/@angular',
   'angular2-in-memory-web-api': 'lib/angular2-in-memory-web-api',
   'rxjs': 'lib/rxjs'
 };

在index.html上我也从新创建的/ dist / lib文件夹中调用库，如此

<!-- Polyfill(s) for older browsers -->
<script src="lib/core-js/client/shim.min.js"></script>
<script src="lib/zone.js/dist/zone.js"></script>
<script src="lib/reflect-metadata/Reflect.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>

如果我通过从node_modules文件夹调用并将index.html放在网站的根目录上来使用标准的“方式”，那么一切正常。只是当我在子文件夹（/ dist）中使用它时

不太清楚我在这里做错了什么，对解决方案的任何建议甚至是更好的方法？

由于

Answer 1

我遇到的问题与你相同。我正在使用angular2.0.0-rc4和meteorjs，我将templateUrl放在我的Component中...同样的错误！我＆＃34;解决＆＃34;问题是将整个html放在模板中，而不是templateUrl。

＆＃13;

@Component({
  selector: 'app',
  template : `<body>
  <app>
    You are so crazy, {{name}}!!

   <div>
      <ul>
        <li *ngFor="let party of parties">
          {{party.name}}
          <p>{{party.description}}</p>
          <p>{{party.location}}</p>
        </li>
      </ul>
    </div>
  </app>
</body>` 
})

＆＃13;

我希望这是固定的。

Answer 2

你没有做错任何事，Angular 2默认不支持相对路径。

Angular 2 tutorial print

可以在链接中找到：

我们指定路径一直回到应用程序根目录 - 在这种情况下是app / - 因为默认情况下Angular不支持相对路径。如果我们愿意，我们可以切换到组件相对路径。

https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

* ng在将文件编译为dist文件夹时不使用templateUrl

2 个答案: