Core: Issue with webpack statically extracted dependencies

[gamazeps]

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

[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
Throwing a warning that is turned into a hard error with static files build.

WARNING in ./~/ng2-translate/bundles/ng2-translate.js
Critical dependencies:
1:2208-2215 require function is used in a way in which dependencies cannot be statically extracted
1:2254-2261 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/ng2-translate/bundles/ng2-translate.js 1:2208-2215 1:2254-2261

Which leads to this output in the console with static files:

Uncaught TypeError: Cannot read property 'resolve' of undefined
Uncaught TypeError: Cannot read property 'forRoot' of undefined

Reproduction of the problem

git clone [email protected]:angular/angular2-seed.git
cd angular2-seed
npm install
npm install --save ng2-translate

In src/vendor.browser.ts

import 'ng2-translate';

In src/app/app.module.ts

import { TranslateModule } from 'ng2-translate'; // <<<<<<<<<<<<<<<<<<<< <  added

@NgModule({
  declarations: [AppComponent, About, RepoBrowser, RepoList, RepoDetail, Home],
  imports     : [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(rootRouterConfig),
    TranslateModule.forRoot() // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <added
  ],
  providers   : [Github, {provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap   : [AppComponent]
})
export class AppModule {

}

Please tell us about your environment:

• ng2-translate version: 3.1.0
• Angular version: 2.0.0
• Browser: [Chrome 53]

[ocombe]

Can you change
import 'ng2-translate';
to
import 'ng2-translate/ng2-translate';

and

import { TranslateModule } from 'ng2-translate'
to
import { TranslateModule } from 'ng2-translate/ng2-translate' and see if it works?

[gamazeps]

Tried it and it doesn't work infortunately.

This gives a hard error:

ng2-translate.js:1Uncaught SyntaxError: Unexpected token import
bootstrap f8a9cd9…:50Uncaught TypeError: Cannot read property 'call' of undefined

Used the 'ng2-translate/ng2-translate' in both the vendor and app.module.

And when only using the ng2-tralate/ng2-transate in app.module.ts there is a hard error, the warning given by webpack is still there and the output in the console is:

[WDS] Warnings while compiling.
client:68./~/ng2-translate/bundles/ng2-translate.js
Critical dependencies:
1:2208-2215 require function is used in a way in which dependencies cannot be statically extracted
1:2254-2261 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/ng2-translate/bundles/ng2-translate.js 1:2208-2215 1:2254-2261
ng2-translate.js:1Uncaught SyntaxError: Unexpected token import

[fabiotisci]

Hi,

I had the same problem. For some reason webpack doesn't like the package. I tried everything, but I finally solved it forking the project, and including in the packages.json the git path. Then with webpack you can import the ts file directly from node_modules and webpack will take care of everything else.

Let me know if you find a better solution!

Cheers

Fabio

[leemason]

having exact same issue, has anyone found a solution that doesnt require forking and hacking?

[c1rus]

are you using webpack1 or webpack2? i had problem with webpack1, but with webpack2 it is working...

[fabiotisci]

Using Webpack 2.1.0-beta.22

On Mon, 10 Oct 2016 at 16:47 Peter Luptak [email protected] wrote:

are you using webpack1 or webpack2? i had problem with webpack1, but with
webpack2 it is working...

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ocombe/ng2-translate/issues/273#issuecomment-252661303,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADE82kv-jvq28Ug8EQCNKBFwaIZhn9xlks5qyl33gaJpZM4KRFo3
.

[fgladisch]

+1

I can't get ng2-translate 3.x.x to work with webpack, either. I get the same errors and warnings as @gamazeps.

[martinsiden]

I'm also facing these issues. Using ng2-translate 3.1.0 and Webpack 1.13.2.

[leemason]

im using webpack 1.12.14, still same issue

[gamazeps]

Using @fabiotisci method solves the problem, but this is still very hacky :/

[gnujeremie]

Not sure if related, but I get

SyntaxError: import declarations may only appear at top level of a module
vendor.js:1
TypeError: ng2_translate_1.TranslateModule is undefined

when updating to 3.1.0

[fabiotisci]

not great... in order to make the typings work I have to install oCombe package, then 'typings i npm:ng2-translate' and then remove his package from packages.json and replace it for my git repo. Basically a rubbish hack from my behalf!!

[martinsiden]

Just wanted you guys to know that it works out-of-the-box using this starter. However, that starter does a lot of things differently to what I have been doing, so I haven't been able to pin down whats the breaking change between them yet though.

[leemason]

@ocombe any ideas?

[pencilpix]

I have the same issue, any solution ?

[kpudlik]

+1 any non-hacky solution?

[alaycock]

On angular 2.0.2 I tested ng2-translate version 3.0.0 through 3.1.2 (which I tested with angular 2.1.0), with no resolution. The last working version for me is 2.5.0.

[murito]

Same, I was able to work with the 2.5.0,with others i have the same issue

[vulcaryn]

Hi, I have the same issue :

WARNING in ./~/ng2-translate/bundles/ng2-translate.js
Critical dependencies:
1:2208-2215 require function is used in a way in which dependencies cannot be statically extracted
1:2254-2261 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/ng2-translate/bundles/ng2-translate.js 1:2208-2215 1:2254-2261

For me it's not a big problem, my application run perfectly with this warning (angular v2.0.1, webpack 1.13.2, ng2-translate 3.1.0).

But this kind of messages are always ugly in compilation logs.

[fabiotisci]

I tried with a test project generated with angular-cli and worked perfectly
well out of the box, but I can't get it to work with angular universal
without my dirty hack

On Fri, 14 Oct 2016, 07:54 Morgan, [email protected] wrote:

Hi, I have the same issue :
WARNING in ./~/ng2-translate/bundles/ng2-translate.js
Critical dependencies:
1:2208-2215 require function is used in a way in which dependencies cannot
be statically extracted
1:2254-2261 require function is used in a way in which dependencies cannot
be statically extracted
@ ./~/ng2-translate/bundles/ng2-translate.js 1:2208-2215 1:2254-2261

For me it's not a big problem, my application run perfectly with this
warning (angular v2.0.1, webpack 1.13.2, ng2-translate 3.1.0).

But this kind of messages are always ugly in compilation logs.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ocombe/ng2-translate/issues/273#issuecomment-253723551,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADE82lEGyidaIW9UnAwu1sg-6k9qCoPGks5qzycQgaJpZM4KRFo3
.

[fgladisch]

Unfortunately, the current example in examples/webpack runs with version 2.4.1 of ng2-translate and doesn't work as stated in issue #258... Maybe someone with a working example can open a pull request? I would do it myself, but I have yet to find a solution...

[Redigast13]

I had the same issue. Solution:

1. Replace all import { ... } from 'ng2-translate'; to import { ... } from 'ng2-translate/ng2-translate';
2. Add babel loader for js files because node_modules/ng2-translate/ng2-translate.js file has ECMA 6 syntax.

Here is my webpack loader configuration:

{
    test: /\.js$/,
    include: /ng2-translate/,           
    loader: 'babel',
    query: {
        presets: ['es2015']
    }
}

[rlopez4]

Thanks for the suggestion @Redigast13. I actually just re-used the typescript loader so I wouldn't have to add babel. Here's the loader configuration I added:

      {
        test: /\.js$/,
        include: /ng2-translate/,
        loader: 'awesome-typescript-loader'
      },

[flycat52]

Thanks @rlopez4 . It really works!!

[fgladisch]

I created the pull request #285, which uses the solution from @Redigast13. I couldn't get it to work with awesome-typescript-loader, like @rlopez4 suggested.

[ocombe]

I've been playing around with the different build systems, trying to fix those bugs.
I think I'm gonna revert the build to commonjs as it was before, and build an additionnal umd package for people who are looking for smaller packages (tree shaking ftw).

[aitboudad]

@ocombe see my fix for ng2-formly https://github.com/formly-js/ng2-formly/pull/126

[ocombe]

Ahh perfect @aitboudad I almost had the good setup, all I was missing was libraryTarget: 'umd' in the output config !
By the way with your setup you embed all the code of the external rxjs libs instead of just referencing it, my external config is much simpler: externals: [/^\@angular\//, /^rxjs\//] with this the bundle goes from 109ko (with your config) to 35ko (with mine) !

I'll publish a new version soon, I tested with the angular 2 seed and it works perfectly

[ocombe]

ok the new build (using webpack instead of systemjs) should be working for you guys, I'm just waiting on travis to pickup the build so that it releases a new version, but it's a bit delayed because of github connections issues today :)

[aitboudad]

That's good to know. thanks!

[ocombe]

Ok version 3.1.3 has been released, let me know if that's ok now

[bevrard]

Hi,
I'm still having an issue with version 3.1.3 and webpack 1.13.3:

Uncaught SyntaxError: Unexpected token export
    at Object.<anonymous> (http://localhost/js/vendor.js:3587:2)
    at __webpack_require__ (http://localhost/js/polyfills.js:51:30)
    at eval (eval at <anonymous> (http://localhost/js/vendor.js:3581:2), <anonymous>:10:1)
    at Object.<anonymous> (http://localhost/js/vendor.js:3581:2)
    at __webpack_require__ (http://localhost/js/polyfills.js:51:30)
    at Object.<anonymous> (http://localhost/js/vendor.js:6:19)
    at __webpack_require__ (http://localhost/js/polyfills.js:51:30)
    at webpackJsonpCallback (http://localhost/js/polyfills.js:22:20)
    at http://localhost/js/vendor.js:1:1
localhost/:38 Uncaught TypeError: Cannot read property 'forRoot' of undefined(…)

In the NgModule :

import {TranslateLoader, TranslateStaticLoader, TranslateModule} from "ng2-translate/ng2-translate";

TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, ResourceService.RESOURCE_URL, '.jsonProperties'),
            deps: [Http]
        }),

in my vendor.ts:

import 'ng2-translate/ng2-translate';

and finally I'm using the translateService in my component:

import {TranslateService} from "ng2-translate";

Do you have an idea?

[ocombe]

Change all 'ng2-translate/ng2-translate' to 'ng2-translate'

[bevrard]

Thanks :)

[fgladisch]

Version 3.1.3 is working for me, too. Thanks!

[fabiotisci]

Cool, it solves the problem also in Angular Universal. Thanks @ocombe