Angular 2 RC 7 with gulp導致js中的錯誤

Question

今天開始使用gulp with angular。 gulp執行任務後編譯scss和ts錯誤開始發生。

posts:19 Error: Error: Can't resolve all parameters for PostsComponent: 

如果我通過運行這個命令編譯ts，沒有錯誤。

npm run tsc:w 

我花了一整天的時間解決這個問題，目前爲止沒有任何結果。 我注意到它發生在我所有的服務中。

這裏是我的gulpfile.js

'use strict'; 

var gulp  = require('gulp'), 
    watch  = require('gulp-watch'), 
    prefixer = require('gulp-autoprefixer'), 
    sass  = require('gulp-sass'), 
    ts   = require('gulp-typescript'), 
    sourcemaps = require('gulp-sourcemaps'), 
    cssmin  = require('gulp-minify-css'); 

gulp.task('watch', function() { 
    watch(['app/**/*.scss'], function (event, cb) { 
     gulp.start('style:build'); 
    }); 

    watch(['app/**/*.ts'], function (event, cb) { 
     gulp.start('ts:build'); 
    }); 
}); 

gulp.task('style:build', function() { 
    gulp.src('app/**/*.scss', {base: "./"}) 
     .pipe(sass()) 
     .pipe(prefixer()) 
     .pipe(cssmin()) 
     .pipe(gulp.dest('.')); 
}); 

gulp.task('ts:build', function() { 
    var tsResult = gulp.src('app/**/*.ts', {base: "./"}) 
     .pipe(sourcemaps.init()) 
     .pipe(ts()); 

    return tsResult 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('.')); 
}); 

gulp.task('default', ['watch']); 

這裏是我的posts.component.ts

import { Component, OnInit } from "@angular/core" 
import { PostsService }  from "./posts.service" 
import { PostItem }   from "./post.item" 

@Component({ 
    selector : 'eva-posts', 
    providers: [ 
     PostsService 
    ], 
    templateUrl: 'app/posts/posts.template.html', 
    styleUrls : [ 
     'app/posts/posts.component.css' 
    ] 
}) 

export class PostsComponent implements OnInit 
{ 
    /** 
    * 
    */ 
    public list: Array = []; 

    /** 
    * 
    * @param service 
    */ 
    constructor(private service: PostsService) 
    { 

    } 

    ngOnInit(): void 
    { 
     let component = this; 
     this.service.all().then(function (items) 
     { 
      for (var i = 0; i < items.length; i++) { 
       component.list.push(new PostItem(items[i])); 
      } 
     }); 
    } 
} 

而且posts.service.ts

import { Injectable } from "@angular/core" 
import { Http }  from "@angular/http" 

import { PostItem } from "./post.item" 
import "rxjs/add/operator/toPromise" 

@Injectable() 
export class PostsService 
{ 
    /** 
    * Api uri 
    * @type {string} 
    */ 
    private url: string = 'https://api.tapakan.name/ru/api/posts'; 

    /** 
    * Service constructor 
    * @param http 
    */ 
    constructor(private http: Http) 
    { 

    } 

    /** 
    * 
    * @returns {Promise<PostItem[]>} 
    */ 
    all(): Promise<PostItem[]> 
    { 
     return this.http.get(this.url) 
        .toPromise() 
        .then(response => response.json().data); 
    } 
} 

感謝您的幫助。

Answer 1

我想你必須提供正確的選項：

.pipe(ts({ 
    ... 
    emitDecoratorMetadata: true 
    ... 
})) 

或者嘗試使用您的tsconfig.json作爲文檔描述。

https://github.com/ivogabe/gulp-typescript#using-tsconfigjson