Angular 4ユニバーサルアプリケーションでlocalize-routerを使用すると予期しないトークンがインポートされる

Question

サーバレンダリング側と言語ルートパスでAngular 4アプリを作成しようとしています。 1.5.0-rc1バージョンのAngular CLIに基づいています。

問題なく動作しますが、経路の言語に関する問題は解決できません。 私は2つのアイデアを持っています：1つはパラメータのようになります。URLにはlangがありますが、localize-routerプラグインを使用する人のアドバイスはどこにでもあります。それは非常に良い見えますが、私のnpm run serverは正しく起動できません。コンソールでは、私はエラーを取得する：ここで

/home/xxx/Projects/private/angular4-cli-seed/node_modules/localize-router/src/localize-router.config.js:1 
(function (exports, require, module, __filename, __dirname) { import { Inject, OpaqueToken } from '@angular/core'; 

は私のアプリ-routing.module.tsです：

import {NgModule, PLATFORM_ID, Inject, OpaqueToken} from '@angular/core'; 
import 'zone.js'; 
import 'reflect-metadata'; 
import { Routes, RouterModule } from '@angular/router'; 
import {AboutComponent} from './about/about.component'; 
import {HomeComponent} from './home/home.component'; 
import {LocalizeParser, LocalizeRouterModule, LocalizeRouterSettings, ManualParserLoader} from 'localize-router'; 
import {HttpClientModule, HttpClient} from '@angular/common/http'; 
import {TranslateService} from '@ngx-translate/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Location } from '@angular/common'; 

const routes: Routes = [ 
    { 
    path: '', 
    component: HomeComponent 
    }, 
    { 
    path: 'about', 
    component: AboutComponent 
    } 
]; 

export function localizeFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings): LocalizeParser { 

    const browserLocalizeLoader = new ManualParserLoader(translate, location, settings, ['en', 'pl'], 'pl'); 

    return browserLocalizeLoader; 
} 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(routes), 
    LocalizeRouterModule.forRoot(routes, { 
     parser: { 
     provide: LocalizeParser, 
     useFactory: (localizeFactory), 
     deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient] 
     } 
    }), 
    ], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { 
    private static TranslateService: any; 
} 

あなたは、私はそれを解決することができますどのように任意のヒントを持っていますか？私はWebpack（除外リストを使用する）のためのいくつかのヒントを見つけましたが、私はWebpackをあまりよく知らないのでCLIを使用したいと思います。

Answer 1

この問題はライブラリタイプに関連しています。これはcommonjsタイプではなく、ES6です。この問題の詳細については、here on GitHubを参照してください。

これを解決するには、Angular 4 Universal（Angular CLI）で使用するライブラリの著者にお問い合わせください。彼らは適切な方法でそれを再コンパイルする必要があります。

別の解決策（実現するのが速い）は、私にGitHubの@sjogrenを与えます。構築プロセス中にbabel.jsを使用してライブラリを再コンパイルすることができます。

npm install babel-cli --save 
npm install babel-preset-env --save 
npm install babel-preset-es2015 --save 

をしてpackage.jsonにこのコードを追加：これを行うには、実行する必要があります

が

"babel": { 
    "presets": [ 
     "es2015" 
    ] 
    }, 

最後にpackage.jsonには、ライブラリを再コンパイルしたコードを使用してスクリプトに事前開始スクリプトを追加する必要があります。私の例では：

"scripts": { 
    "prestart": "node node_modules/babel-cli/bin/babel.js node_modules/localize-router --out-dir node_modules/localize-router --presets es2015" 
    "start": "......" 
} 

これは私のためにうまく働いた、と私はUnexpected Token Importエラーを持っていません。