├── .github ├── FUNDING.yml ├── markdown-link-check-config.json └── workflows │ └── markdown-link-check.yml ├── LICENSE ├── README.md ├── code-demos ├── advanced-ng16 │ ├── README.md │ ├── checkout │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── checkout │ │ │ │ │ ├── checkout.component.css │ │ │ │ │ ├── checkout.component.html │ │ │ │ │ ├── checkout.component.ts │ │ │ │ │ ├── remote-bootstrap-auto.ts │ │ │ │ │ └── remote-bootstrap.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ ├── payment │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── payment │ │ │ │ │ ├── payment.component.css │ │ │ │ │ ├── payment.component.html │ │ │ │ │ └── payment.component.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── load-via-html │ │ │ │ ├── load-via-html.component.css │ │ │ │ ├── load-via-html.component.html │ │ │ │ └── load-via-html.component.ts │ │ │ └── load-via-routing │ │ │ │ ├── load-via-routing.component.css │ │ │ │ ├── load-via-routing.component.html │ │ │ │ └── load-via-routing.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── environments │ │ │ ├── environment.development.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── micro-frontends-tooling │ │ │ ├── remote-module-events.ts │ │ │ ├── remote-module.directive.ts │ │ │ ├── remote-module.guard.ts │ │ │ ├── remote-module.resolver.ts │ │ │ ├── remote-module.service.ts │ │ │ ├── with-navigation-error-handler.ts │ │ │ └── with-remote-module-events-handler.ts │ │ ├── micro-frontends │ │ │ ├── checkout │ │ │ │ ├── checkout.loaded-via-directive.component.ts │ │ │ │ ├── checkout.loaded-via-ng-on-init.component.ts │ │ │ │ ├── checkout.loaded-via-route-guard.component.ts │ │ │ │ ├── checkout.loaded-via-route-resolver.component.ts │ │ │ │ └── checkout.service.ts │ │ │ └── payment │ │ │ │ ├── payment.loaded-via-directive.component.ts │ │ │ │ ├── payment.loaded-via-ng-on-init.component.ts │ │ │ │ └── payment.loaded-via-route-resolver.component.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── angular-architects-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-feature │ │ │ │ │ ├── my-component │ │ │ │ │ ├── my-component.component.css │ │ │ │ │ ├── my-component.component.html │ │ │ │ │ └── my-component.component.ts │ │ │ │ │ └── my-feature.module.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── remote-modules.d.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── basic-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-feature │ │ │ │ │ ├── my-component │ │ │ │ │ ├── my-component.component.css │ │ │ │ │ ├── my-component.component.html │ │ │ │ │ └── my-component.component.ts │ │ │ │ │ └── my-feature.module.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── remote-modules.d.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── communication-custom-events-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-standalone-component │ │ │ │ │ ├── my-standalone-component-bootstrap.ts │ │ │ │ │ ├── my-standalone-component.component.css │ │ │ │ │ ├── my-standalone-component.component.html │ │ │ │ │ └── my-standalone-component.component.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── communication-event-bus-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-standalone-component │ │ │ │ │ ├── my-standalone-component-bootstrap.ts │ │ │ │ │ ├── my-standalone-component.component.css │ │ │ │ │ ├── my-standalone-component.component.html │ │ │ │ │ └── my-standalone-component.component.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── event-bus.ts │ │ │ ├── mfe1-component │ │ │ │ ├── message-sent-event.ts │ │ │ │ ├── mfe1.component.css │ │ │ │ ├── mfe1.component.html │ │ │ │ └── mfe1.component.ts │ │ │ └── other-component │ │ │ │ ├── other.component.css │ │ │ │ ├── other.component.html │ │ │ │ └── other.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── component-directive-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-feature │ │ │ │ │ ├── my-component │ │ │ │ │ ├── my-component.component.css │ │ │ │ │ ├── my-component.component.html │ │ │ │ │ └── my-component.component.ts │ │ │ │ │ └── my-feature.module.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── load-remote-component.directive.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── component-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-feature │ │ │ │ │ ├── my-component │ │ │ │ │ ├── my-component.component.css │ │ │ │ │ ├── my-component.component.html │ │ │ │ │ └── my-component.component.ts │ │ │ │ │ └── my-feature.module.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── component-standalone-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-standalone-component │ │ │ │ │ ├── my-standalone-component.component.css │ │ │ │ │ ├── my-standalone-component.component.html │ │ │ │ │ └── my-standalone-component.component.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── dynamic-manifest-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-feature │ │ │ │ │ ├── my-component │ │ │ │ │ ├── my-component.component.css │ │ │ │ │ ├── my-component.component.html │ │ │ │ │ └── my-component.component.ts │ │ │ │ │ └── my-feature.module.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ └── mf.manifest.json │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── dynamic-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-feature │ │ │ │ │ ├── my-component │ │ │ │ │ ├── my-component.component.css │ │ │ │ │ ├── my-component.component.html │ │ │ │ │ └── my-component.component.ts │ │ │ │ │ └── my-feature.module.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── multi-version-ng │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-standalone-component │ │ │ │ │ ├── my-standalone-component.component.css │ │ │ │ │ ├── my-standalone-component.component.html │ │ │ │ │ └── my-standalone-component.component.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ ├── mfe2-ng14 │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-feature │ │ │ │ │ ├── my-component │ │ │ │ │ ├── my-component.component.css │ │ │ │ │ ├── my-component.component.html │ │ │ │ │ └── my-component.component.ts │ │ │ │ │ ├── my-feature.module.ts │ │ │ │ │ └── remote-bootstrap.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── environments │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ ├── mfe3-ng12 │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app.module.ts │ │ │ │ └── my-component │ │ │ │ │ ├── my-component.component.css │ │ │ │ │ ├── my-component.component.html │ │ │ │ │ └── my-component.component.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── dev-platform │ │ │ │ ├── dev-platform-entry.component.css │ │ │ │ ├── dev-platform-entry.component.html │ │ │ │ ├── dev-platform-entry.component.ts │ │ │ │ ├── dev-platform-routing.module.ts │ │ │ │ └── dev-platform.module.ts │ │ │ ├── environments │ │ │ │ ├── environment.mfe.ts │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── mfe-platform │ │ │ │ ├── mfe-platform.module.ts │ │ │ │ └── remote-bootstrap.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ ├── mfe4-ng12 │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-feature │ │ │ │ │ ├── my-component │ │ │ │ │ ├── my-component.component.css │ │ │ │ │ ├── my-component.component.html │ │ │ │ │ └── my-component.component.ts │ │ │ │ │ └── my-feature.module.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── environments │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.spec.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── routes-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── another-standalone-component │ │ │ │ │ ├── another-standalone-component.component.css │ │ │ │ │ ├── another-standalone-component.component.html │ │ │ │ │ └── another-standalone-component.component.ts │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ ├── my-standalone-component │ │ │ │ │ ├── my-standalone-component.component.css │ │ │ │ │ ├── my-standalone-component.component.html │ │ │ │ │ └── my-standalone-component.component.ts │ │ │ │ └── standalone-component.route.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── web-component-angular-architects-wrapper-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-standalone-component │ │ │ │ │ ├── my-standalone-component-bootstrap.ts │ │ │ │ │ ├── my-standalone-component.component.css │ │ │ │ │ ├── my-standalone-component.component.html │ │ │ │ │ ├── my-standalone-component.component.ts │ │ │ │ │ └── remote-bootstrap.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js ├── web-component-directive-ng16 │ ├── README.md │ ├── mfe1-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ │ ├── app │ │ │ │ ├── app-routing.module.ts │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.ts │ │ │ │ ├── app.module.ts │ │ │ │ └── my-standalone-component │ │ │ │ │ ├── my-standalone-component-bootstrap.ts │ │ │ │ │ ├── my-standalone-component.component.css │ │ │ │ │ ├── my-standalone-component.component.html │ │ │ │ │ ├── my-standalone-component.component.ts │ │ │ │ │ └── remote-bootstrap.ts │ │ │ ├── assets │ │ │ │ └── .gitkeep │ │ │ ├── bootstrap.ts │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js │ └── shell-ng16 │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── angular.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── load-remote-web-component.directive.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── webpack.prod.config.js └── web-component-ng16 │ ├── README.md │ ├── mfe1-ng16 │ ├── .editorconfig │ ├── .gitignore │ ├── .npmrc │ ├── angular.json │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── my-standalone-component │ │ │ │ ├── my-standalone-component-bootstrap.ts │ │ │ │ ├── my-standalone-component.component.css │ │ │ │ ├── my-standalone-component.component.html │ │ │ │ └── my-standalone-component.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── bootstrap.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── styles.css │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── webpack.config.js │ └── webpack.prod.config.js │ └── shell-ng16 │ ├── .editorconfig │ ├── .gitignore │ ├── .npmrc │ ├── angular.json │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── mfe1.d.ts │ ├── assets │ │ └── .gitkeep │ ├── bootstrap.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ └── styles.css │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── webpack.config.js │ └── webpack.prod.config.js └── docs ├── basics-angular-architects.md ├── basics-module-federation.md ├── code-demos-overall-notes.md ├── micro-frontends-and-moduliths-with-angular-5th-edition.pdf ├── multi-frameworks.md ├── other-learning-material.md ├── recommendations.md ├── shared.md ├── standalone-components-and-APIs-1st-edition.pdf └── static-assets └── module-federation-multi-frameworks.png /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: edumserrano 2 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/checkout/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | mfe-checkout dev platform 2 |
3 | 7 |
8 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | public checkoutHandler(message: string): void { 10 | console.log(message); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { CheckoutComponent } from './checkout/checkout.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | providers: [], 9 | bootstrap: [AppComponent], 10 | imports: [BrowserModule, CheckoutComponent] 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/app/checkout/checkout.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/app/checkout/checkout.component.html: -------------------------------------------------------------------------------- 1 |
2 | This is the Checkout component 3 |

Basket value: {{ basketValue }}

4 |

5 | 6 |

7 |
8 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/app/checkout/remote-bootstrap-auto.ts: -------------------------------------------------------------------------------- 1 | import { mountAsync } from "./remote-bootstrap"; 2 | 3 | // The webpack configuration file at /advanced-ng16/checkout/webpack.config.js 4 | // exposes a webpack module which contains this file. So when the webpack module 5 | // is loaded, this function is executed. 6 | // 7 | // Also note that this file is using a top level await and requires the 8 | // `experiments.topLevelAwait` webpack config to be set to true. 9 | // See https://webpack.js.org/configuration/experiments/#experimentstoplevelawait 10 | // 11 | await mountAsync("mfe-checkout"); 12 | 13 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/checkout/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/checkout/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | mfe-checkout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/app/checkout/remote-bootstrap.ts", 10 | "src/app/checkout/remote-bootstrap-auto.ts", 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/checkout/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/payment/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | mfe-payment dev platform 2 |
3 | 4 |
5 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | } 10 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { PaymentComponent } from './payment/payment.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | providers: [], 9 | bootstrap: [AppComponent], 10 | imports: [BrowserModule, PaymentComponent] 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/app/payment/payment.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #27a108; 3 | background-color: #eef9ed; 4 | text-align: center; 5 | color: #27a108; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/app/payment/payment.component.html: -------------------------------------------------------------------------------- 1 |
2 | This is the payment component 3 |
4 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/app/payment/payment.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | @Component({ 5 | selector: 'app-payment', 6 | standalone: true, 7 | imports: [CommonModule], 8 | templateUrl: './payment.component.html', 9 | styleUrls: ['./payment.component.css'] 10 | }) 11 | export class PaymentComponent { 12 | } 13 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/payment/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/payment/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | mfe-payment 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | name: "payment", 8 | filename: "remoteEntry.js", // this doesn't need to be set, if not specified it defaults to remoteEntry.js. Setting it here just for demo purposes. 9 | exposes: { 10 | "./payment": "./src/app/payment/payment.component.ts", 11 | }, 12 | shared: { 13 | ...shareAll({ 14 | singleton: true, 15 | strictVersion: true, 16 | requiredVersion: "auto", 17 | }), 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/payment/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | Shell running Angular {{ version }} 3 |

4 | Go to home page 5 |

6 |

7 | Go to MFEs loaded via routing page 8 |

9 |

10 | Go to MFEs loaded via HTML page 11 |

12 | 13 |
14 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | public readonly version: string = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/app/load-via-html/load-via-html.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/shell/src/app/load-via-html/load-via-html.component.css -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/app/load-via-html/load-via-html.component.html: -------------------------------------------------------------------------------- 1 |
2 | checkout MFE 3 | 4 | 8 |
9 | payment MFE 10 | 11 | 12 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/app/load-via-html/load-via-html.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-load-via-html', 5 | templateUrl: './load-via-html.component.html', 6 | styleUrls: ['./load-via-html.component.css'] 7 | }) 8 | export class LoadViaHtmlComponent { 9 | public checkoutHandler(message: string): void { 10 | alert(`Checkout event from component declared in HTML:\n\n${message}`); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/app/load-via-routing/load-via-routing.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/shell/src/app/load-via-routing/load-via-routing.component.css -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/shell/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/environments/environment.development.ts: -------------------------------------------------------------------------------- 1 | // See https://angular.io/guide/build#configuring-application-environments 2 | export const environment = { 3 | enableNavigationErrorsLogging: true, 4 | enableRemoteModuleEventsLogging: true, 5 | }; 6 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // See https://angular.io/guide/build#configuring-application-environments 2 | export const environment = { 3 | enableNavigationErrorsLogging: false, 4 | enableRemoteModuleEventsLogging: false, 5 | }; 6 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/advanced-ng16/shell/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/advanced-ng16/shell/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/angular-architects-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to my-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | import { MyFeatureModule } from './my-feature/my-feature.module'; 6 | 7 | @NgModule({ 8 | declarations: [AppComponent], 9 | imports: [BrowserModule, AppRoutingModule, MyFeatureModule], 10 | providers: [], 11 | bootstrap: [AppComponent], 12 | }) 13 | export class AppModule {} 14 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.html: -------------------------------------------------------------------------------- 1 |
Remote component 1 running Angular {{ version }}
2 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-my-component', 5 | templateUrl: './my-component.component.html', 6 | styleUrls: ['./my-component.component.css'] 7 | }) 8 | export class MyComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/angular-architects-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/angular-architects-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | Shell running Angular {{ version }} 3 |

4 | Go to home page 5 |

6 |

7 | Load Angular module named MyFeatureModule from mfe1 10 |

11 | 12 |
13 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | AppRoutingModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/app/remote-modules.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tell the TypeScript Compiler that it should assume that these modules exist. 3 | * They will be loaded and available at runtime. 4 | */ 5 | declare module 'mfe1/my-feature-module'; 6 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/angular-architects-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/angular-architects-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/angular-architects-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule], 9 | }) 10 | export class AppRoutingModule {} 11 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/basic-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to my-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | } 10 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | import { MyFeatureModule } from 'src/app/my-feature/my-feature.module'; 6 | 7 | @NgModule({ 8 | declarations: [AppComponent], 9 | imports: [BrowserModule, AppRoutingModule, MyFeatureModule], 10 | providers: [], 11 | bootstrap: [AppComponent], 12 | }) 13 | export class AppModule {} 14 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.html: -------------------------------------------------------------------------------- 1 |
Remote component 1 running Angular {{ version }}
2 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-my-component', 5 | templateUrl: './my-component.component.html', 6 | styleUrls: ['./my-component.component.css'] 7 | }) 8 | export class MyComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/basic-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/basic-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | Shell running Angular {{ version }} 3 |

4 | Go to home page 5 |

6 |

7 | Load Angular module named MyFeatureModule from mfe1 10 |

11 | 12 |
13 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | AppRoutingModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/app/remote-modules.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Tell the TypeScript Compiler that it should assume that these modules exist. 3 | * They will be loaded and available at runtime. 4 | */ 5 | declare module 'mfe1/my-feature-module'; 6 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/basic-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/basic-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /code-demos/basic-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: 'my-standalone-component', 7 | loadComponent: () => 8 | import('./my-standalone-component/my-standalone-component.component') 9 | .then((m) => m.MyStandaloneComponent), 10 | }, 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forRoot(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class AppRoutingModule {} 18 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-custom-events-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to /my-standalone-component 7 |

8 | 9 | 10 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | providers: [], 9 | bootstrap: [AppComponent], 10 | imports: [BrowserModule, AppRoutingModule] 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.html: -------------------------------------------------------------------------------- 1 |
2 | My standalone Angular component running Angular {{ version }} 3 |

4 | 5 |

6 |
7 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-custom-events-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-custom-events-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/app/my-standalone-component/my-standalone-component-bootstrap.ts", 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | 9 | .messageFromMfe{ 10 | color: orange; 11 | } 12 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | 5 | @NgModule({ 6 | declarations: [AppComponent], 7 | imports: [BrowserModule], 8 | schemas: [CUSTOM_ELEMENTS_SCHEMA], 9 | providers: [], 10 | bootstrap: [AppComponent], 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-custom-events-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-custom-events-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/communication-custom-events-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: 'my-standalone-component', 7 | loadComponent: () => 8 | import('./my-standalone-component/my-standalone-component.component') 9 | .then((m) => m.MyStandaloneComponent), 10 | }, 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forRoot(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class AppRoutingModule {} 18 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-event-bus-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to /my-standalone-component 7 |

8 | 9 | 10 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | providers: [], 9 | bootstrap: [AppComponent], 10 | imports: [BrowserModule, AppRoutingModule] 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.html: -------------------------------------------------------------------------------- 1 |
2 | My standalone Angular component running Angular {{ version }} 3 |

4 | 5 |

6 |
7 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-event-bus-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-event-bus-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/app/my-standalone-component/my-standalone-component-bootstrap.ts", 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | 9 | .messageFromMfe{ 10 | color: orange; 11 | } 12 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | Shell running Angular {{ version }} 3 |
4 | 5 |
6 | 7 |
8 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | public readonly version: string = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { Mfe1Component } from './mfe1-component/mfe1.component'; 5 | import { OtherComponent } from './other-component/other.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | Mfe1Component, 11 | OtherComponent 12 | ], 13 | imports: [BrowserModule], 14 | schemas: [CUSTOM_ELEMENTS_SCHEMA], 15 | providers: [], 16 | bootstrap: [AppComponent], 17 | }) 18 | export class AppModule {} 19 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/app/mfe1-component/message-sent-event.ts: -------------------------------------------------------------------------------- 1 | export class MessageSentEvent { 2 | constructor(public readonly message: string) { } 3 | 4 | public static fromMessageSentCustomEvent(event: Event): MessageSentEvent { 5 | const messageSent = (event as CustomEvent).detail; 6 | return new MessageSentEvent(messageSent); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/app/mfe1-component/mfe1.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/app/mfe1-component/mfe1.component.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/app/other-component/other.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #08a10d; 3 | background-color: #f0f9ed; 4 | text-align: center; 5 | color: #08a10d; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/app/other-component/other.component.html: -------------------------------------------------------------------------------- 1 |
2 | This component will listen to events from the mfe1 component using an event 3 | bus 4 |

message sent event: {{ messageSentEventAsJson }}

5 |
6 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-event-bus-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/communication-event-bus-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/communication-event-bus-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-directive-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to my-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | imports: [BrowserModule, AppRoutingModule], 9 | providers: [], 10 | bootstrap: [AppComponent], 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.html: -------------------------------------------------------------------------------- 1 |
2 | Remote component 1 running Angular {{ version }} 3 |

4 | 5 |

6 |

Input value is: {{ inputText }}

7 |
8 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/app/my-feature/my-feature.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { MyComponent } from './my-component/my-component.component'; 4 | import { RouterModule, Routes } from '@angular/router'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '**', 9 | component: MyComponent, 10 | }, 11 | ]; 12 | 13 | @NgModule({ 14 | declarations: [MyComponent], 15 | imports: [ 16 | CommonModule, 17 | RouterModule.forChild(routes), // see https://angular.io/guide/lazy-loading-ngmodules#forroot-and-forchild 18 | ], 19 | }) 20 | export class MyFeatureModule {} 21 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-directive-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-directive-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { LoadRemoteComponentDirective } from './load-remote-component.directive'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent, 9 | LoadRemoteComponentDirective 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | ], 14 | providers: [], 15 | bootstrap: [AppComponent] 16 | }) 17 | export class AppModule { } 18 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-directive-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-directive-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/component-directive-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 | 3 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { MyFeatureModule } from './my-feature/my-feature.module'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | imports: [BrowserModule, MyFeatureModule], 9 | providers: [], 10 | bootstrap: [AppComponent], 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.html: -------------------------------------------------------------------------------- 1 |
2 | Remote component 1 running Angular {{ version }} 3 |

Input value is: {{ inputText }}

4 |
5 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, VERSION } from '@angular/core'; 2 | 3 | // The webpack configuration file at /component-ng16/mfe1-ng16/webpack.config.js 4 | // exposes a webpack module which contains this Angular component 5 | @Component({ 6 | selector: 'app-my-component', 7 | templateUrl: './my-component.component.html', 8 | styleUrls: ['./my-component.component.css'], 9 | }) 10 | export class MyComponent { 11 | public readonly version = VERSION.full; 12 | 13 | @Input() 14 | public inputText?: string; 15 | } 16 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/component-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | 5 | @NgModule({ 6 | declarations: [AppComponent], 7 | imports: [BrowserModule], 8 | providers: [], 9 | bootstrap: [AppComponent], 10 | }) 11 | export class AppModule {} 12 | -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/component-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-standalone-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to my-standalone-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | imports: [BrowserModule, AppRoutingModule], 9 | providers: [], 10 | bootstrap: [AppComponent], 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.html: -------------------------------------------------------------------------------- 1 |
2 | My standalone Angular component running Angular {{ version }} 3 |

Input value is: {{ inputText }}

4 |
5 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-standalone-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-standalone-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { AppRoutingModule } from './app-routing.module'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule, 12 | AppRoutingModule 13 | ], 14 | providers: [], 15 | bootstrap: [AppComponent] 16 | }) 17 | export class AppModule { } 18 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-standalone-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/component-standalone-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/component-standalone-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-manifest-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to my-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | } 10 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | import { MyFeatureModule } from './my-feature/my-feature.module'; 6 | 7 | @NgModule({ 8 | declarations: [AppComponent], 9 | imports: [BrowserModule, AppRoutingModule, MyFeatureModule], 10 | providers: [], 11 | bootstrap: [AppComponent], 12 | }) 13 | export class AppModule {} 14 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.html: -------------------------------------------------------------------------------- 1 |
Remote component 1 running Angular {{ version }}
2 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-my-component', 5 | templateUrl: './my-component.component.html', 6 | styleUrls: ['./my-component.component.css'] 7 | }) 8 | export class MyComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-manifest-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-manifest-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | name: "mfe1-ng16", 8 | filename: "remoteEntry.js", // this doesn't need to be set, if not specified it defaults to remoteEntry.js. Setting it here just for demo purposes. 9 | exposes: { 10 | "./my-feature-module": "./src/app/my-feature/my-feature.module.ts", 11 | }, 12 | shared: { 13 | ...shareAll({ 14 | singleton: true, 15 | strictVersion: true, 16 | requiredVersion: "auto", 17 | }), 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | Shell running Angular {{ version }} 3 |

4 | Go to home page 5 |

6 |

7 | Load Angular module named MyFeatureModule from mfe1 10 |

11 | 12 |
13 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | AppRoutingModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-manifest-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/assets/mf.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "mfe1": "http://localhost:4201/remoteEntry.js" 3 | } 4 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-manifest-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/dynamic-manifest-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to my-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | } 10 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | import { MyFeatureModule } from './my-feature/my-feature.module'; 6 | 7 | @NgModule({ 8 | declarations: [AppComponent], 9 | imports: [BrowserModule, AppRoutingModule, MyFeatureModule], 10 | providers: [], 11 | bootstrap: [AppComponent], 12 | }) 13 | export class AppModule {} 14 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.html: -------------------------------------------------------------------------------- 1 |
Remote component 1 running Angular {{ version }}
2 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/app/my-feature/my-component/my-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-my-component', 5 | templateUrl: './my-component.component.html', 6 | styleUrls: ['./my-component.component.css'] 7 | }) 8 | export class MyComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | name: "mfe1-ng16", 8 | filename: "remoteEntry.js", // this doesn't need to be set, if not specified it defaults to remoteEntry.js. Setting it here just for demo purposes. 9 | exposes: { 10 | "./my-feature-module": "./src/app/my-feature/my-feature.module.ts", 11 | }, 12 | shared: { 13 | ...shareAll({ 14 | singleton: true, 15 | strictVersion: true, 16 | requiredVersion: "auto", 17 | }), 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | Shell running Angular {{ version }} 3 |

4 | Go to home page 5 |

6 |

7 | Load Angular module named MyFeatureModule from mfe1 10 |

11 | 12 |
13 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | AppRoutingModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/dynamic-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/dynamic-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: 'my-standalone-component', 7 | loadComponent: () => 8 | import('./my-standalone-component/my-standalone-component.component') 9 | .then((m) => m.MyStandaloneComponent), 10 | }, 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forRoot(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class AppRoutingModule {} 18 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to /my-standalone-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | } 10 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | imports: [BrowserModule, AppRoutingModule], 9 | providers: [], 10 | bootstrap: [AppComponent], 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.html: -------------------------------------------------------------------------------- 1 |
2 | My standalone Angular component running Angular {{ version }} 3 |
4 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | legacy-peer-deps=true 4 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe2-ng14/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE2 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to /my-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | } 10 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { MyFeatureModule } from './my-feature/my-feature.module'; 7 | 8 | @NgModule({ 9 | declarations: [AppComponent], 10 | imports: [BrowserModule, AppRoutingModule, MyFeatureModule], 11 | providers: [], 12 | bootstrap: [AppComponent], 13 | }) 14 | export class AppModule {} 15 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/app/my-feature/my-component/my-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/app/my-feature/my-component/my-component.component.html: -------------------------------------------------------------------------------- 1 |
Remote component 2 running Angular {{ version }}
2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/app/my-feature/my-component/my-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mfe2-my-component', 5 | templateUrl: './my-component.component.html', 6 | styleUrls: ['./my-component.component.css'] 7 | }) 8 | export class MyComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe2-ng14/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import { AppModule } from './app/app.module'; 4 | import { environment } from './environments/environment'; 5 | 6 | if (environment.production) { 7 | enableProdMode(); 8 | } 9 | 10 | platformBrowserDynamic() 11 | .bootstrapModule(AppModule) 12 | .catch((err) => console.error(err)); 13 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe2-ng14/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe2Ng14 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts", 11 | "src/app/my-feature/remote-bootstrap.ts" 12 | ], 13 | "include": [ 14 | "src/**/*.d.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe2-ng14/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { MyComponent } from './my-component/my-component.component'; 3 | 4 | // This Angular module is shared/imported by both the DevPlatformModule and the 5 | // MfePlatformModule. 6 | // In this code demo, this AppModule is a feature module whilst the DevPlatformModule 7 | // and MfePlatformModule are root modules. For more info see https://angular.io/guide/feature-modules 8 | @NgModule({ 9 | declarations: [MyComponent], 10 | imports: [], 11 | providers: [], 12 | bootstrap: [], 13 | exports: [MyComponent], 14 | }) 15 | export class AppModule { 16 | } 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/app/my-component/my-component.component.css: -------------------------------------------------------------------------------- 1 | .card { 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/app/my-component/my-component.component.html: -------------------------------------------------------------------------------- 1 |
Remote component 3 running Angular {{ version }}
2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/app/my-component/my-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mfe3-my-component', 5 | templateUrl: './my-component.component.html', 6 | styleUrls: ['./my-component.component.css'], 7 | }) 8 | export class MyComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe3-ng12/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/dev-platform/dev-platform-entry.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe3-ng12/src/dev-platform/dev-platform-entry.component.css -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/dev-platform/dev-platform-entry.component.html: -------------------------------------------------------------------------------- 1 | MFE3 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to /my-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/dev-platform/dev-platform-entry.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './dev-platform-entry.component.html', 6 | styleUrls: ['./dev-platform-entry.component.css'] 7 | }) 8 | export class DevPlatformEntryComponent { 9 | } 10 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/dev-platform/dev-platform-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { MyComponent } from '../app/my-component/my-component.component'; 4 | 5 | const routes: Routes = [ 6 | { 7 | path: 'my-component', 8 | component: MyComponent, 9 | }, 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forRoot(routes)], 14 | exports: [RouterModule] 15 | }) 16 | export class DevPlatformRoutingModule { } 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/dev-platform/dev-platform.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { DevPlatformRoutingModule } from './dev-platform-routing.module'; 3 | import { DevPlatformEntryComponent } from './dev-platform-entry.component'; 4 | import { AppModule } from '../app/app.module'; 5 | import { BrowserModule } from '@angular/platform-browser'; 6 | 7 | @NgModule({ 8 | declarations: [DevPlatformEntryComponent], 9 | imports: [BrowserModule, AppModule, DevPlatformRoutingModule], 10 | providers: [], 11 | bootstrap: [DevPlatformEntryComponent], 12 | }) 13 | export class DevPlatformModule {} 14 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/environments/environment.mfe.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false, 3 | runMfePlatform: true, 4 | }; 5 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | runMfePlatform: false, 4 | }; 5 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe3-ng12/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe3Ng12 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts", 11 | "src/mfe-platform/remote-bootstrap.ts" 12 | ], 13 | "include": [ 14 | "src/**/*.d.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe3-ng12/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe4-ng12/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE4 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to /my-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | } 10 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | import { MyFeatureModule } from './my-feature/my-feature.module'; 6 | 7 | @NgModule({ 8 | declarations: [AppComponent], 9 | imports: [BrowserModule, AppRoutingModule, MyFeatureModule], 10 | providers: [], 11 | bootstrap: [AppComponent], 12 | }) 13 | export class AppModule {} 14 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/app/my-feature/my-component/my-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/app/my-feature/my-component/my-component.component.html: -------------------------------------------------------------------------------- 1 |
Remote component 4 running Angular {{ version }}
2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/app/my-feature/my-component/my-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'mfe4-my-component', 5 | templateUrl: './my-component.component.html', 6 | styleUrls: ['./my-component.component.css'] 7 | }) 8 | export class MyComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe4-ng12/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import { AppModule } from './app/app.module'; 4 | import { environment } from './environments/environment'; 5 | 6 | if (environment.production) { 7 | enableProdMode(); 8 | } 9 | 10 | platformBrowserDynamic() 11 | .bootstrapModule(AppModule) 12 | .catch((err) => console.error(err)); 13 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/mfe4-ng12/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe4Ng12 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/mfe4-ng12/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | Shell running Angular {{ version }} 3 |
4 | MFE1 5 | 6 |
7 | MFE2 8 | 12 |
13 |
14 | MFE3 15 |
16 | 17 |
18 | MFE4 19 | 20 |
21 |
22 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | imports: [ 10 | BrowserModule, 11 | ], 12 | providers: [], 13 | schemas: [CUSTOM_ELEMENTS_SCHEMA], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/multi-version-ng/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: false, 13 | strictVersion: false, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/multi-version-ng/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/another-standalone-component/another-standalone-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #08a10d; 3 | background-color: #eff9ed; 4 | text-align: center; 5 | color: #08a10d; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/another-standalone-component/another-standalone-component.component.html: -------------------------------------------------------------------------------- 1 |
another standalone component running Angular {{ version }}
2 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/another-standalone-component/another-standalone-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | @Component({ 5 | selector: 'app-another-standalone-component', 6 | standalone: true, 7 | imports: [CommonModule], 8 | templateUrl: './another-standalone-component.component.html', 9 | styleUrls: ['./another-standalone-component.component.css'] 10 | }) 11 | export class AnotherStandaloneComponent { 12 | version = VERSION.full; 13 | } 14 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: 'standalone', 7 | loadChildren: () => 8 | import('./standalone-component.route') 9 | .then(m => m.STANDALONE_COMPONENTS_ROUTES) 10 | }, 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forRoot(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class AppRoutingModule {} 18 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/routes-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to /standalone/my 7 |

8 |

9 | Go to /standalone/another 10 |

11 | 12 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | } 10 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | imports: [BrowserModule, AppRoutingModule], 9 | providers: [], 10 | bootstrap: [AppComponent], 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.html: -------------------------------------------------------------------------------- 1 |
my standalone component running Angular {{ version }}
2 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | @Component({ 5 | selector: 'app-my-standalone-component', 6 | standalone: true, 7 | imports: [CommonModule], 8 | templateUrl: './my-standalone-component.component.html', 9 | styleUrls: ['./my-standalone-component.component.css'] 10 | }) 11 | export class MyStandaloneComponent { 12 | version = VERSION.full; 13 | } 14 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/routes-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/routes-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | name: "mfe1-ng16", 8 | filename: "remoteEntry.js", // this doesn't need to be set, if not specified it defaults to remoteEntry.js. Setting it here just for demo purposes. 9 | exposes: { 10 | "./standalone-routes": "./src/app/standalone-component.route.ts", 11 | }, 12 | shared: { 13 | ...shareAll({ 14 | singleton: true, 15 | strictVersion: true, 16 | requiredVersion: "auto", 17 | }), 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | Shell running Angular {{ version }} 3 |

4 | Go to home page 5 |

6 |

7 | Load Angular standalone component named MyStandaloneComponent from 9 | mfe1 11 |

12 |

13 | Load Angular standalone component named AnotherStandaloneComponent from 15 | mfe1 17 |

18 | 19 |
20 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | version = VERSION.full; 10 | } 11 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { AppRoutingModule } from './app-routing.module'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule, 12 | AppRoutingModule 13 | ], 14 | providers: [], 15 | bootstrap: [AppComponent] 16 | }) 17 | export class AppModule { } 18 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/routes-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/routes-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/routes-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 | 3 |

4 | Go to home page 5 |

6 |

7 | Go to /my-standalone-component 8 |

9 | 10 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | providers: [], 9 | bootstrap: [AppComponent], 10 | imports: [BrowserModule, AppRoutingModule] 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.html: -------------------------------------------------------------------------------- 1 |
2 | My standalone Angular component running Angular {{ version }} 3 |

4 | 5 |

6 |

Input value is: {{ inputText }}

7 |
8 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/app/my-standalone-component/remote-bootstrap.ts", 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { ModuleFederationToolsModule } from '@angular-architects/module-federation-tools'; 6 | 7 | @NgModule({ 8 | declarations: [AppComponent], 9 | imports: [BrowserModule, AppRoutingModule, ModuleFederationToolsModule], 10 | schemas: [], 11 | providers: [], 12 | bootstrap: [AppComponent], 13 | }) 14 | export class AppModule {} 15 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/web-component-angular-architects-wrapper-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-directive-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to /my-standalone-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | providers: [], 9 | bootstrap: [AppComponent], 10 | imports: [BrowserModule, AppRoutingModule] 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.html: -------------------------------------------------------------------------------- 1 |
2 | My standalone Angular component running Angular {{ version }} 3 |

4 | 5 |

6 |

Input value is: {{ inputText }}

7 |
8 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-directive-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-directive-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/app/my-standalone-component/remote-bootstrap.ts", 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { LoadRemoteWebComponentDirective } from './load-remote-web-component.directive'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent, LoadRemoteWebComponentDirective], 8 | imports: [BrowserModule], 9 | schemas: [CUSTOM_ELEMENTS_SCHEMA], 10 | providers: [], 11 | bootstrap: [AppComponent], 12 | }) 13 | export class AppModule {} 14 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-directive-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-directive-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/web-component-directive-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-ng16/mfe1-ng16/src/app/app.component.css -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | MFE1 dev platform 2 |

3 | Go to home page 4 |

5 |

6 | Go to /my-standalone-component 7 |

8 | 9 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [AppComponent], 8 | providers: [], 9 | bootstrap: [AppComponent], 10 | imports: [BrowserModule, AppRoutingModule] 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #080da1; 3 | background-color: #ededf9; 4 | text-align: center; 5 | color: #080da1; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/app/my-standalone-component/my-standalone-component.component.html: -------------------------------------------------------------------------------- 1 |
2 | My standalone Angular component running Angular {{ version }} 3 |

4 | 5 |

6 |

Input value is: {{ inputText }}

7 |
8 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-ng16/mfe1-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-ng16/mfe1-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mfe1Ng16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/app/my-standalone-component/my-standalone-component-bootstrap.ts", 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/mfe1-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ 2 | package-lock=true 3 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .card{ 2 | border: 1px solid #B9004B; 3 | background-color: #f9edf2; 4 | text-align: center; 5 | color: #B9004B; 6 | padding: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | 5 | @NgModule({ 6 | declarations: [AppComponent], 7 | imports: [BrowserModule], 8 | schemas: [CUSTOM_ELEMENTS_SCHEMA], 9 | providers: [], 10 | bootstrap: [AppComponent], 11 | }) 12 | export class AppModule {} 13 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-ng16/shell-ng16/src/assets/.gitkeep -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app/app.module'; 3 | 4 | platformBrowserDynamic() 5 | .bootstrapModule(AppModule) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/code-demos/web-component-ng16/shell-ng16/src/favicon.ico -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ShellNg16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts" 9 | ], 10 | "include": [ 11 | "src/**/*.d.ts" 12 | ] 13 | } -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { 2 | shareAll, 3 | withModuleFederationPlugin, 4 | } = require("@angular-architects/module-federation/webpack"); 5 | 6 | module.exports = withModuleFederationPlugin({ 7 | remotes: { 8 | // no need to declare remotes as they are dynamically loaded. 9 | }, 10 | shared: { 11 | ...shareAll({ 12 | singleton: true, 13 | strictVersion: true, 14 | requiredVersion: "auto", 15 | }), 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /code-demos/web-component-ng16/shell-ng16/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /docs/micro-frontends-and-moduliths-with-angular-5th-edition.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/docs/micro-frontends-and-moduliths-with-angular-5th-edition.pdf -------------------------------------------------------------------------------- /docs/standalone-components-and-APIs-1st-edition.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/docs/standalone-components-and-APIs-1st-edition.pdf -------------------------------------------------------------------------------- /docs/static-assets/module-federation-multi-frameworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edumserrano/webpack-module-federation-with-angular/d0638a3908b650ea67f96e88a06fc190062c344c/docs/static-assets/module-federation-multi-frameworks.png --------------------------------------------------------------------------------