角度4通用应用与@角/ 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编译你的文件。