Angular2 usage

[guybedford]

/cc @robwormald

When installing Angular2 it still seems necessary to separately import and include reflect-metadata via:

  jspm install angular2 reflect-metadata

And then:

System.import('reflect-metadata').then(function() {
 System.import('angular2');
});

Ideally Angular2 would contain this reference in its override. It's probably as simple as adding reflect-metadata as a dependency and a shim, but it would be good to know the right way to do this.

[robwormald]

There are two 'polyfill' type dependencies for angular2 - zone.js and reflect-metadata

If reflect-metadata can be automatically added that would be ideal. The same thing needs to happen with zone.js, but that's a little trickier as it patches a ton of browser APIs and thus really needs to be loaded first.

These two approaches work for me till its automatic -

• include both zone.js and reflect-metadata in script tags, before System.importing
  or
• import them in your main.js/.ts file before angular:

import 'zone.js'
import 'reflect-metadata'

note that zone.js is (vexingly) the name of the npm module as well as the file...
@guybedford can i express the equivalent in the override?

[guybedford]

Thanks for the update - unfortunately override dependencies only apply to globals, because the spec doesn't provide the ability to add extra deps to existing ES6 modules.

There is a new aliases feature exactly to allow this sort of thing via an override though, but it isn't implemented in overrides yet.

One way to cheat would be to find a global higher in the angular tree than the part that needs these modules that we can shim, but it doesn't look like there are any files that could equally be globals in the tree unfortunately.

Would be nice to at least document this somewhere for users otherwise so that it is clear as it seems to be a common catch at the moment.

Will leave this issue open for now as well.

[robwormald]

see also robwormald/fix-me-rob@54e1d7e

@guybedford we can add the appropriate config into the package.json in the distribution - so if you can let me know what the ideal config should look like, i'll add it into angular2. It's generated from this template -

While we're at it: Some form of an es6 polyfill is needed - some of the ES6 Array methods are present in the commonJS source - Array.fill is the one that blows up for anyone who's reading. The traceur/babel runtimes satisfy this, but they don't necessarily get included when consuming the commonjs source.

[nschipperbrainsmith]

@robwormald Not sure if i can post this question here but after doing the above fix (like i did previously by manually including it) i indeed still see the following error:

Uncaught (in promise) TypeError: list.fill is not a function at Function.ListWrapper.fill (http://todo2.local/jspm_packages/npm/[email protected]/src/facade/collection.js:291:10) at new DynamicChangeDetector (http://todo2.local/jspm_packages/npm/[email protected]/src/change_detection/dynamic_change_detector.js:35:30) at DynamicProtoChangeDetector.instantiate (http://todo2.local/jspm_packages/npm/[email protected]/src/change_detection/proto_change_detector.js:30:12) at AppViewManagerUtils.createView (http://todo2.local/jspm_packages/npm/[email protected]/src/core/compiler/view_manager_utils.js:46:56) at AppViewManager.createRootHostView (http://todo2.local/jspm_packages/npm/[email protected]/src/core/compiler/view_manager.js:75:32) at http://todo2.local/jspm_packages/npm/[email protected]/src/core/compiler/dynamic_component_loader.js:73:44

How would i go about fixing this? How would i force commonjs to include a runtime like bable/traceur without doing it manually?
The source currently: https://bitbucket.org/schippie/angular-2-jspm-hello-world/src

[johnlindquist]

@schippie That's the error you get when you don't include/import the es6-shim because TypeScript doesn't polyfill like traceur does. Read through this: https://gist.github.com/robwormald/429e01c6d802767441ec

[nschipperbrainsmith]

@johnlindquist his comment here disappeared pointing me towards the github link. And my comments over there disappeared as well, which is really weird.

[robwormald]

@schippie that discussion was happening over here: systemjs/systemjs#434 (comment) - don't worry, i've lost track too :D

I'm seeing the same thing as @jimthedev over here systemjs/systemjs#434 (comment), looking into it now....

[robwormald]

@jimthedev err, that's a big DUHHH on my part. presumably you're using TypeScript, and of course bundling isn't supported directly yet. The error message I'd seen previously while doing this mistakenly has changed, so it threw me for a bit of loop.

Part of the reason I use a "virtual" directory here (app/) is that it means its trivial to change the location SystemJS pulls your source in from - so I've been using the TSC compiler to compile TS -> ES6 to /temp, and then mapping app/ to temp/ - then when you build (using traceur) everything works nicely.

Bit of a faff workaround, but only temporary.

[jimthedev]

@robwormald Ah. Makes total sense. Thanks. I'll keep an eye out for direct
TypeScript bundling since I don't really need this now but know I will in
the future. Appreciate you taking a look.
On Fri, Jun 19, 2015 at 1:34 AM Rob Wormald [email protected]
wrote:

@jimthedev https://github.com/jimthedev err, that's a big DUHHH on my
part. presumably you're using TypeScript, and of course bundling isn't
supported directly yet. The error message I'd seen previously while doing
this mistakenly has changed, so it threw me for a bit of loop.

Part of the reason I use a "virtual" directory here (app/) is that it
means its trivial to change the location SystemJS pulls your source in from

• so I've been using the TSC compiler to compile TS -> ES6 to /temp, and
  then mapping app/ to temp/ - then when you build (using traceur) everything
  works nicely.

Bit of a faff workaround, but only temporary.

—
Reply to this email directly or view it on GitHub
#432 (comment).