在 Angular 4 通用应用程序中使用 localize-router 时意外导入令牌

Question

我尝试构建 Angular 4 具有服务器渲染端和语言路由路径的应用程序。所有这些都基于 1.5.0-rc1 版本中的 Angular CLI。

一切正常，但我无法解决路线中的语言问题。我有两个想法 - 一个让它像 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 的技巧（使用排除列表），但我想使用 CLI，因为我不太了解 Webpack。

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 错误。

在 Angular 4 通用应用程序中使用 localize-router 时意外导入令牌

unexpected token import when use localize-router in Angular 4 Universal app

node.js

angular-universal

ngx-translate

angular