角度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編譯你的文件。