Node.js 在Angular 4 Universal应用程序中使用本地化路由器时意外的令牌导入

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

一切正常，但我无法解决途中的语言问题。 我有两个想法——一个是把它变成一个参数：URL中的lang，但到处都有人建议我使用本地化路由器插件。它看起来很好，但是我的

npm运行服务器

无法正常启动。在控制台中，我得到一个错误：

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

这是我的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;
}

---

你有什么建议我怎么解决它？我找到了一些关于Webpack（使用排除列表）的提示，但我想使用CLI，因为我对Webpack不太了解。

这个问题与库类型有关-它不是常见的JS类型，而是ES6。关于这个问题的更多信息，您可以阅读

要解决此问题，您可以联系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": "......"
}

---

这对我来说很好，并且我没有出现异常的令牌导入错误。

这个问题与库类型有关-它不是一个常见的JS类型，而是ES6。关于这个问题的更多信息，您可以阅读

要解决此问题，您可以联系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": "......"
}

---

这对我来说很好，而且我没有出现

意外的令牌导入错误。
可能与感谢有关。我分析了这个开发良好的github问题，我认为唯一的解决方案是重新编译本地化路由器库。我就这个问题写信给作者，但可能不可能在短时间内得到这个，所以我应该自己重新编译这个库。你能给我一些提示“我如何开始重新编译过程？”没有主意，对不起。不要自己使用CLI。好的-我找到了一个解决方案。谢谢你的帮助。可能与谢谢有关。我分析了这个开发良好的github问题，我认为唯一的解决方案是重新编译本地化路由器库。我就这个问题写信给作者，但可能不可能在短时间内得到这个，所以我应该自己重新编译这个库。你能给我一些提示“我如何开始重新编译过程？”没有主意，对不起。不要自己使用CLI。好的-我找到了一个解决方案。谢谢你的帮助。