在@Angular/elements组件包中与Web包一起重用Angular
我们使用Angular 6.0.3构建了一个仪表板,这是使用Angular CLI构建的 我们正在尝试使用@angular/elements创建也可以作为小部件重用的独立web组件。这些web组件正在加载到DOM中,并且都正常工作 问题是这些小部件的捆绑包相当大——它们使用与仪表板相同版本的Angular,因此我们可以重用这些已经加载的部件 问题:这可能吗?我们可以在完全独立的web包包包之间共享@angular/core吗? 我们已经尝试使用它大大减少了束的大小(显然),但是所有的角度参考都失败了在@Angular/elements组件包中与Web包一起重用Angular,angular,webpack,angular-elements,Angular,Webpack,Angular Elements,我们使用Angular 6.0.3构建了一个仪表板,这是使用Angular CLI构建的 我们正在尝试使用@angular/elements创建也可以作为小部件重用的独立web组件。这些web组件正在加载到DOM中,并且都正常工作 问题是这些小部件的捆绑包相当大——它们使用与仪表板相同版本的Angular,因此我们可以重用这些已经加载的部件 问题:这可能吗?我们可以在完全独立的web包包包之间共享@angular/core吗? 我们已经尝试使用它大大减少了束的大小(显然),但是所有的角度参考都失
const NgCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
output: {
path: __dirname + '/build',
filename: 'infpnl_widget.js'
},
module: {
rules: [
{
test: /\.ts$/,
loader: '@ngtools/webpack'
}
]
},
resolve: {
extensions: [
'.ts',
'.js'
]
},
externals: [
function (context, request, callback) {
if (request.startsWith('@angular/')) {
return callback(null, {
root: ['ng', camelCase(request.replace(/^@angular\//, ''))],
commonjs: request,
commonjs2: request,
amd: request
});
}
callback();
}
],
plugins: [
new NgCompilerPlugin({
tsConfigPath: './tsconfig.json',
mainPath: './src/index.ts',
skipCodeGeneration: true
}),
new UglifyJsPlugin(),
new CompressionPlugin()
],
mode: 'production',
stats: 'errors-only'
};