Блог

Сегодня начните использовать 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);
    }
}
  

Спасибо за любую помощь.

Я думаю, вы должны предоставить правильные параметры:

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

Или попробуйте использовать ваш tsconfig.json , как описано в документации.

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