Tapakan Tapakan - 2 months ago 11
TypeScript Question

Angular 2 RC 7 with gulp leads to errors in js

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

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

Comments