0

I try to build Angular 4 app with server rendering side and language route path. All this base on Angular CLI in 1.5.0-rc1 version.

Everything work OK but I can't solve a problem with language in route. I have two idea - one to make it like a parameter :lang in URL, but everywhere people advice me to use localize-router plugin. It look very good, but my npm run server can't start properly. In console I get an error: 

/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';

Here is my app-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;
}

Do you have any tips how can I solve it? I found some tips for Webpack (to use exclude list), but I want to use CLI because I don't know Webpack too well.

4

1 回答 1

2

这个问题与库类型有关——它不是 commonjs 类型，而是 ES6。您可以在 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错误。

于 2017-10-23T10:25:10.837 回答