0

我正在使用 fusebox 而不是 webpack 配置我的 Angular 应用程序，并且我想要 3 个单独的包（polyfills.js、vendor.js 和 app.js）。

在 webpack 我使用这个：

'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'

作为 polyfills.ts

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

if (process.env.ENV === 'production') {
  // Production
} else {
  // Development and test
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

和 vendor.ts

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/compiler';
import '@angular/http';
import '@angular/router';
import '@angular/forms';

import 'rxjs';
import './rxjs-extensions';

使用 rxjs-extensions.ts

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

现在我把它改成了 fusebox

fuse.bundle('polyfills').instructions('> polyfills.ts');
fuse.bundle('vendor').instructions('~ main.ts vendor.ts');
fuse.bundle('app').instructions('!> [main.ts]').watch().hmr();

在这种情况下，polyfills 很好，vender 拥有来自应用程序（~main.ts）的所有 3rd 方依赖项以及 vendor.ts 中的所有依赖项，而应用程序只有项目中的内容。

它似乎编译得很好，但是当我执行代码时，我ERROR TypeError: this.http.get(...).map is not a function在我的 service.get(...).map()

我的感觉是 vendor.ts 没有导入 rxjs-extensions。

任何人都知道如何解决这个问题？

如果我只使用

fuse.bundle('polyfills').instructions('> polyfills.ts');
fuse.bundle('vendor').instructions('> vendor.ts');
fuse.bundle('app').instructions('> main.ts').watch().hmr();

它可以工作，但是我的 app.js 包包含太多东西，从 303K 变为 2.4MB

4

1 回答 1

0

确保您的订单正确。试试WebIndexPlugin它有助于自动注入脚本。如果您发布配置文件，它可能会告诉您出了什么问题

于 2017-08-26T19:08:27.313 回答