Question

我目前正在为我的应用实施Angular Universal。我已经有一堆错误要解决，但我坚持这个。我可以构建我的应用程序，aot编译工作正常，但当我运行应该引导我的应用程序的服务器时，我可以看到该错误：

我的\ node_modules \ ng2-translate \ src \ translate.pipe.js中出现意外的令牌：1

我已经看到服务器版本有一个特殊的加载器，使用fs而不是http来查找对应于langage的json文件。

所以有我的代码：

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}!`);
});

最后，在我的app.module中，我必须导入我的TranslateModule

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

其他我得到一个错误，但我想我只会把它放在app.browser.module和app.server.module里面，为每个人使用好的加载器......

感谢您的帮助！

Angular 4 with Universal + ng2-translate

0 个答案: