[英]Angular 4 universal app with @angular/cli with third party (library/component) compilation
我正在尝试使用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
?
因此,我最终通过使用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即可编译文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.