mrfrankel / share-loader

Share modules between webpack applications

Share Loader

The share loader allows you to share modules between webpack builds via a global namespace

Install

npm i share-loader --save-dev

Or

yarn add share-loader --save-dev

Usage

webpack config of exposing app

module: {
  rules: [{
          test: /\.js?$/,
          use: [{
            loader: 'share-loader',
            options: {
              modules: [/@angular/, /@uirouter\/angular/],
              exclude: [/@angular\/material/],
              namespace: 'some-name-space'
            }
          }]
        }]
}

webpack config of consumer apps

const {Externals} = require('./share-loader');

externals: [
  Externals({
    namespace: 'some-name-space',
    modules: [/@angular/, /@uirouter\/angular/]
  })
],
output: {
  library: 'some-name-space',
  libraryTarget: 'umd'
}


Example

1. In the root folder, run npm bootstrap
2. Run npm run build:prod in the ext-app-1 root
3. Host the ext1.js file from ext-app-1 project in some localhost server
4. Change the <%path-to-server-host%> in the shell project app.state.ts
5. Run npm run serve:dev in the shell project root



Example-cli
1. In the root folder, run npm bootstrap
2. In "shell app" folder run npm run start:prod
3. In the "ext-app1" folder run npm run start:ext:prod
4. For AOT run npm serve --prod in "shell-app" and npm run serve:ext:prod in "ext-app1"
5. You can also run ext-app1 in standalone mode with ng serve

share-loader's Issues

problems with @angular/material

Hi @MrFrankel

This plugin is still working with @angular/material

I'm trying to getting work your demo example adding material library, but i'm getting the following error:

main.js:1 Uncaught TypeError: Cannot read property 'bidi' of undefined
at main.js:1
at main.js:1
(anonymous) @ main.js:1
(anonymous) @ main.js:1
core.js:15723 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'AppModule' of undefined
TypeError: Cannot read property 'AppModule' of undefined
at sLoader.ts:35

Any ideas?

Pd: Using @angular/[email protected]

Thks

Load assets

Hi!,

I am trying to load an image from the project (not in shell) but the image dont load because is trying to reach it in the shell app

How i can fix this?

thks

Allow hashing of micro/external app

Hi MrFrankel and all,
I used the demo app (example-cli) and I'm trying to add cache busting functionality to the micro app by using [contenthash] in extra-webpack.prod.config like this:
output: {
filename: '[name].[chunkhash].js',
path: path.resolve('./dist'),
chunkFilename: '[name].[chunkhash].js',
library: 'ext',
libraryTarget: 'umd'
},
...
When I try to run the shell and external app in AOT I get the following error:
core.js:15723 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'AppModule' of undefined
TypeError: Cannot read property 'AppModule' of undefined.

What am I missing?

Any help would be greatly appreciated.
Ofir

How to deal with Multiple Router-Outlets (Auxiliary Routes)?

Hi!

I have a case where I need to load 3 router-outlets from main application. There is any way to do that?

• app.component.html

<router-outlet name="header"></router-outlet><!-- external componentes loaded here -->
<router-outlet name="sidebar"></router-outlet><!-- external componentes loaded here -->
<router-outlet></router-outlet><!-- external componentes loaded here -->

How to provide two different Angular Versions in Shell App

Scenario: Shell App and some MF are in Angular 7, and now an Angular 8 app should get integrated into the Shell/Composition Layer (CL).

What I have so far:
Both dependencies in CL - Angular 8 installed as Alias as follows:

"dependencies": {
 "@angular8/animations": "npm:@angular/animations@^8.1.2",
 "@angular8/common": "npm:@angular/common@^8.1.2",
 "@angular8/compiler": "npm:@angular/compiler@^8.1.2",
 "@angular8/core": "npm:@angular/core@^8.1.2",
 "@angular8/forms": "npm:@angular/forms@^8.1.2",
 "@angular8/platform-browser": "npm:@angular/platform-browser@^8.1.2",
 "@angular8/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@^8.1.2",
 "@angular8/router": "npm:@angular/router@^8.1.2",

 "@angular/animations": "~7.2.0",
 "@angular/common": "~7.2.0",
 "@angular/compiler": "~7.2.0",
 "@angular/core": "~7.2.0",
 "@angular/forms": "~7.2.0",
 "@angular/platform-browser": "~7.2.0",
 "@angular/platform-browser-dynamic": "~7.2.0",
 "@angular/router": "~7.2.0",
  ...
}

Result:

I am able to provide Angular 8 in the window object with the following configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js?$/,
        use:
          [{
            loader: 'share-loader',
            options: {
              modules: [/@angular/, /@clr\/angular/, /@clr\/ui/, /rxjs/, /@ngxs\/store/, /@ngxs-labs\/emitter/],
              exclude: [/@angular-devkit/, /angular8/],
              namespace: 'lucy-web-app'
            }
          },
            {
              loader: 'share-loader',
              options: {
                modules: [/angular8/],
                exclude: [],
                namespace: 'angular-8'
              }
            }]
      }]
  }
};

It is really there:

Question:
What is the best way to point the MF written in Angular 8 to this namespace?
Can I just do it with share-loader or do I have to write a custom Webpack-Loader?

The problem is, that Angular 8 is in the CL inside node_modules/@angular8 - but the MF imports it in the source from @angular. So I must somehow link them together, but how?

Angular Version Supported

Hi !

This looks great, great job. I have a question. Which angular version is supported? i am trying to get work with the version 6.0.0 but i dont reach it work

Issues with angular12 Webpack5

Right now the dependencies of share-loader list webpack4 as peerDependency.
This is the message I get when I do npm i.

[email protected] requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

And as soon as I try to build the app using angular 12:

./node_modules/@angular/common/ivy_ngcc/fesm2015/common.js - Error: Module build failed (from ./node_modules/share-loader/index.js):
TypeError: Cannot read property 'some' of undefined
at Object.module.exports.pitch (D:\tmp\test\testApp\node_modules\share-loader\index.js:45:26)

./node_modules/@angular/core/ivy_ngcc/fesm2015/core.js - Error: Module build failed (from ./node_modules/share-loader/index.js):
TypeError: Cannot read property 'some' of undefined
at Object.module.exports.pitch (D:\tmp\test\testApp\node_modules\share-loader\index.js:45:26)

./node_modules/@angular/platform-browser/ivy_ngcc/fesm2015/animations.js - Error: Module build failed (from ./node_modules/share-loader/index.js):
TypeError: Cannot read property 'some' of undefined
at Object.module.exports.pitch (D:\tmp\test\testApp\node_modules\share-loader\index.js:45:26)

and so on.

So is there any plan for the update for the plugin? As I see the last version was released 2 years ago.

Not supporting with Angular 7

Dear Frankel,

Great Solutions ! Thank you.
Given Sample present using UIRouterModule, It's working fine. I tried with Angular 7 using RouterModule but given error. Please suggest me how can i fix it.
ERROR Error: Uncaught (in promise): Error: "extapp" was not created by "http://localhost/ext1.js"
Error: "extapp" was not created by "http://localhost/ext1.js"
at app.js:90865
at ZoneDelegate.invoke (vendor.js:119431)
at Object.onInvoke (app.js:55750)
at ZoneDelegate.invoke (vendor.js:119430)
at Zone.run (vendor.js:119181)
at vendor.js:119915
at ZoneDelegate.invokeTask (vendor.js:119464)
at Object.onInvokeTask (app.js:55741)
at ZoneDelegate.invokeTask (vendor.js:119463)
at Zone.runTask (vendor.js:119231)
at app.js:90865
at ZoneDelegate.invoke (vendor.js:119431)
at Object.onInvoke (app.js:55750)
at ZoneDelegate.invoke (vendor.js:119430)
at Zone.run (vendor.js:119181)
at vendor.js:119915
at ZoneDelegate.invokeTask (vendor.js:119464)
at Object.onInvokeTask (app.js:55741)
at ZoneDelegate.invokeTask (vendor.js:119463)
at Zone.runTask (vendor.js:119231)
at resolvePromise (vendor.js:119857)
at resolvePromise (vendor.js:119814)
at vendor.js:119916
at ZoneDelegate.invokeTask (vendor.js:119464)
at Object.onInvokeTask (app.js:55741)
at ZoneDelegate.invokeTask (vendor.js:119463)
at Zone.runTask (vendor.js:119231)
at drainMicroTaskQueue (vendor.js:119638)
at ZoneTask.invokeTask [as invoke] (vendor.js:119543)
at invokeTask (vendor.js:120583)

share-loader

@MrFrankel Firstly your idea with the share-loader was amzing. i have some doubts. i have created a new angular 9 application into the example cli folder and included all your dependencies like extra-webpack config and changed the angular.json as we need. when triggering the build command i have stucked with the following error
`
Generating ES5 bundles for differential loading...
An unhandled exception occurred: f:\Research & Dev\share-loader\example-cli\ext-app2\polyfills-es5.js: Invalid left-hand side in assignment expression (9:2)

7 | exports["polyfills-es5.js"] = factory(polyfills-es5.js);
8 | else

9 | polyfills-es5.js = factory(polyfills-es5.js);
| ^
10 | })(window, function(WEBPACK_EXTERNAL_MODULE_f_Research_Dev_share_loader_example_cli_ext_app2_node_modules_angular_devkit_build_angular_src_angular_cli_files_models_es5_polyfills_js) {
11 | return // (function(modules) { // webpackBootstrap
12 | // // The module cache
See "C:\Users\Admin\AppData\Local\Temp\ng-HFejQJ\angular-errors.log" for further details.`

and when i try to load the newly created application from shell app am receiving like this

Can you please help me to get out from this?

allow for external AOT modules

right now it is possible to load external modules when shell app is AOT, however it is required to import the JitCompiler manually and the external modules cant run in AOT.

it is possible to build the external modules in AOT and expose their AppModuleNgFactory to be consumed by the router, it is also required to stop the actual call to bootstrap as it is a feature module.

Angular 9 with Ivy Renderer

Ivy does not use factories anymore, therefore the LastCallWebpack logic in webpack.config.js is not going to work (putting micro frontend into window object).

I already have a solution for it, which I will share soon. Basic idea: main.prod.ts will use a dynamic import to load the AppModule and put it into the window object.

Communicating between apps

Sorry, in your blog, you mention the event bus for communicating between apps. Could you please provide an example? I have tried a number of tutorials about that, but it didn't work. Thank you

Bundle symlinked dependencies

This loader works great! We're using it to build a micro-frontend application.

One problem I just ran into... We have one NPM package that is being shared between the "container app" and "module" that we would like to npm link for development purposes. I'm wondering if it's possible to support with share-loader. If so, I'd be happy to contribute!

Problem with Clarity

Hi Mr Frankel,

I'm trying to use (clarity) as a component library and it's not going very well.
I've tried many approaches with the webpack and cli-way for the shell app. I've tried to share the library via the shell-app. Both times, AppModule cannot get loaded properly.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'AppModule' of undefined

The standalone approach does not work either. Strangely, for the cli-approach, even though "vendorChunk": false is configured in angular.json, it gets generated. So I end up with main.js and vendor.js. Unfortunately I am not able to bundle everything in just one bundle.

When I exclude the components that use clarity from the external app - the shell app works. Maybe this is related to the @angular/material issue.

Maybe, if you have time, you can give it a try. Are you using component libraries in your projects that you share via the composition layer?

Many thanks!
Alexej

Error to add new cli application to sample: "Uncaught (in promise): TypeError: Cannot read property 'AppModule' of undefined"

Hi guys!

I tried to create add a new external module to the project with the following steps:

• ng new menu
  -- Would you like to add Angular routing? Y
  -- Which stylesheet format would you like to use? CSS
• npm i share-loader --save-dev
• npm i @angular-builders/custom-webpack --save-dev
• create file extra-webpack.config.js
  const path = require('path'); const {Externals} = require('share-loader'); module.exports = { entry: { 'main': './src/app/app.external.module.ts' }, externals: [ Externals({ namespace: 'container-app', modules: [/@angular/] }) ], output: { filename: '[name].js', path: path.resolve('./dist'), chunkFilename: '[name].js', library: 'menu', libraryTarget: 'umd' }, optimization: { runtimeChunk: false, } }
• add a build-ext section to angular.json
  "build-ext": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./extra-webpack.config.js", "mergeStrategies": { "output": "replace", "entry": "replace", "externals": "replace" } }, "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "none", "sourceMap": false, "extractCss": false , "namedChunks": false, "aot": true, "extractLicenses": false, "vendorChunk": false, "buildOptimizer": true } } }
• create module app.common.module.ts
  ` import {NgModule} from '@angular/core';
  import {AppComponent} from './app.component';
  import { MainMenuComponent } from './main-menu/main-menu.component';

export const appModuleRoot: NgModule = {
imports: [],
declarations: [AppComponent, MainMenuComponent],
bootstrap: [],
providers: [],
exports: []
};`

• app.module.ts:
  `import {NgModule} from '@angular/core'
  import {RouterModule} from '@angular/router'
  import {appModuleRoot} from './app.common.module'
  import {BrowserModule} from '@angular/platform-browser'
  import {AppComponent} from './app.component'
  import {appStates} from './app.states'

const appModule = appModuleRoot;
appModule.imports.push(BrowserModule, RouterModule.forRoot(appStates));
appModule.bootstrap.push(AppComponent);

@NgModule(appModule)

export class AppModule {
}-app.external.module.tsimport {CommonModule} from '@angular/common'
import {NgModule} from '@angular/core'
import {RouterModule} from '@angular/router'
import {appModuleRoot} from './app.common.module'
import {appStates} from './app.states'

const appModule = appModuleRoot;
appModule.imports.push(CommonModule, RouterModule.forChild(appStates));

appModule.exports.push(RouterModule);
@NgModule(appModule)

export class AppModule {
}`

• app.states.ts
  `import { MainMenuComponent } from './main-menu/main-menu.component';

export const appStates = [
{
path: '',
component: MainMenuComponent
}
]-run:npm run ng run menu:build-ext`

• deploy dist folder to localhost/menu

• On shell-app/app.states.ts:
  `export const appMenuState = {
  path: 'menu',

  /** Replace <%path-to-server-host%> with a server the will host the external application js**/
  loadChildren: () => {
  return loadScript('http://localhost/menu/main.js', 'menu', 'AppModule');
  }
  };`

And I'm getting this error:
core.js:15723 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'AppModule' of undefined TypeError: Cannot read property 'AppModule' of undefined at sLoader.ts:35 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391) at Object.onInvoke (core.js:17298) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150) at zone.js:889 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17289) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at resolvePromise (zone.js:831) at resolvePromise (zone.js:788) at zone.js:892 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17289) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at drainMicroTaskQueue (zone.js:601) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502) at invokeTask (zone.js:1744)

What am I doing wrong?

Add example page

Load module with default export

I'm currently unable to load a module that uses a default export. Specifically, styled-components uses default to conveniently wrap html elements which appears to break the loader.

To reproduce, try adding styled-components to your namespace. It should be added to the namespace, but webpack will be unable to load the default import at runtime.

use: {
  loader: 'share-loader',
  options: {
    modules: ['styled-components'],
    exclude: [],
    namespace: 'test',
  }
}

Externalizing @angular/core prevents lazy modules for being output in build

If you create a lazy route in the child app, it's bundle will not be output if you externalize @angular/core.

Output when externalizing @angular/core

Date: 2019-09-19T14:06:00.436Z
Hash: 1ba7b76feb140a6f03ca
Time: 10742ms
chunk {0} main.js (main) 86.1 kB [entry] [rendered]

Output when not:

Date: 2019-09-19T14:08:00.527Z
Hash: 3eea3c3c57d46b231890
Time: 10129ms
chunk {0} main.js (main) 199 kB [entry] [rendered]
chunk {1} 1.js () 867 bytes  [rendered]

1.js is the lazy route module. Obviously you can see that the main.js is more than twice the size when not externalizing core.

NOTE: I don't expect lazy routes to actually work out of the box at the momement since the location from which they load would be wrong but before solving that problem, I need to bundle to get generated at least.

How to use ngx-translate/core with child application

Hi guys!

I'm using ngx-translate/core (https://github.com/ngx-translate/core), but I can't find a way to execute the step "2. Init the TranslateService for your application".

The problem is how to execute the code below in a child application. The common way is to use the appComponent constructor and the code will run just with the first load, but with share-loader I can't find a place to do this.

@Component({ selector: 'app', template:

{{ 'HELLO' | translate:param }}

`
})
export class AppComponent {
param = {value: 'world'};

constructor(translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');

     // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en');
}

}`

I've tried to use APP_INITIALIZER, but the function was not fired with ext project.

`
....
providers: [
{
provide: APP_INITIALIZER,
useFactory: onAppInit1,
multi: true,
deps: [/* your dependencies */]
}
],
....
export class AppCommonModule {}

export function onAppInit1(/* dependencies */): () => Promise {
return (): Promise => {
return new Promise((resolve, reject) => {
console.log(onAppInit1:: inside promise);
});
};
}`

Do you have any suggestion?

Not loading with ng build --prod

Dear Maor Frankel,

Thank you to share Angular cli project with us & it's working fine.
We are facing one issue when we are going to deploy on production server. For production deployment we are using ng build --prod but it's not loading the exposing app.

Working Case:

For exposing app, server deployement command npm run ng run ext-app1:build-ext
For consumer app, server deployment command ng build

Not working Case:

For exposing app, server deployement command npm run ng run ext-app1:build-ext
For consumer app, server deployment command ng build --prod

Can please help us how it will work with ng build --prod?

Issue working with angular material

Hello,
I am having trouble when working with angular material. I have setup correctly the shell app and created the namespaces for the same. I then created a micro frontend that uses angular material. Problem is that when I route to the app with the angular material I get an error that say I do not have the right modules loaded from angular material.
if anyone has managed to get the above scenario working, please save a brother here.

Share-loader with ng-zorro-antd

Hi.

First of all, congrats for the project. What a great idea!

I'm using ng-zorro-antd (https://github.com/NG-ZORRO/ng-zorro-antd) in my project and I'm not able to share it's modules between shell and ext apps.
I've created a repro with this scenario: https://github.com/EvandroApSantos/share-loader-ng-zorro

When I run ext app an error is thrown on console:
Uncaught TypeError: Cannot read property 'ng-zorro-antd' of undefined

The error occurs at this point:
e["container-app"].node_modules["ng-zorro-antd"].dropdown

Any idea how to solve this?

Thank you.

Not working with Angular 8

I have updated the cli samples to angular 8 and with Angular 8 i am getting error window["extapp"] is undefined in sLoader.

Problem with Angular 7 Library

Hi @MrFrankel

I have create Library in Angular 7 which have one service with one function.
Create Library with these steps

1. command ng generate library {libraryname}.
2. create one service "UtilService" with one function
3. ng build {libraryname}
4. install new library in ext-app.
5. & also install in shell app.

My project is working fine without new library (both ext and shell app). Also I have used external Library like "angular2-notifications" is working fine but problem is coming only with our new library.

Error is

Can you please help me how we can add our own library?

How to load external module/micro app not via route

Hi MrFrankel,
I'm trying to load an external module not via route (in the loadChildren) and call some function on.
I've tried using the loadScript function and the .js is indeed loaded but it is not loaded in the same way done by the router (i.e the dependencies are missing).
I've tried to also do it with import() but i could get it to working with module which isn't feature module. i.e. the module is not on the same project.
What am I missing here? Any help would be greatly appreciated.
Thanks

How can I use existing angular 7 application as external app. Please provide steps to follow.

Problems with Angular i18n

I'm not sure if this issue should be addressed here, but since in the examples you use it with angular. The share-loader breaks the angular application, if i18n is used. When the function registerLocaleData(data, localeId, extraData) is called localeId is undefined.

Problem with @angular/material

I Updated the package.json file which look like following

{
"name": "ext-app-1",
"version": "0.0.0",
"private": true,
"dependencies": {
"@angular/animations": "7.0.4",
"@angular/cdk": "7.0.4",
"@angular/common": "7.0.4",
"@angular/compiler": "7.0.4",
"@angular/core": "7.0.4",
"@angular/forms": "7.0.4",
"@angular/http": "7.0.4",
"@angular/material": "7.0.4",
"@angular/material-moment-adapter": "7.0.4",
"@angular/platform-browser": "7.0.4",
"@angular/platform-browser-dynamic": "7.0.4",
"@angular/router": "7.0.4",
"angular-in-memory-web-api": "0.5.4",
"angular2-jwt": "^0.2.3",
"bootstrap": "4.1.3",
"core-js": "2.5.7",
"hammerjs": "2.0.8",
"jquery": "3.3.1",
"loadash": "^1.0.0",
"moment": "2.22.2",
"ng2-cookies": "^1.0.12",
"ngx-bootstrap": "3.1.1",
"ngx-image-cropper": "^1.3.8",
"ngx-toastr": "^9.1.1",
"popper.js": "1.14.5",
"rxjs": "6.3.3",
"rxjs-compat": "^6.4.0",
"web-animations-js": "2.3.1",
"zone.js": "0.8.26"
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^7.4.1",
"@angular-devkit/build-angular": "~0.10.0",
"@angular/cli": "~7.0.2",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.121",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"share-loader": "^0.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
}
}

and added material module in app.common.module.ts which looks like

import { DemoMaterialModule } from './material-module';
custom.component';
import {NgModule} from '@angular/core'
import {AppComponent} from './app.component'
import {ExtComponent} from './ext.component'
import {WelcomeComponent} from './welcome.component'
export const appModuleRoot: NgModule = {
imports: [
DemoMaterialModule
],
declarations: [AppComponent, ExtComponent, WelcomeComponent],
bootstrap: [],
providers: [],
exports: []
};

My build was successful using this command npm run ng run ext-app1:build-ext
But when I open web page in browser and click on load external app application crashed with following error

material-module.ts:44 Uncaught TypeError: Cannot read property 'MatAutocompleteModule' of undefined
at material-module.ts:44

Images are attached for reference