帶有@ angular / cli和第三方（庫/組件）編譯的Angular 4通用應用程序

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即可編譯文件。