Rxjs imports don't work correctly #459

chapati23 · 2016-04-19T16:01:24Z

I'm migrating my app over from a JSPM setup and running into issues with Rxjs Imports.
Created a new app with ng new test-app so no crazy settings or something.

It might be that it's just a misunderstanding on my part on how importing 3rd-party-packages works in angular-cli vs. jspm (where i can just jspm install abc and then import 'abc')

Error Msg
When bootstrapping the app, I get:

angular2.dev.js:23941 TypeError: rxjs_1.BehaviorSubject is not a constructor
    at new CategoryService (category.service.ts:12)
    at angular2.dev.js:1418
    at Injector._instantiate (angular2.dev.js:11770)
    at Injector._instantiateProvider (angular2.dev.js:11709)
    at Injector._new (angular2.dev.js:11699)
    at InjectorDynamicStrategy.getObjByKeyId (angular2.dev.js:11577)
    at Injector._getByKeyDefault (angular2.dev.js:11900)
    at Injector._getByKey (angular2.dev.js:11854)
    at Injector._getByDependency (angular2.dev.js:11842)
    at Injector._instantiate (angular2.dev.js:11738)

Repro steps
In a service I do (shortened for clarity):

import { BehaviorSubject, Subject } from 'rxjs'
export class MyService {
    public categories$: Subject<Array<Category>>

    constructor( private http: Http ) {
        this.categories$ = new BehaviorSubject([])
    }
}

index.html

  <body>
    <app>Loading...</app>

    <script src="vendor/es6-shim/es6-shim.js"></script>
    <script src="vendor/systemjs/dist/system-polyfills.js"></script>
    <script src="vendor/angular2/bundles/angular2-polyfills.js"></script>
    <script src="vendor/systemjs/dist/system.src.js"></script>

    <script src="vendor/angular2/bundles/angular2.dev.js"></script>
    <script src="vendor/angular2/bundles/http.dev.js"></script>
    <script src="vendor/angular2/bundles/router.dev.js"></script>
    <script src="vendor/papaparse/papaparse.js"></script>
    <script src="vendor/fuzzy/lib/fuzzy.js"></script>
    <script src="vendor/dropzone/dist/dropzone.js"></script>

    <script>
        System.config({
          map: {
            '@ngrx/store': 'vendor/@ngrx/store',
            'rxjs': 'vendor/rxjs'
          },
          packages: {
            app: {
              format: 'register',
              defaultExtension: 'js'
            },
            '@ngrx/store': {
              main: './dist/index.js'
            },
            'rxjs': {
              main: './bundles/Rx.js',
              map: {
                './BehaviorSubject': './subject/BehaviorSubject.js'
              }
            }
          }
        });
        System.import('app.js').then(null, console.error.bind(console));
    </script>
  </body>

also tried explicitly including Rx.js in a <script>-tag like in the default project => same result
also tried without 'rxjs': { map: … } => same result

angular-cli-build.js

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  var app = new Angular2App(defaults, {
    vendorNpmFiles: [
      '@ngrx/store/dist/*.js',
      'rxjs/**/*.js',
      'papaparse/papaparse.js',
      'fuzzy/lib/fuzzy.js',
      'dropzone/dist/dropzone.js'
    ]
  });
  return app.toTree();
};

Versions
OSX 10.11.4
angular-cli: 0.0.31
node: 5.10.1
os: darwin x64

The text was updated successfully, but these errors were encountered:

chapati23 · 2016-04-19T16:08:22Z

i love it. once you write it down, the bug suddenly jumps at you:

'rxjs': { main: './Rx.js', }

instead of

'rxjs': { main: './bundles/Rx.js', }

did the trick. Still leaving this open, though, for some feedback.

Including the Rx.js bundle via script-tag gave me the impression Rx.js would work out of the box.
Might be worth adding some documentation that in fact it's not enough if you want to import Rx.js types in your typescript-files. (unless i screwed up and there's a simpler way than the above)

deebloo · 2016-04-20T21:40:38Z

@chapati23 I think there is an open PR to load all scripts through systemJS which I THINK will solve this issue.

chapati23 · 2016-04-20T22:47:54Z

thanks @deebloo, I see: #481

that could help, i'll wait until it gets merged and try to refactor then. for now i'm glad everything's running :)

filipesilva · 2016-04-21T00:21:07Z

I think you'll be able to get the subject you need by editing this line (on the PR):

'rxjs-bundle': ['rxjs/*', 'rxjs/observable/*', 'rxjs/operator/*'],

to

'rxjs-bundle': ['rxjs/*', 'rxjs/observable/*', 'rxjs/operator/*', 'rxjs/subject/*'],

It feels kinda bothersome to list them so in the bundled list, but I couldn't find a better way.

chapati23 · 2016-04-21T07:44:18Z

yeah. I kinda liked the jspm approach where you basically just map the package-folder and can then import whatever your packages exports. is importing 3rd-party scripts from node_modules directly no option?

I'm still not understanding where exactly angular-cli compiles typescript, i think

filipesilva · 2016-04-21T11:52:23Z

The CLI compiles Typescript files (and other stuff like sass/less/stylus) as a part of it's brocolli based build system, so it's logic is all internal. By the time it gets to SystemJS, all app files are already compiled down to SystemJS modules inside of js files.

If you're curious, feel free to check https://github.com/angular/angular-cli/tree/master/lib/broccoli, where angular2-app.js is the entry point.

The build step moves stuff around so you can't import directly from node_modules. Basically vendorNpmFiles represents the files in node_modules that you want to move over to dist/vendor/ (or just vendor/ as far as SystemJS is concerned, since dist/ is standalone).

For a dist build you don't want everything in node_modules - angular-cli itself is a dependency, for instance.

chapati23 · 2016-04-22T14:09:52Z

got it, thanks. where would something like treeshake/rollup e.g. fit in then? As a broccoli plugin?

On 21.04.2016, at 13:52, Filipe Silva notifications@github.com wrote:

The CLI compiles Typescript files (and other stuff like sass/less/stylus) as a part of it's brocolli based build system, so it's logic is all internal. By the time it gets to SystemJS, all app files are already compiled down to SystemJS modules inside of js files.

If you're curious, feel free to check https://github.com/angular/angular-cli/tree/master/lib/broccoli, where angular2-app.js is the entry point.

The build step moves stuff around so you can't import directly from node_modules. Basically vendorNpmFiles represents the files in node_modules that you want to move over to dist/vendor/ (or just vendor/ as far as SystemJS is concerned, since dist/ is standalone).

For a dist build you don't want everything in node_modules - angular-cli itself is a dependency, for instance.

—
You are receiving this because you modified the open/close state.
Reply to this email directly or view it on GitHub

filipesilva · 2016-04-22T14:15:37Z

Quite likely, yes. We're still working on the process so that might change though. Current plan is to use SystemJS builder for production builds, and I believe it uses rollup internally so you'd end up only with stuff you use.

chapati23 · 2016-04-22T14:39:58Z

Ah, great! Didn't know that.

Sent from my iPhone

On 22.04.2016, at 16:15, Filipe Silva notifications@github.com wrote:

Quite likely, yes. We're still working on the process so that might change though. Current plan is to use SystemJS builder for production builds, and I believe it uses rollup internally so you'd end up only with stuff you use.

—
You are receiving this because you modified the open/close state.
Reply to this email directly or view it on GitHub

angular-automatic-lock-bot · 2019-09-05T19:41:42Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

chapati23 closed this as completed Apr 20, 2016

isaacplmann mentioned this issue Apr 6, 2017

Subject is not a constructor isaacplmann/ngx-contextmenu#9

Closed

Skuriles mentioned this issue Aug 8, 2017

r.BevhaviourSubject is not a constructor systemjs/builder#829

Open

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rxjs imports don't work correctly #459

Rxjs imports don't work correctly #459

chapati23 commented Apr 19, 2016

chapati23 commented Apr 19, 2016 •

edited

Loading

deebloo commented Apr 20, 2016

chapati23 commented Apr 20, 2016

filipesilva commented Apr 21, 2016

chapati23 commented Apr 21, 2016

filipesilva commented Apr 21, 2016

chapati23 commented Apr 22, 2016

filipesilva commented Apr 22, 2016

chapati23 commented Apr 22, 2016

angular-automatic-lock-bot bot commented Sep 5, 2019

Rxjs imports don't work correctly #459

Rxjs imports don't work correctly #459

Comments

chapati23 commented Apr 19, 2016

chapati23 commented Apr 19, 2016 • edited Loading

deebloo commented Apr 20, 2016

chapati23 commented Apr 20, 2016

filipesilva commented Apr 21, 2016

chapati23 commented Apr 21, 2016

filipesilva commented Apr 21, 2016

chapati23 commented Apr 22, 2016

filipesilva commented Apr 22, 2016

chapati23 commented Apr 22, 2016

angular-automatic-lock-bot bot commented Sep 5, 2019

chapati23 commented Apr 19, 2016 •

edited

Loading