Repository navigation
Rxjs imports don't work correctly #459
Description
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
Activity
chapati23 commentedon Apr 19, 2016
i love it. once you write it down, the bug suddenly jumps at you:
instead of
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 commentedon Apr 20, 2016
@chapati23 I think there is an open PR to load all scripts through systemJS which I THINK will solve this issue.
chapati23 commentedon Apr 20, 2016
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 commentedon Apr 21, 2016
I think you'll be able to get the subject you need by editing this line (on the PR):
to
It feels kinda bothersome to list them so in the bundled list, but I couldn't find a better way.
chapati23 commentedon Apr 21, 2016
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 commentedon Apr 21, 2016
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.jsis the entry point.The build step moves stuff around so you can't import directly from
node_modules. BasicallyvendorNpmFilesrepresents the files innode_modulesthat you want to move over todist/vendor/(or justvendor/as far as SystemJS is concerned, sincedist/is standalone).For a dist build you don't want everything in
node_modules-angular-cliitself is a dependency, for instance.chapati23 commentedon Apr 22, 2016
got it, thanks. where would something like treeshake/rollup e.g. fit in then? As a broccoli plugin?
filipesilva commentedon Apr 22, 2016
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 commentedon Apr 22, 2016
Ah, great! Didn't know that.
Sent from my iPhone
angular-automatic-lock-bot commentedon Sep 5, 2019
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.