Navigation Menu

Skip to content
This repository has been archived by the owner on Jun 15, 2023. It is now read-only.

Issue resolving third party dependencies in UMD bundles #1653

Closed
colinbate opened this issue Jan 27, 2017 · 1 comment
Closed

Issue resolving third party dependencies in UMD bundles #1653

colinbate opened this issue Jan 27, 2017 · 1 comment
Labels

Comments

@colinbate
Copy link
Contributor

Description

It seems like I need to manually import some of Angular's transitive dependencies.

Expected behavior

If I don't need to import anything from rxjs in my Angular application, the appropriate parts of rxjs needed for Angular to function should still be available to it.

Actual behavior

If I don't import rxjs, or only import specific parts of it like rxjs/Observable, then the parts required by the various Angular modules like @angular/forms don't resolve at run time.

Environment

  1. Brunch: 2.10.3
  2. Node: 6.9.1
  3. NPM: 3.10.8
  4. Operating system: Windows 7

Notes

I ran into this today while doing some code tidying. I noticed that we were importing the whole rxjs library in one file, but were supposed to be only importing the parts we needed like rxjs/Observable or rxjs/add/operator/map. After I removed the reference to the whole package, I started getting run time errors saying that some third party npm module (Angular) couldn't resolve rxjs/add/operator/whatever. If I manually imported that particular operator, it would fail with another package requiring a different operator. I played it safe for now and just re-referenced the whole base package of rxjs.

The issue here is that these Angular (and other) packages are actually UMD bundles and I suspect deppack isn't finding their dependencies correctly. Another thing that I noticed is that the package.json file for one of the offending packages (@angular/forms) doesn't list rxjs as any kind of dependency. I'm not sure it matters. However, the UMD bundle for it includes a shared Angular EventEmitter which does need rxjs. The UMD header defines this dependency however:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operator/toPromise'), require('rxjs/Subject'), require('rxjs/Observable'), require('rxjs/observable/fromPromise')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/operator/toPromise', 'rxjs/Subject', 'rxjs/Observable', 'rxjs/observable/fromPromise'], factory) :
    (factory((global.ng = global.ng || {}, global.ng.forms = global.ng.forms || {}),global.ng.core,global.Rx.Observable.prototype,global.Rx,global.Rx,global.Rx.Observable));
}(this, function (exports,_angular_core,rxjs_operator_toPromise,rxjs_Subject,rxjs_Observable,rxjs_observable_fromPromise) {
...
@colinbate
Copy link
Contributor Author

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Development

No branches or pull requests

3 participants