带有 gulp 的 Angular 2 RC 7 导致 js 中的错误

Question

今天开始使用 gulp 和 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