title: Angular 4 with Universal + ng2-translate
body: <p>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 :</p>
  
  <blockquote>
    <p>Unexpected token import in my \node_modules\ng2-translate\src\translate.pipe.js:1</p>
  </blockquote>
  
  <p>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. </p>
  
  <p>So there is my code :</p>
  
  <p>app.browser.module.ts</p>
  
  <pre><code>`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 {}`
  </code></pre>
  
  <p>app.server.module.ts</p>
  
  <pre><code>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 = () =&gt; {
      this.stateTransfer.inject();
    }
  }
  </code></pre>
  
  <p>translate.config.ts</p>
  
  <pre><code>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&lt;any&gt; {
          return Observable.create(observer =&gt; {
              observer.next(JSON.parse(fs.readFileSync(`../assets/translate/${lang}.json`, 'utf8')));
              observer.complete();
          });
      }
  }
  </code></pre>
  
  <p>server.ts</p>
  
  <pre><code>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) =&gt; {
    const opts = { document: template, url: options.req.url };
  
    renderModuleFactory(AppServerModuleNgFactory, opts)
      .then(html =&gt; callback(null, html));
  });
  
  app.set('view engine', 'html');
  app.set('views', 'src')
  
  app.get('*.*', express.static(join(__dirname, 'dist')));
  
  app.get('*', (req, res) =&gt; {
    res.render('index', { req });
  });
  
  app.listen(PORT, () =&gt; {
    console.log(`listening on http://localhost:${PORT}!`);
  });
  </code></pre>
  
  <p>And finally , inside my app.module I have to import my TranslateModule</p>
  
  <pre><code>  TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: HttpTranslate,
    deps: [Http],
  })
  </code></pre>
  
  <p>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...</p>
  
  <p>Thanks for help !</p>