Angular 4 with Universal + ng2-translate

Question

I am currently implementing Angular Universal for my application. I already had a lot of mistakes to solve, but I stuck to this. I can create my application, aot compilation works fine, but when I start my server, which should load my application, I see this error:

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

I have already seen that for the server version there is a special loader that uses fs instead of http to find the json file matching 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 .module application, I need to import my TranslateModule

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

, , app.browser.module app.server.module, ...

!