Angular 4 with Universal + ng2-translate

Question

I'm currently implementing Angular Universal to my app. I already had a bunch of errors to resolve but i'm stuck to this one. I can build my app, the aot compilation is working fine but when I run my server that should bootstrap my app I can see that error :

Unexpected token import in my \node_modules\ng2-translate\src\translate.pipe.js:1

I already saw that there is a special loader for the server version using fs instead of http to find the json file corresponding to the langage.

So there is my code :

app.browser.module.ts

`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate';
import { Http } from '@angular/http';
import { BrowserStateTransferModule } from '@ngx-universal/state-transfer';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { HttpTranslate } from './translate.config';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({
      appId: 'aml-website'
    }),
    BrowserStateTransferModule.forRoot(),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: HttpTranslate,
      deps: [Http],
    }),
    AppModule
  ],
  bootstrap: [AppComponent],
})
export class AppBrowserModule {}`

app.server.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServerStateTransferModule, StateTransferService  } from '@ngx-universal/state-transfer';
import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate';
import { Http } from '@angular/http';

import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { HttpTranslate } from './translate.config';
import { TranslateUniversalLoader } from './translate.config';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({
      appId: 'aml-website'
    }),
    ServerStateTransferModule.forRoot(),
    ServerModule,
    AppModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: TranslateUniversalLoader,
    })
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {
  constructor(private readonly stateTransfer: StateTransferService){}
  ngOnBootstrap = () => {
    this.stateTransfer.inject();
  }
}

translate.config.ts

import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate';
import { Http } from '@angular/http';
import { Observable } from "rxjs/Observable";
import * as fs from 'fs';

export function HttpTranslate(http: Http) {
  return new TranslateStaticLoader(http, 'src/assets/translate', '.json')
}

export class TranslateUniversalLoader implements TranslateLoader {
    constructor() {}

    @param lang
    @returns {any}

    public getTranslation(lang: string): Observable<any> {
        return Observable.create(observer => {
            observer.next(JSON.parse(fs.readFileSync(`../assets/translate/${lang}.json`, 'utf8')));
            observer.complete();
        });
    }
}

server.ts

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { AppServerModuleNgFactory } from './dist/ngfactory/src/app/app.server.module.ngfactory';
import * as express from 'express';
import { readFileSync } from 'fs';
import * as path from 'path';
import { join } from 'path';

const PORT = 4000;

enableProdMode();

const app = express();

const template = readFileSync(join(__dirname, 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src')

app.get('*.*', express.static(join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

And finally , inside my app.module I have to import my TranslateModule

  TranslateModule.forRoot({
  provide: TranslateLoader,
  useFactory: HttpTranslate,
  deps: [Http],
})

othewise I get an error but I thought I would put it only inside the app.browser.module and app.server.module to use the good loader for each one...

Thanks for help !