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中添加需要编译的库 - ＆gt;白名单区。在我的情况下，它是ngx-bootstrap。然后运行webpack来编译你的文件。

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

1 个答案: