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

Question

I am trying to implement server side rendering using angular universal . With followed this post angular-4-universal-app-with-angular-cli and this cli-universal-demo project, I encountered a problem as below.

When node starts dist/server.js it shows an error:

(function (exports, require, module, __filename, __dirname) 
{ export * from ‘./scn-filter-builder’

scn-filter-builder is my module. It's written in angular2/typescript and node.js doesn't understand it.

The question is that can I set to universal so it will compile packages from node_module to es5 by itself? Or I need to compile my component into es5 ?

Answer 1

So I ended up tackling something similar to this by compiling it with Webpack. I just added a webpack.config.js with the following:

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' }
    ]
  }
}

Add the library that needs to be compiled in the nodeExternals -> whitelist area. In my case it was ngx-bootstrap. Then just run webpack to compile your file.