Question

我有这个gulpfile，我从几个不同的地方，但我的意图是从我的应用程序代码中分离出角度代码。这是gulpfile：

'use strict';

const gulp = require('gulp');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const sourcemaps  = require('gulp-sourcemaps');
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const buffer  = require('vinyl-buffer');
const tsify = require('tsify');

const vendors = ['@angular/core', '@angular/platform-browser', '@angular/forms', '@angular/http', '@angular/platform-browser-dynamic', 'rxjs'];

var tsProject = ts.createProject("tsconfig.json");

gulp.task('quick-links-bundle', function () {
    return browserify({
        basedir: '',
        debug: true,
        entries: ['app/quick-links/src/main.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .external(vendors)
    .bundle()
    .pipe(source('quick-links.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('app/dist'));
});

gulp.task('vendor-bundle', function() {
     const b = browserify({
        debug: true
      });

      // require all libs specified in vendors array
      vendors.forEach(lib => {
        b.require(lib);
      });

      b.bundle()
      .pipe(source('vendors.min.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(uglify())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('./app/dist/'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('app/quick-links/src/*.ts', ['quick-links-bundle']);
});

// define which tasks should Gulp launch
gulp.task('default', ['quick-links-bundle', 'vendor-bundle']);

但是，当我向供应商添加数组时，我收到以下错误：

core.umd.js:3010 TypeError: this.http.get(...).toPromise is not a function
    at t.getAllLinks (quicklink.service.ts:17)
    at t.getAllLinks (quicklink-list.component.ts:24)
    at t.ngOnInit (quicklink-list.component.ts:28)
    at Wrapper_t.detectChangesInInputProps (wrapper.ngfactory.js:18)
    at _View_t0.detectChangesInternal (component.ngfactory.js:37)
    at _View_t0.t.detectChanges (core.umd.js:9305)
    at _View_t0.e.detectChanges (core.umd.js:9410)
    at _View_t_Host0.t.detectViewChildrenChanges (core.umd.js:9331)
    at _View_t_Host0.detectChangesInternal (host.ngfactory.js:33)
    at _View_t_Host0.t.detectChanges (core.umd.js:9305)

使用toPromise的服务

import { Injectable }    from '@angular/core';
import { Http, Response } from '@angular/http'

import 'rxjs/add/operator/toPromise';

import { QuickLink }      from './quicklink';

@Injectable()
export class QuickLinkService {

    private quicklinkurl = "/quick-links/v2/api";

    constructor (private http: Http) {}

    getAllLinks (): Promise<QuickLink[]> {
        return this.http.get(this.quicklinkurl + "/get-links")
            .toPromise()
            .then(response => response.json().data as QuickLink[])
            .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); 
        return Promise.reject(error.message || error);
    }
}

这很奇怪，因为Angular的其他部分工作得很好。此外，如果我将所有内容打包在同一个脚本中（从供应商数组中删除所有内容），一切正常。

this.http.get（...）。toPromise在分割供应商和应用程序代码后不是一个函数

0 个答案: