Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 of 3 tasks
SamVerschueren opened this issue Sep 1, 2016 · 30 comments
Closed
1 of 3 tasks

Comments

@SamVerschueren
Copy link
Contributor

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.

screen shot 2016-09-01 at 10 21 06

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)
@SamVerschueren SamVerschueren changed the title Do not import @angular/core/src/facade/lang RC6: import @angular/core/src/facade/lang causes traceur error Sep 1, 2016
@ocombe
Copy link
Member

ocombe commented Sep 1, 2016

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
Copy link
Contributor Author

Thanks for jumping on this so quickly!

@spock123
Copy link

spock123 commented Sep 1, 2016

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
Copy link
Member

ocombe commented Sep 1, 2016

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

@ocombe
Copy link
Member

ocombe commented Sep 1, 2016

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

@SamVerschueren
Copy link
Contributor Author

Thanks @ocombe! Works like a charm!

@spock123
Copy link

spock123 commented Sep 1, 2016

You are the best!!

@3du4
Copy link

3du4 commented Oct 24, 2016

@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
Copy link
Member

ocombe commented Oct 24, 2016

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
Copy link

3du4 commented Oct 25, 2016

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
Copy link
Member

ocombe commented Oct 25, 2016

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

@SamVerschueren
Copy link
Contributor Author

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
Copy link
Member

ocombe commented Oct 25, 2016

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

@SamVerschueren
Copy link
Contributor Author

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

screen shot 2016-10-25 at 10 37 33

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

@ocombe
Copy link
Member

ocombe commented Oct 25, 2016

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
Copy link
Contributor Author

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
Copy link

3du4 commented Oct 26, 2016

@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
Copy link

3du4 commented Oct 26, 2016

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
Copy link
Contributor Author

SamVerschueren commented Oct 26, 2016

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
Copy link
Member

ocombe commented Oct 26, 2016

We should probably add all of this to the readme

@SamVerschueren
Copy link
Contributor Author

@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
Copy link
Member

ocombe commented Oct 26, 2016

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
Copy link
Contributor Author

I gave you collaborators rights on the repo.

Thanks 🎉

We can use the wiki here

👍

@dawud-do
Copy link

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
Copy link
Member

ocombe commented Oct 26, 2016

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
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor Author

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
Copy link

3du4 commented Oct 27, 2016

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

@SamVerschueren
Copy link
Contributor Author

@3du4 Glad you got it working :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants