Angular 2 RC 7 with gulp leads to errors in js

Question

Today start using gulp with angular. After gulp executes tasks to compile scss and ts mistakes start to occur.

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

If i compile ts by running this command, there are no mistakes.

npm run tsc:w

I spent all day to fix this problem without no result so far. I have noticed that it happens with all my services.

Here is my 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']);

Here is my 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]));
            }
        });
    }
}

And 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);
    }
}

Thanks for any help.

Answer 1

I guess you have to provide correct options:

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

Or try to use your tsconfig.json as described in documentation.

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