300 Micro frontend support - chempkovsky/CS82ANGULAR GitHub Wiki

Steps required to accomplish the task

Reading
What we are going to create
Created angular projects on github
Create Angular Repository
AngularPhonebook app
AngularAsp app
Add module-federation support for AngularPhonebook
Features

Steps required to accomplish the task

Reading

Micro-frontend app design using Module Federation
280 Angular 14 Library, Webpack 5, Internationalization
281 Angular 14 Library, Lazy loading, Internationalization
Naming the folders for Micro frontend App

What we are going to create

We continue to work with the server side created for monolithic app. Suppose our Visual Studio 22 solution is in the folder:

E:\Development\PhonebookSolution\

according to the rules we are going to create two apps
- AngularPhonebook for DbContext=PhbkDbContext. It will play the of Module Federation Shell.
  - We will place all the generated code for this application in a set of separate libraries.
  - The only app project files that will change:
    - src/app/app-routing.module.ts
    - src/app/app.component.ts
    - src/app/app.component.html
- AngularAsp for DbContext=aspnetchckdbcontext. It will play the of Module Federation Remote.
  - According to the note not all generated code for this application we will place in a set of separate libraries.

Created angular projects on github

You can get already created angular projects github

Create Angular Repository

run windows terminal, cd the drive and folder you like
- our choice was E:\Development\PhonebookSolution\
run the command

ng new AngularMatPhonebookSolution --no-create-application
cd AngularMatPhonebookSolution

It will create mono-repo project with one special subfolder = projects
- import projects-subfolder into the solution. Read instruction here

AngularPhonebook app

Create AngularPhonebook app

the ng generate application AngularPhonebook-command is not enough
please read the Paragraph with instructions

Create common modules library

run windows terminal, cd the folder of the mono-repo project.
- In our case, we have E:\Development\PhonebookSolution\AngularMatPhonebookSolution
run the command

ng generate library common-modules

After creating we
- remove all files in the 'projects/common-modules/src/lib'-subfolders
- modify 'projects/common-modules/src/public-api.ts'-file as follows:

/*
 * 
 */
import '@angular/localize/init';

repeat the steps like those of the paragraph 00000 ContextLevelBatch
- From inside Visual Studio 2022
  - right click the 'projects/common-modules/src/lib'-folder
  - run JavaScripts Wizard
  - select PhbkDbContext-dbcontext
  - run context level batch with a name:
    - 00001-ContextLevelMonoCommonModulesBatch.json (or 00001-ContextLevelMonoCommonModulesBatch.kendo.json)
  - Note: The script generates the code and modifies 'projects/common-modules/src/public-api.ts'-file

Create common interfaces library

to create the lib run the command

ng generate library common-interfaces

Repeat the steps described for common-modules-library, but run the script
- 00002-ContextLevelMonoCommonInterfacesBatch.json(or 00002-ContextLevelMonoCommonInterfacesBatch.kendo.json)

Create common services library

to create the lib run the command

ng generate library common-services

Repeat the steps described for common-modules-library, but run the script
- 00003-ContextLevelMonoCommonServicesBatch.json(or 00003-ContextLevelMonoCommonServicesBatch.kendo.json)

Create common formatters library

to create the lib run the command

ng generate library common-formatters

Repeat the steps described for common-modules-library, but run the script
- 00004-ContextLevelMonoCommonFormattersBatch.json(or 00004-ContextLevelMonoCommonFormattersBatch.kendo.json)

Create common components library

to create the lib run the command

ng generate library common-components

Repeat the steps described for common-modules-library, but run the script
- 00005-ContextLevelMonoCommonComponentsBatch.json(or 00005-ContextLevelMonoCommonComponentsBatch.kendo.json)

Create common auth library

to create the lib run the command

ng generate library common-auth

Repeat the steps described for common-modules-library, but run the script
- 00201-ContextLevelMonoCommonAuth.json(or 00201-ContextLevelMonoCommonAuth.kendo.json)

Run AssetsFolderData script

Repeat the steps of the paragraph
- From inside Visual Studio 2022
  - right click the 'projects/AngularPhonebook/src/app'-folder
  - ...
  - select PhbkDbContext-dbcontext
  - generate the script
    - 00010-AssetsFolderData.json

Run appCompAndModule script

Repeat the steps of the paragraph
- From inside Visual Studio 2022
  - right click the 'projects/AngularPhonebook/src/app'-folder
  - ...
  - select PhbkDbContext-dbcontext
  - generate the script
    - 00231-ContextLevelMonoAppCompAndModule.json (or 00231-ContextLevelMonoAppCompAndModule.kendo.json)

Localize note

Open projects/AngularPhonebook/src/polyfills.ts-file
Make sure import 'zone.js'; is before the import '@angular/localize/init', i.e. the correct code is as follows:

import 'zone.js';  // Included with Angular CLI.
import '@angular/localize/init';

run app

run the command

ng serve --project=AngularPhonebook -o

make sure, navigation works to login, logout, ..., home.

Create phonebook interfaces library

run the command

ng generate library phonebook-interfaces

After creating we
- remove all files in the 'projects/phonebook-interfaces/src/lib'-subfolders
- modify 'projects/phonebook-interfaces/src/public-api.ts'-file as follows:

/*
 * 
 */
import '@angular/localize/init';

create projects/phonebook-interfaces/src/lib/lpd-division-subfolder
- right click projects/phonebook-interfaces/src/lib/lpd-division-subfolder
- run JavaScripts Wizard
  - select PhbkDbContext
  - for select lpd-division-view
  - run 01101-MonoInterfaces.json-batch
repeat the steps with
- lpd-emp-first-name, lpd-emp-first-name-view and 01101-MonoInterfaces.json
- lpd-emp-last-name, lpd-emp-last-name-view and 01101-MonoInterfaces.json
- lpd-emp-second-name, lpd-emp-second-name-view and 01101-MonoInterfaces.json
- lpd-phone, lpd-phone-view and 01101-MonoInterfaces.json
- lpr-division01, lpr-division01-view and 01101-MonoInterfaces.json
- lpr-division02, lpr-division02-view and 01101-MonoInterfaces.json
- lpr-employee01, lpr-employee01-view and 01101-MonoInterfaces.json
- lpr-employee02, lpr-employee02-view and 01101-MonoInterfaces.json
- lpr-phone01, lpr-phone01-view and 01101-MonoInterfaces.json
- lpr-phone02, lpr-phone02-view and 01101-MonoInterfaces.json
- lpr-phone03, lpr-phone03-view and 01101-MonoInterfaces.json
- lpr-phone04, lpr-phone04-view and 01101-MonoInterfaces.json
- phbk-division, phbk-division-view and 01101-MonoInterfaces.json
- phbk-employee, phbk-employee-view and 01101-MonoInterfaces.json
- phbk-enterprise, phbk-enterprise-view and 01101-MonoInterfaces.json
- phbk-phone, phbk-phone-view and 01101-MonoInterfaces.json
- phbk-phone-type, phbk-phone-type-view and 01101-MonoInterfaces.json
run the command

ng build --project=phonebook-interfaces

Create phonebook services library

run the command

ng generate library phonebook-services

Repeat the steps described for phonebook-interfaces-library, but run the script
- 01401-MonoWebApiService.json

Create phonebook scforms library

run the command

ng generate library phonebook-sforms

After creating we
- remove all files in the 'projects/phonebook-sforms/src/lib'-subfolders
- modify 'projects/phonebook-sforms/src/public-api.ts'-file as follows:

/*
 * 
 */
import '@angular/localize/init';

create projects/phonebook-sforms/src/lib/phbk-division-subfolder
- right click projects/phonebook-sforms/src/lib/phbk-division-subfolder
- run JavaScripts Wizard
  - select PhbkDbContext
  - for select phbk-division-view
  - run 01421-MonoSForm.json-batch (or 01421-MonoSForm.kendo.json)
repeat the steps with
- phbk-employee, phbk-employee-view and 01421-MonoSForm.json(or 01421-MonoSForm.kendo.json)
- phbk-enterprise, phbk-enterprise-view and 01421-MonoSForm.json(or 01421-MonoSForm.kendo.json)
- phbk-phone, phbk-phone-view and 01421-MonoSForm.json(or 01421-MonoSForm.kendo.json)
- phbk-phone-type, phbk-phone-type-view and 01421-MonoSForm.json(or 01421-MonoSForm.kendo.json)

Create phonebook updforms library

run the command

ng generate library phonebook-updforms

Repeat the steps described for phonebook-sforms-library, but run the scripts
- 01501-MonoVform.json (01501-MonoVform.kendo.json)
- 01503-MonoAform.json (01503-MonoAform.kendo.json)
- 01503-MonoUform.json (01503-MonoUform.kendo.json)
- 01503-MonoDform.json (01503-MonoDform.kendo.json)

Create phonebook lforms library

run the command

ng generate library phonebook-lforms

Repeat the steps described for phonebook-sforms-library, but run the scripts
- 01601-MonoLform.json (or 01601-MonoLform.kendo.json)

Create phonebook rlforms library

run the command

ng generate library phonebook-rlforms

Repeat the steps described for phonebook-sforms-library, but run the scripts:
- 01961-MonoRv.json (or 01961-MonoRv.kendo.json)
- 01963-MonoRa.json (or 01963-MonoRa.kendo.json)
- 01965-MonoRu.json (or 01965-MonoRu.kendo.json)
- 01967-MonoRd.json (or 01967-MonoRd.kendo.json)
- 01969-MonoRl.json (or 01969-MonoRl.kendo.json)
Note: The order of entities is important. Please apply Detail-first-rule. So the correct order is as follows:
- phbk-phone-view
- phbk-division-view
- phbk-employee-view
- phbk-enterprise-view
- phbk-phone-type

Create phonebook rdlforms library

run the command

ng generate library phonebook-rdlforms

Repeat the steps described for phonebook-sforms-library, but run the scripts:
- 02021-MonoRdl.json (or 02021-MonoRdl.kendo.json)
Note: The order of entities is important. Please apply Detail-first-rule. So the correct order is as follows:
- phbk-phone-view
- phbk-division-view
- phbk-employee-view
- phbk-enterprise-view
- phbk-phone-type

Generate routes for AngularPhonebook app

Next steps must be applied for the following views:
- phbk-phone-view
- phbk-division-view
- phbk-employee-view
- phbk-enterprise-view
- phbk-phone-type
From inside Visual Studio 2022
- right click projects/angular-phonebook/src/app-folder
- run JavaScripts Wizard
- select PhbkDbContext-dbcontext
- select the view from the list above
- run 01980-R-lazy.routes.ts/r-lazy.routes.ts.t4 which is not the batch script.
  - do not save the file but copy generated code and paste into const routes: Routes = [...]-array of the projects/angular-phonebook/src/app/app-routing.module.ts
  - read the instruction at the beginning of the generated code
    - here is an example:

//
// How to use:
//  1.
//  <li [ngbNavItem] > <a ngbNavLink [routerLink]="['PhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types</a>/li>                  
//  2.
//  <a mat-list-item [routerLink]="['PhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types</a>
//  3.
//  mainMenuItems: Array<{id?: number | string, parentId?: number | string, text?: string, icon?: string, disabled?: boolean, selected?: boolean, separator?: boolean, path?: string}> = [
//      { text: "Home", icon: "k-i-home", selected: false, path: "/home" },
//      ...
//      { text: "List of Phone Types", icon: "k-i-grid", selected: false, path: 'PhbkPhoneTypeView' },
//      ...
//  // never leave separator as the last element of an array
//  //      { separator: true },
//  ]
//
//
// 2. Do not save this file.
//
// Copy generated paths and insert into "const routes: Routes = [...] "-array
// const routes: Routes = [
//  ...

Repeat the steps above with 02060-Rdl-lazy.routes.ts/rdl-lazy.routes.ts.t4, which is not a batch script.

AngularPhonebook application launch

Build all the libraries. The build order is important:
- common-modules
- common-interfaces
- common-services
- common-formatters
- common-components
- common-auth
- phonebook-interfaces
- phonebook-services
- phonebook-sforms
- phonebook-updforms
- phonebook-lforms
- phonebook-rlforms
- phonebook-rdlforms
read the article 015 Preparing projects for application launch
run the app

ng serve --project=AngularPhonebook -o

AngularAsp app

Create AngularAsp app

the ng generate application AngularAsp-command is not enough
please read the Paragraph with instructions

Shared libs

We do not need to generate second copy of the common-xxxx-libraries
- Instead
  - Open 'PhBkContext.PhBkContext.csproj.PhBkContext.PhBk.PhbkDbContext.json' and copy "CommonStaffs": [...]-array
  - Open PhBkContext.PhBkContext.csproj.PhBkContext.Auth.aspnetchckdbcontext.json and replace "CommonStaffs": [...]-array with "CommonStaffs": [...]`-array of the 'PhBkContext.PhBkContext.csproj.PhBkContext.PhBk.PhbkDbContext.json'

Run AssetsFolderData script for AngularAsp

repeat the steps described in the paragraph. Please use aspnetchckdbcontext-Dbcontext.

Run appCompAndModule script for AngularAsp

repeat the steps described in the paragraph. Please use aspnetchckdbcontext-Dbcontext.

Add module federation support for AngularAsp

run the command:

ng add @angular-architects/module-federation --project AngularAsp --port 4201 --type remote

Create asp interfaces library

run the command

ng generate library asp-interfaces

After creating we
- remove all files in the 'projects/asp-interfaces/src/lib'-subfolders
- modify 'projects/asp-interfaces/src/public-api.ts'-file as follows:

/*
 * 
 */
import '@angular/localize/init';

From inside Visual Studio 2022
- right click the 'projects/asp-interfaces/src/lib'-folder
- run JavaScripts Wizard
- select aspnetchckdbcontext-dbcontext
- select aspnetmodel-view-ViewModel
- run 02140-MonoAspNetAllInterfacesBatch.json-batch script

Create asp services library

run the command

ng generate library asp-services

Repeat the steps described for asp-interfaces-library, but run the script
- 02141-MonoAspNetAllWebApiServicesBatch.json

Create asp sforms library

run the command

ng generate library asp-sforms

Repeat the steps described for asp-interfaces-library, but run the script
- 02142-MonoAspNetAllSFormsBatch.json (or 02142-MonoAspNetAllSFormsBatch.kendo.json)

Create asp updforms library

run the command

ng generate library asp-updforms

Repeat the steps described for asp-interfaces-library, but run the scripts
- 02143-MonoAspNetAllVformsBatch.json (or 02143-MonoAspNetAllVformsBatch.kendo.json)
- 02144-MonoAspNetAllAformsBatch.json (or 02144-MonoAspNetAllAformsBatch.kendo.json)
- 02145-MonoAspNetAllUformsBatch.json (or 02145-MonoAspNetAllUformsBatch.kendo.json)
- 02146-MonoAspNetAllDformsBatch.json (or 02146-MonoAspNetAllDformsBatch.kendo.json)

Generate navigation aware components

Please read Break the rules for the second Micro-frontend App paragraph.
From inside Visual Studio 2022
- right click the 'projects/angular-asp/src/app'-folder
- run JavaScripts Wizard
- select aspnetchckdbcontext-dbcontext
- select aspnetmodel-view-ViewModel
- run the following scripts
  - 02147-MonoAspNetAllRvBatch.json (or 02147-MonoAspNetAllRvBatch.kendo.json)
  - 02148-MonoAspNetAllRaBatch.json (or 02148-MonoAspNetAllRaBatch.kendo.json)
  - 02149-MonoAspNetAllRuBatch.json (or 02149-MonoAspNetAllRuBatch.kendo.json)
  - 02150-MonoAspNetAllRdBatch.json (or 02150-MonoAspNetAllRdBatch.kendo.json)
  - 02151-MonoAspNetAllRlBatch.json (or 02151-MonoAspNetAllRlBatch.kendo.json)
  - 02152-MonoAspNetAllRdlBatch.json (or 02152-MonoAspNetAllRdlBatch.kendo.json)
- run the scripts above second time in the same order.
  - Some generated components reference other ones which can not be ready for the first time. So some components will be generated with errors after the first pass. (This is why generators do not throw an exceptions. Any errors will be written as a comments.) After the second pass all should be fine.

Try to launch Angular App app

Build all the libraries. The build order is important:
- common-modules
- common-interfaces
- common-services
- common-formatters
- common-components
- common-auth
- asp-interfaces
- asp-services
- asp-sforms
- asp-updforms
run the command

ng serve --project=AngularAsp -o

the response shows the errors

....
Build at: 2022-11-10T19:27:27.698Z - Hash: c9f126d23b37541f - Time: 33961ms

./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-ra-lazy.routing.module.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: E:\Development\PhonebookSolution\AngularMatPhonebookSolution\projects\angular-asp\src\app\components\aspnetmodel-view\aspnetmodel-view-ra-lazy.routing.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-ra.module.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):      
Error: E:\Development\PhonebookSolution\AngularMatPhonebookSolution\projects\angular-asp\src\app\components\aspnetmodel-view\aspnetmodel-view-ra.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-ra.routing.module.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: E:\Development\PhonebookSolution\AngularMatPhonebookSolution\projects\angular-asp\src\app\components\aspnetmodel-view\aspnetmodel-view-ra.routing.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-rd-lazy.routing.module.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: E:\Development\PhonebookSolution\AngularMatPhonebookSolution\projects\angular-asp\src\app\components\aspnetmodel-view\aspnetmodel-view-rd-lazy.routing.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-rd.module.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):      
Error: E:\Development\PhonebookSolution\AngularMatPhonebookSolution\projects\angular-asp\src\app\components\aspnetmodel-view\aspnetmodel-view-rd.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-rd.routing.module.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: E:\Development\PhonebookSolution\AngularMatPhonebookSolution\projects\angular-asp\src\app\components\aspnetmodel-view\aspnetmodel-view-rd.routing.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

....

open the projects\angular-asp\webpack.config.js file and comment all the lines inside exposes: { ... } declaration

...

name: 'AngularAsp',
  exposes: {
/*
    "./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-rdl-lazy.routing.module": "./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-rdl-lazy.routing.module",
    "./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-rv-lazy.routing.module": "./projects/angular-asp/src/app/components/aspnetmodel-view/aspnetmodel-view-rv-lazy.routing.module",

...

    "./projects/angular-asp/src/app/components/aspnetusermask-view/aspnetusermask-view-rdl.routing.module": "./projects/angular-asp/src/app/components/aspnetusermask-view/aspnetusermask-view-rdl.routing.module",
    "./projects/angular-asp/src/app/components/aspnetusermask-view/aspnetusermask-view-rdl-lazy.routing.module": "./projects/angular-asp/src/app/components/aspnetusermask-view/aspnetusermask-view-rdl-lazy.routing.module"
*/
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

...

run the command again

ng serve --project=AngularAsp -o

our app starts without errors
Now remove temporary comments in the projects\angular-asp\webpack.config.js file

Generate routes for AngularAsp app

read Routes article first.
repeat the steps described in the Generate routes for AngularPhonebook app paragraph.
- From inside Visual Studio 2022
  - right click the 'projects/angular-asp/src/app'-folder
  - run JavaScripts Wizard
  - select aspnetchckdbcontext-dbcontext
  - ...
generate routes for
- aspnetmodelView
- aspnetroleView
- aspnetuserView
run the command again

ng serve --project=AngularAsp -o

our app starts without errors

AngularAsp application launch

read the article 015 Preparing projects for application launch

Add module-federation support for AngularPhonebook

run the command

ng add @angular-architects/module-federation --project AngularPhonebook --port 4200 --type dynamic-host

modify projects\angular-phonebook\src\assets\mf.manifest.json
- "angularAsp" must be replaced with "AngularAsp"

{
	"AngularAsp": "http://localhost:4201/remoteEntry.js"
}

Modify webpack config js

open both files
- projects\angular-phonebook\webpack.config.js
- projects\angular-asp\webpack.config.js
add sharedMappings as follows:

module.exports = withModuleFederationPlugin({

...

  sharedMappings: ['common-modules','common-interfaces','common-services','common-formatters','common-components','common-auth',
  'asp-interfaces', 'asp-services', 'asp-sforms', 'asp-updforms'],
});

Generate additional routes for AngularPhonebook app

From inside Visual Studio 2022
- right click the 'projects/angular-phonebook/src/app'-folder
- run JavaScripts Wizard
- select aspnetchckdbcontext-dbcontext !!! (not PhbkDbContext!!!)
- for the following ModelViews
  - aspnetmodelView
  - aspnetroleView
  - aspnetuserView
- run the following scripts
  - 01980-R-lazy.routes.ts/r-lazy.routes.ts.t4
  - 02060-Rdl-lazy.routes.ts/rdl-lazy.routes.ts.t4
- modify the following files with the generated data
  - projects\angular-phonebook\src\app\app-routing.module.ts
  - projects\angular-phonebook\src\app\app.component.html

Modify global service

open the projects\common-services\src\lib\app-glbl-settings.service.ts-file
modify getWebApiPrefix-method as follows

    public getWebApiPrefix(vwNm: string): string {
        let reslt: string = '';
        if(!(vwNm === null)) {
                //
                // here: defining url by ViewName
                //

                if (vwNm === 'LpdDivisionView' || vwNm === 'LprDivision01View' || vwNm === 'LprDivision02View') {
                  reslt = this._settings.config.divisionLpWebApi;
                } else if (vwNm === 'LpdEmpLastNameView' || vwNm === 'LpdEmpFirstNameView' || vwNm === 'LpdEmpSecondNameView' || vwNm === 'LprEmployee01View' || vwNm === 'LprEmployee02View' ) {
                    reslt = this._settings.config.employeeLpWebApi;
                } else if (vwNm === 'LpdPhoneView' || vwNm === 'LprPhone01View' || vwNm === 'LprPhone02View' || vwNm === 'LprPhone03View' || vwNm === 'LprPhone04View' ) {
                    reslt = this._settings.config.phoneLpWebApi;
                } else {
                  reslt = this._settings.config.webApiUrl;
                }
                //reslt =  this._settings.config.webApiUrl; // 'https://localhost:7148/';
        }
        return reslt;
    }

read the paragraph first
modify projects\angular-asp\src\assets\app-config.json-file:
- set correct ports
- the last /-symbol of the addresses is important

{
    "webApiUrl": "https://localhost:7163/",
    "securityUrl": "https://localhost:7163/",
    "permissionWebApi": "https://localhost:7163/",
    "divisionLpWebApi": "https://localhost:7079/",
    "employeeLpWebApi": "https://localhost:7079/",
    "phoneLpWebApi": "https://localhost:7079/"
}

rebuild common-services
- run the command

ng build --project common-services

module federation applications launch

with Visual studio start WebApi services
start AngularAsp with a command: ng serve --project=AngularAsp -o
start AngularPhonebook with a command: ng serve --project=AngularPhonebook -o

Features

read the article first
Use cases
- Use case 1: generate features in the separate library, where this separate library references the code of other libraries (not the code of the apps)
  - can be used by module federation shell application
  - can be used by module federation remote application
- Use case 2: generate features in the application
  - can be used by owning applications
  - can be used by module federation shell if the owning applications is module federation remote
- Use case 3: generate features in the separate library, where this separate library references the code of the application
  - can be used by module federation shell application

Feature Use case 1

Feature Library of the module federation shell application

Generate the library

ng generate library phonebook-features

Clear src/lib folder of the library
- remove all files in the src/lib-folder of the phonebook-features-library
Remove content of the projects\phonebook-features\src\public-api.ts-file
- the content of the fiile must be as follows

/*
 * Public API Surface of phonebook-features
 */

Create subfolders under src/lib folder
- phonebook-lforms-ftrs
- phonebook-rdlforms-ftrs
- phonebook-rlforms-ftrs
From inside Visual Studio 2022
- right click projects\phonebook-features\src\lib\phonebook-lforms-ftrs
- run FeatureScripts Wizard
- choose PhbkDbContext-DbContext
- name the feature as LformsFeature
- add
  - PhbkPhoneTypeView/01600-Lform.component.ts
  - PhbkEnterpriseView/01600-Lform.component.ts
  - PhbkDivisionView/01600-Lform.component.ts
  - PhbkEmployeeView/01600-Lform.component.ts
  - PhbkPhoneView/01600-Lform.component.ts
- Run the feature scripts and save the result (the order is important)
  - 30100-.ftr.component.css/ftr.component.css.t4
  - 30100-.ftr.component.html/ftr.component.html.t4
  - 30100-.ftr.component.ts/ftr.component.ts.t4
  - 30100-.ftr.component.txt/ftr.component.txt.t4
  - 30130-.ftr.routing.module.ts/FtrRoutingModuleForFeature.ts.t4
  - 30130-.ftr.routing.module.txt/FtrRoutingModuleForFeature.txt.t4
  - 30150-.ftr.module.ts/FtrModuleForFeature.ts.t4
  - 30150-.ftr.module.txt/FtrModuleForFeature.txt.t4
  - 30160-.ftr.lazy.routing.module.ts/FtrLazyRoutingModuleForFeature.ts.t4
  - 30160-.ftr.lazy.routing.module.txt/FtrLazyRoutingModuleForFeature.txt.t4
From inside Visual Studio 2022
- right click projects\angular-phonebook\src\app. (It's an app folder of the angular-phonebook-application)
- run FeatureScripts Wizard
- choose PhbkDbContext-DbContext
- select LformsFeature-feature
- run the 30170-.ftr.lazy.routes.ts/ftr.lazy.routes.t4-script but do not save the result
  - copy generated html and typescript below into
    - projects\angular-phonebook\src\app\app.component.html
    - projects\angular-phonebook\src\app\app-routing.module.ts
here is html

<a mat-list-item [routerLink]="['/lformsfeature']" routerLinkActive="active">Title for LformsFeature </a>

here is typescript

    {  path: 'lformsfeature', 
    loadChildren: () => import('phonebook-features').then(m => m.LformsFeatureFtrLazyRoutingModule), 
    data: { vn: 'LformsFeatureFtrComponent', va: 'l'} },

Repeating the steps above and
- for the phonebook-rdlforms-ftrs-subfolder create RdListsFeature-feature for
  - PhbkEnterpriseView/02020-Rdlist.component.ts
- for the phonebook-rlforms-ftrs-subfolder create RListsFeature-feature for
  - PhbkEnterpriseView/02020-Rdlist.component.ts

Feature Library of the module federation remote application

At first we need a library which
- will not reference the code of the AngularAsp application
- will be referenced by the feature library
Generate asp-lforms library
- run the code

ng generate library asp-lforms

repeat the steps of the Create phonebook-lforms library paragraph
- use aspnetchckdbcontext-Dbcontext
- create Lforms for
  - aspnetmodel-view
  - aspnetrole-view
  - aspnetuser-view
Now, create Feature library and generate the code
- Library name is asp-lforms-ftr
- Dbcontext is aspnetchckdbcontext
- Feature name is AspLformsFeature
- Add to feature:
  - aspnetmodelView/01600-Lform.component.ts
  - aspnetroleView/01600-Lform.component.ts
  - aspnetuserView/01600-Lform.component.ts
From inside Visual Studio 2022
- right click projects\angular-phonebook\src\app. (It's an app folder of the angular-phonebook-application)
- run FeatureScripts Wizard
- choose aspnetchckdbcontext-DbContext
- select AspLformsFeature-feature
- run the 30170-.ftr.lazy.routes.ts/ftr.lazy.routes.t4-script but do not save the result
  - copy generated html and typescript into
    - projects\angular-phonebook\src\app\app.component.html
    - projects\angular-phonebook\src\app\app-routing.module.ts
From inside Visual Studio 2022
- right click projects\angular-asp\src\app. (It's an app folder of the angular-asp-application)
- run FeatureScripts Wizard
- choose aspnetchckdbcontext-DbContext
- select AspLformsFeature-feature
- run the 30170-.ftr.lazy.routes.ts/ftr.lazy.routes.t4-script but do not save the result
  - copy generated html and typescript into
    - projects\angular-asp\src\app\app.component.html
    - projects\angular-asp\src\app\app-routing.module.ts
open both files
- projects\angular-phonebook\webpack.config.js
- projects\angular-asp\webpack.config.js
modify sharedMappings-array as follows:

  sharedMappings: ['common-modules', 'common-interfaces', 'common-services', 'common-formatters', 'common-components', 'common-auth', 'asp-interfaces', 'asp-services', 'asp-sforms', 'asp-updforms', 'asp-lforms', 'asp-lforms-ftr']

Feature Use case 2

create the projects\angular-asp\src\app\components\asp-rlforms-ftr01-folder
From inside Visual Studio 2022
- right click projects\angular-asp\src\app\components\asp-rlforms-ftr01. (It's the folder of the angular-asp-application)
- run FeatureScripts Wizard
- create the feature
  - Dbcontext is aspnetchckdbcontext
  - Feature name is AspRlFeature01
  - Add to feature:
    - aspnetuserView/01920-Rlist.component.ts
Run the 30170-.ftr.lazy.routes.ts/ftr.lazy.routes.t4-script for both
- projects\angular-asp\src\app
- projects\angular-phonebook\src\app
Please compare the code of route:

//
// for angular-asp
//
{  path: 'asprlfeature01', 
loadChildren: () => import('./components/asp-rlforms-ftr01/asp-rl-feature01.ftr.lazy.routing.module').then(m => m.AspRlFeature01FtrLazyRoutingModule), 
data: { vn: 'AspRlFeature01FtrComponent', va: 'l'} }, 

//
// for angular-phonebook
//
  {  path: 'asprlfeature01', 
  loadChildren: () => loadRemoteModule({type: 'manifest', remoteName: 'AngularAsp', exposedModule: './projects/angular-asp/src/app/components/asp-rlforms-ftr01/asp-rl-feature01.ftr.lazy.routing.module'}).then(m => m.AspRlFeature01FtrLazyRoutingModule), 
  data: { vn: 'AspRlFeature01FtrComponent', va: 'l'} },

Feature Use case 3

create the library

ng generate library asp-rlforms-ftr

delete the files in the projects\asp-rlforms-ftr\src\lib-folder
delete content in the projects\asp-rlforms-ftr\src\public-api.ts-file
From inside Visual Studio 2022
- right click projects\asp-rlforms-ftr\src\lib.
- run FeatureScripts Wizard
- create the feature
  - Dbcontext is aspnetchckdbcontext
  - Feature name is AspUserRlistFeature
  - Add to feature:
    - aspnetuserView/01920-Rlist.component.ts
Open the projects\asp-rlforms-ftr\src\lib\asp-user-rlist-feature.ftr.routing.module.ts-file
- here is a fragment

    { path: 'aspnetuserView/aspnetuserrolesView/:hf2/ViewaspnetuserrolesView/:hf3/:id3', 
        loadChildren: () => loadRemoteModule({type: 'manifest', remoteName: 'AngularAsp', exposedModule: './projects/angular-asp/src/app/components/aspnetuserroles-view/aspnetuserroles-view-rv-lazy.routing.module'}).then(m => m.AspnetuserrolesViewRvLazyRoutingModule),
        data: { vn: 'aspnetuserrolesView', va: 'v', /* sf: true,  title: 'View User Role', */ hf: 'hf3',  id: 'id3', dp: 3}},

    { path: 'aspnetuserView/aspnetuserrolesView/:hf2/AddaspnetuserrolesView/:hf3', 
        loadChildren: () => loadRemoteModule({type: 'manifest', remoteName: 'AngularAsp', exposedModule: './projects/angular-asp/src/app/components/aspnetuserroles-view/aspnetuserroles-view-ra-lazy.routing.module'}).then(m => m.AspnetuserrolesViewRaLazyRoutingModule),
        data: { vn: 'aspnetuserrolesView', va: 'a', /* sf: true,  title: 'Add User Role', */ hf: 'hf3',  dp: 3}},

with loadRemoteModule(...) it can not be used by AngularAsp-application
Of course,
- we can run the 30170-.ftr.lazy.routes.ts/ftr.lazy.routes.t4-script for
  - projects\angular-asp\src\app
- we can launch 'AngularAsp'-application
  - we can try to navigate to AspUserRlistFeature, but exception will be thrown

core.mjs:7635 ERROR Error: Uncaught (in promise): Error: Manifest does not contain AngularAsp
Error: Manifest does not contain AngularAsp
    at angular-architects-module-federation-runtime.mjs:80:19
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at asyncToGenerator.js:32:1
    at new ZoneAwarePromise (zone.js:1429:21)
    at asyncToGenerator.js:21:1
    at loadRemoteModule (angular-architects-module-federation-runtime.mjs:69:32)
    at loadChildren (asp-user-rlist-feature.ftr.routing.module.ts:88:45)
    at RouterConfigLoader.loadModuleFactoryOrRoutes (router.mjs:4552:35)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26218:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:21)
    at invokeTask (zone.js:1661:18)

Run the 30170-.ftr.lazy.routes.ts/ftr.lazy.routes.t4-script for
- projects\angular-phonebook\src\app
modify
- projects\angular-phonebook\src\app\app.component.html
- projects\angular-phonebook\src\app\app-routing.module.ts
Launch both app,
- navigation works for angular-phonebook and AspUserRlistFeature.

300 Micro frontend support - chempkovsky/CS82ANGULAR GitHub Wiki

Steps required to accomplish the task

Steps required to accomplish the task

Reading

What we are going to create

Created angular projects on github

Create Angular Repository

AngularPhonebook app

Create AngularPhonebook app

Create common modules library

Create common interfaces library

Create common services library

Create common formatters library

Create common components library

Create common auth library

Run AssetsFolderData script

Run appCompAndModule script

Localize note

run app

Create phonebook interfaces library

Create phonebook services library

Create phonebook scforms library

Create phonebook updforms library

Create phonebook lforms library

Create phonebook rlforms library

Create phonebook rdlforms library

Generate routes for AngularPhonebook app

AngularPhonebook application launch

AngularAsp app

Create AngularAsp app

Shared libs

Run AssetsFolderData script for AngularAsp

Run appCompAndModule script for AngularAsp

Add module federation support for AngularAsp

Create asp interfaces library

Create asp services library

Create asp sforms library

Create asp updforms library

Generate navigation aware components

Try to launch Angular App app

Generate routes for AngularAsp app

AngularAsp application launch

Add module-federation support for AngularPhonebook

Modify webpack config js

Generate additional routes for AngularPhonebook app

Modify global service

module federation applications launch

Features

Feature Use case 1

Feature Library of the module federation shell application

Feature Library of the module federation remote application

Feature Use case 2

Feature Use case 3

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️