search

manfredsteyer / ngx-build-plus

Extend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements
1.19k stars 136 forks source link

[Troubleshooting] Not able to externalize angular material #232

Open hardikpatel043 opened 4 years ago

hardikpatel043 commented 4 years ago

In my project, I have multiple micro apps. Each micro app is using angular material. So I am trying to externalize angular material package to make bundle size lighter.

For example, i have created a simple micro app which uses just MatButton. Here is my code

webpack.external.js

const webpack = require('webpack');
module.exports = {
  externals: {
    rxjs: 'rxjs',
    '@angular/core': 'ng.core',
    '@angular/common': 'ng.common',
    '@angular/common/http': 'ng.common.http',
    '@angular/platform-browser': 'ng.platformBrowser',
    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
    '@angular/compiler': 'ng.compiler',
    '@angular/elements': 'ng.elements',
    '@angular/cdk': 'ng.cdk',
    '@angular/cdk/keycodes': 'ng.cdk.keycodes',
    '@angular/cdk/coercion': 'ng.cdk.coercion',
    '@angular/cdk/observers': 'ng.cdk.observers',
    '@angular/cdk/platform': 'ng.cdk.platform',
    '@angular/cdk/a11y': 'ng.cdk.a11y',
    '@angular/cdk/bidi': 'ng.cdk.bidi',
    '@angular/animations/browser': 'ng.animations.browser',
    '@angular/animations': 'ng.animations',
    '@angular/platform-browser/animations': 'ng.platformBrowser.animations',
    '@angular/material': 'ng.material',
    '@angular/material/core': 'ng.material.core',
    '@angular/material/button': 'ng.material.button',
    '@angular/router': 'ng.router',
  },
};

I created a bundle using below command. (package.json)

"build:aboutus:externals": "ng build --extra-webpack-config apps/aboutus/webpack.externals.js --output-hashing none --project aboutus --prod --single-bundle --stats-json"

For shell app to download required scripts for MatButton,

angular.json

 "scripts": [
              "node_modules/@webcomponents/custom-elements/src/native-shim.js",
              "node_modules/rxjs/bundles/rxjs.umd.js",
              "node_modules/@angular/core/bundles/core.umd.js",
              "node_modules/@angular/common/bundles/common.umd.js",
              "node_modules/@angular/common/bundles/common-http.umd.js",
              "node_modules/@angular/compiler/bundles/compiler.umd.js",
              "node_modules/@angular/elements/bundles/elements.umd.js",
              "node_modules/@angular/router/bundles/router.umd.js",
              "node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
              "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
              "node_modules/@angular/cdk/bundles/cdk.umd.js",
              "node_modules/@angular/cdk/bundles/cdk-keycodes.umd.js",
              "node_modules/@angular/cdk/bundles/cdk-coercion.umd.js",
              "node_modules/@angular/cdk/bundles/cdk-observers.umd.js",
              "node_modules/@angular/cdk/bundles/cdk-platform.umd.js",
              "node_modules/@angular/cdk/bundles/cdk-bidi.umd.js",
              "node_modules/@angular/cdk/bundles/cdk-a11y.umd.js",
              "node_modules/@angular/animations/bundles/animations.umd.js",
              "node_modules/@angular/animations/bundles/animations-browser.umd.js",
              "node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js",
              "node_modules/@angular/material/bundles/material.umd.js",
              "node_modules/@angular/material/bundles/material-core.umd.js",
              "node_modules/@angular/material/bundles/material-button.umd.js"
            ]

Now when I build my micro app and run my shell app, i get below error

image

Note - Without MatButton, micro-app is working with shell app. So integration is good.

Here is github repo. https://github.com/hardikpatel043/mf-app/tree/externalize-material

Here, shell app = cz-app micro app = home

manfredsteyer commented 3 years ago

Have you found a solution so far?

Very often this occurs if A depends on B and you only externalize A.

hardikpatel043 commented 3 years ago

Thanks for the reply @manfredsteyer

No solution yet. I tried to externalize each package step by step based on error I got. It leads to externalized lot of internal packages from material and angular. It created very big list in webpack.external.js. I still was getting errors for some packages. So I didn't go further. Now we have another option of using webpack 5 module federation so trying that now.

hannandesai commented 3 years ago

Hello,

I faced the same issue as mentioned by @hardikpatel043. I want to externalize @angular/cdk/scrolling. But error ocurred saying "CdkVirtualScrollViewPort is neither 'ComponentType' or 'DirectiveType'". @manfredsteyer Can you please help?

Thanks In Advance