Issue with webpack statically extracted dependencies

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 [e-mail]: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]

[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'
      },