Angular 4 通用应用程序，带有 @angular/cli 和第三方（库/组件）编译答案

【问题标题】：Angular 4 universal app with @angular/cli with third party (library/component) compilationAngular 4 通用应用程序，带有 @angular/cli 和第三方（库/组件）编译
【发布时间】：2017-06-10 12:05:01
【问题描述】：

我正在尝试使用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？

【问题讨论】：

标签： javascript angular universal

【解决方案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 来编译你的文件。

【讨论】：