javascript - Angular 4 通用应用程序，带有 @angular/cli 和第三方(库/组件)编译

Question

我正在尝试使用 Angular Universal 实现服务器端渲染。关注了这篇文章angular-4-universal-app-with-angular-cli还有这个cli-universal-demo项目中，我遇到了如下问题。

当节点启动 dist/server.js 时，它显示错误:

(function (exports, require, module, __filename, __dirname) 
{ export * from ‘./scn-filter-builder’

scn-filter-builder 是我的模块。它是用 angular2/typescript 编写的，而 node.js 无法理解它。

问题是我可以设置为 universal 以便它自己将包从 node_module 编译到 es5 吗？或者我需要将我的组件编译为 es5？

Answer 1

所以我最终通过使用 Webpack 编译来解决类似的问题。我刚刚添加了一个 webpack.config.js，其中包含以下内容:

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: {
    server: './src/server.ts'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  target: 'node',
  externals: [nodeExternals({
    whitelist: [
      /^ngx-bootstrap/
    ]
  })],
  node: {
    __dirname: true
  },
  output: {
    path: path.join(__dirname, 'server'),
    filename: '[name].js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}

在nodeExternals -> 白名单区域添加需要编译的库。就我而言，它是 ngx-bootstrap。然后只需运行 webpack 来编译您的文件。