RC6: import @angular/core/src/facade/lang causes traceur error

[SamVerschueren]

I'm submitting a ... (check one with "x")

• bug report => check the FAQ and search github for a similar issue or PR before submitting
• support request => check the FAQ and search github for a similar issue before submitting
• feature request

Current behavior

Running an Angular2 application with ng2-translate fails because it looks for traceur.js but fails to find it. In RC6, you should import the bundles as described by @robwormald in his gist.

As I believe, you where already in contact with @robwormald for this?

Expected/desired behavior

To just work out of the box :).

Reproduction of the problem

Upgrade to RC6, load in the bundles instead and it will fail with the traceur error.

What is the motivation / use case for changing the behavior?

Because ng2-translate seems to be unusable in RC6/

Please tell us about your environment:

• ng2-translate version: 2.4.2
• Angular version: 2.0.0-rc.6
• Browser: all
• Language: TypeScript (1.8)

[ocombe]

yes, I'm on it right now, struggling with the changes to the test API which breaks my tests (the code of the lib is already updated), expect a release soon

[SamVerschueren]

Thanks for jumping on this so quickly!

[spock123]

I must admit, in my projects I had to ditch tests because of the testing API changes in ng2... It will be a while before I "trust" the testings.. given the discussions on Github..

Thank you for your effort, Olivier, it is much appreciated!

[ocombe]

yeah they really fucked things up :(
got a few friends helping me and we cannot get the setup working :D

[ocombe]

In case you missed it, I've updated the lib to rc6

[SamVerschueren]

Thanks @ocombe! Works like a charm!

[spock123]

You are the best!!

[3du4]

@ocombe This error started showing up after updating to 3.1.3.
I refered to this plnkr but the result is the same. in Systemjs is this the correct way of mapping the library?

'ng2-translate': 'npm:ng2-translate',

[ocombe]

On plunkr we map directly npm to https://unpkg.com/, that's why we use the binding npm:ng2-translate.
On your own app you should just use ng2-translate

[3du4]

I found the issue and it is happening only with this library.
the browser is trying to look for ng2-translate.js under bundles directory and it is not there.
Sorry for asking but what would be the correct settings for transpiling the ng2-translate.d.ts file?
Is there something that is needed to be done in tsconfig.json file?

[ocombe]

did you import from ng2-translate and not ng2-translate/ng2-translate ?

[SamVerschueren]

Odd, have to dig deeper into this later today. ng2-translate/ng2-translate should still work though but the preferred way of doing this now is ng2-translate.

[ocombe]

it doesn't work because there is no ng2-translate file in the bundles directory which is where is searches now, I think

[SamVerschueren]

Let me try to explain here.

First of all, I'm not an expert in SystemJS/Webpack at all. I'm pretty noob on those to be honest. BUT, when I take your plunkr, it just works. I can change the language and it changes the interface.

As you said before, the config maps 'ng2-translate': 'npm:ng2-translate'. To be clear, this has nothing to do with the UMD bundle whatsoever. More to this later on.

Open up app.component.ts which imports ng2-translate/ng2-translate. This is the "old way" but still works as ng2-translate just exposes with index.ts exposes. So both can be seen as identical. You could change that line to this

import {TranslateService} from 'ng2-translate/index';

And it will still work. This is what they call a Barrel. It's the main entry point for everything inside ng2-translate. If you would use Webpack, you could just write it like this

import {TranslateService} from 'ng2-translate';

But SystemJS does not support that (currently).

I agree that importing ng2-translate/index seems weird. But you should use the ng2-translate bundle instead. This is the part where I'm stuck currently with the plunkr so I will have to dig deeper on my local filesystem. Will try to do that later today.

@ocombe Why does the bundles directory has the type definitions? The UMD bundle has nothing to do with typings. It will not try to load them or whatsoever. If someone imports ng2-translate, TypeScript will resolve the typings as configured in the package.json, being index.d.ts. The bundle is just something that SystemJS/Weback consumes.

If you look at how Angular2 ships it

I think we should try to mimick that behavior is much as possible as people are already familiair with that.

[ocombe]

There are typings in the bundles folder because I forgot to disable typings generation when generating the bundle :D

When you import from ng2-translate/ng2-translate it takes the ng2-translate.js file at the root, which was generated when running ngc, it means that it is not UMD but ES2015 module, and I think that's a problem for systemjs, maybe we should just switch it back to commonjs instead to be sure that it works everywhere (and keep the bundle as umd) ?

[SamVerschueren]

There are typings in the bundles folder because I forgot to disable typings generation when generating the bundle :D

Hahah, those things happen :D.

Will check this today. Eager to know the answer :p.

[3du4]

@ocombe sorry for the delay.
If I map as below, the following error is thrown from traceur.

'ng2-translate': 'node_modules/ng2-translate' OR 'ng2-translate': 'npm:ng2-translate'

error message: Error loading http://172.16.128.230/node_modules/ng2-translate/ng2-translate.js as "ng2-translate/ng2-translate"

If I map as below, the following error is thrown
'ng2-translate': 'node_modules/ng2-translate/ng2-translate',

error message: GET node_modules/ng2-translate/ng2-translate/ng2-translate.js 404 (Not Found)
the above one is clearly the wrong path.

Now if I go to my browser and look for ng2-translate.js to path where is mapped I also I get "Cannot GET /node_modules/ng2-translate/bundles/ng2-translate.js" from my browser.

If I do the same thing with other libraries I can access the JS file. Any ideas of how I could solve this? :(

I will look at @SamVerschueren approach and see if it works.

[3du4]

In my systemjs I ended mapping as below:
'ng2-translate': 'npm:ng2-translate'

then in my components where I import the TranslateService and the TranslateModule I imported as below:
import { TranslateModule } from 'ng2-translate/bundles/index';
import { TranslateService } from 'ng2-translate/bundles/index';

As in my first comment, this problem started when I upgraded to 3.1.3. When I was using 3.1.2
I was importing as below

import { TranslateModule } from 'ng2-translate/ng2-translate';
import { TranslateService } from 'ng2-translate/ng2-translate';

and my systemjs looked like this
'ng2-translate': 'npm:ng2-translate/bundles'

I know this is a temporal workaround, @ocombe I would appreciate if you let us know if you decide switching back to commonjs.

[SamVerschueren]

I believe this has nothing to do with CommonJS/UMD. It has everything to do with the configuration of ng2-translate and how you consume it.

In the new release (I thought we supported the old notation as well but not sure if everything went well there), you have to import from ng2-translate instead of ng2-translate/ng2-translate.

Because SystemJS does the module resolution, you don't have to import from bundles/index or from anywhere else. Just import from ng2-translate, that's the first step in the process.

Angular 2 suggests you use their UMD bundles in development. You could either choose to do that or not, that's up to you. The only thing you have to change is how SystemJS consumes the library in the configuration.

In the plunker you provided, you can either choose to consume the CommonJS files, or the UMD bundle.

CommonJS

'ng2-translate': 'npm:ng2-translate/index.js',

UMD

'ng2-translate': 'npm:ng2-translate/bundles/index.js',

This doesn't change anything on how you import them in your main files. It just tells SystemJS where to look if it sees an import statement for ng2-translate. This does also mean, that if you want to keep import { TranslateService } from 'ng2-translate/ng2-translate';, you can simply change the config to something like this.

'ng2-translate/ng2-translate': 'npm:ng2-translate/bundles/index.js',

You can just rename it to whatever you want.

I adjusted the plunk for both scenarios, CommonJS and UMD.

CommonJS: http://plnkr.co/edit/Qs9n2NSqGynEKmQvL5Xy
UMD: http://plnkr.co/edit/eKVwIDVPBNpEBABd5HcR

I really hope this helps and gives a better understanding of how things work.

[ocombe]

We should probably add all of this to the readme

[SamVerschueren]

@ocombe Yes, was thinking the same. It just follows how Angular does it though, but apparently the Angular docs seems clearer :).

Maybe we should create a docs directory where we explain how people should configure the module with SystemJS and with Webpack. This way we could keep the main docs in the readme, "how to use the module" and the APIs etc. And then we can extract bundle specific stuff to seperate doc files. Let me know what you think, I would be happy to do it for SystemJS. Not much experience with Webpack but I can always take a look. We should also update the examples :).

[ocombe]

We can use the wiki here, and link to it from the readme. I gave you collaborators rights on the repo.
For webpack it's easier, it just works out of the box, it's systemjs that's complicated because the config is used browser side where it cannot look for modules in node_modules all by itself so you have to define everything manually

[SamVerschueren]

I gave you collaborators rights on the repo.

Thanks 🎉

We can use the wiki here

👍

[dawud-do]

Unsure if it's related but I'm getting

  26 10 2016 08:59:33.116:WARN [web-server]: 404: /base/node_modules/ng2-translate.js
  26 10 2016 08:59:33.162:WARN [web-server]: 404: /base/node_modules/lodash.js
  PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR: '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/node_modules/ng2-translate.js

When I run karma test. Those files don't even exist in my node_module directory (under that path) . my app.component.ts imports from ng2-translate.

Any idea?

[ocombe]

well yeah it doesn't exist, you're trying to load http://localhost:9876/base/node_modules/ng2-translate.js instead of http://localhost:9876/base/node_modules/ng2-translate/ng2-translate.js or http://localhost:9876/base/node_modules/ng2-translate/bundles/index.js

[SamVerschueren]

Nothing to do with this as lodash suffers the same fait. Not that familiair with Karma but either it's a karma config thing, or a SystemJS config thing when it can't find the correct file in the correct location. If it's working in development, it's probably Karma who can't find the correct file, so that means it's a karma config.

When I open a Karma config file, this is what I see

...
files: [
    // paths loaded via module imports
    // Angular itself
    { pattern: 'node_modules/@angular/**/*.js', included: false, watched: true },
    { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },

    // NgRx
    { pattern: 'node_modules/@ngrx/**/*.js', included: false, watched: true },
    { pattern: 'node_modules/@ngrx/**/*.js.map', included: false, watched: false },

    // many more
]
...

Try to add ng2-translate over there.

[dawud-do]

Adding it to my karma config file doesn't work. This is based off of angular2 seed for what it's worth. If my app.component.ts is importing from ng2-translate (and that's the standard) why would it be looking for non existent files?

[SamVerschueren]

Like I said, I'm not familiair with Karma so I can't answer that question. The thing I know though is that it's the module bundler (SystemJS or Webpack) that does the module resolution. That's why you need to configure SystemJS that it looks for node_modules/@angular/core/bundles/core.umd.js. How Karma does it? I have no clue, does it use SystemJS? And if so, what config does it pick?

I don't think this discussion belongs here though and is more like a StackOverflow support question. Like I said, it doesn't find lodash as well so it's definitely a config problem.

[3du4]

@SamVerschueren, thank you for explaining. I mapped as you mentioned here fixed my issue.

[SamVerschueren]

@3du4 Glad you got it working :)