300 Micro frontend support - chempkovsky/CS82ANGULAR GitHub Wiki
- 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-sforms 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
- Features
- 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
- 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.
-
AngularPhonebook for DbContext=PhbkDbContext. It will play the of Module Federation Shell.
- You can get already created angular projects github
- run windows terminal, cd the drive and folder you like
- our choice was
E:\Development\PhonebookSolution\
- our choice was
- 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
- the
ng generate application AngularPhonebook
-command is not enough - please read the Paragraph with instructions
- run windows terminal, cd the folder of the mono-repo project.
- In our case, we have
E:\Development\PhonebookSolution\AngularMatPhonebookSolution
- In our case, we have
- 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
(or00001-ContextLevelMonoCommonModulesBatch.kendo.json
)
-
- Note: The script generates the code and modifies 'projects/common-modules/src/public-api.ts'-file
- From inside Visual Studio 2022
- 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
(or00002-ContextLevelMonoCommonInterfacesBatch.kendo.json
)
-
- 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
(or00003-ContextLevelMonoCommonServicesBatch.kendo.json
)
-
- 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
(or00004-ContextLevelMonoCommonFormattersBatch.kendo.json
)
-
- 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
(or00005-ContextLevelMonoCommonComponentsBatch.kendo.json
)
-
- 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
(or00201-ContextLevelMonoCommonAuth.kendo.json
)
-
- 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
- From inside Visual Studio 2022
- 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
(or00231-ContextLevelMonoAppCompAndModule.kendo.json
)
-
- From inside Visual Studio 2022
- Open
projects/AngularPhonebook/src/polyfills.ts
-file - Make sure
import 'zone.js';
is before theimport '@angular/localize/init'
, i.e. the correct code is as follows:
import 'zone.js'; // Included with Angular CLI.
import '@angular/localize/init';
- run the command
ng serve --project=AngularPhonebook -o
- make sure, navigation works to login, logout, ..., home.
- 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
- right click
-
repeat the steps with
-
lpd-emp-first-name
,lpd-emp-first-name-view
and01101-MonoInterfaces.json
-
lpd-emp-last-name
,lpd-emp-last-name-view
and01101-MonoInterfaces.json
-
lpd-emp-second-name
,lpd-emp-second-name-view
and01101-MonoInterfaces.json
-
lpd-phone
,lpd-phone-view
and01101-MonoInterfaces.json
-
lpr-division01
,lpr-division01-view
and01101-MonoInterfaces.json
-
lpr-division02
,lpr-division02-view
and01101-MonoInterfaces.json
-
lpr-employee01
,lpr-employee01-view
and01101-MonoInterfaces.json
-
lpr-employee02
,lpr-employee02-view
and01101-MonoInterfaces.json
-
lpr-phone01
,lpr-phone01-view
and01101-MonoInterfaces.json
-
lpr-phone02
,lpr-phone02-view
and01101-MonoInterfaces.json
-
lpr-phone03
,lpr-phone03-view
and01101-MonoInterfaces.json
-
lpr-phone04
,lpr-phone04-view
and01101-MonoInterfaces.json
-
phbk-division
,phbk-division-view
and01101-MonoInterfaces.json
-
phbk-employee
,phbk-employee-view
and01101-MonoInterfaces.json
-
phbk-enterprise
,phbk-enterprise-view
and01101-MonoInterfaces.json
-
phbk-phone
,phbk-phone-view
and01101-MonoInterfaces.json
-
phbk-phone-type
,phbk-phone-type-view
and01101-MonoInterfaces.json
-
-
run the command
ng build --project=phonebook-interfaces
- run the command
ng generate library phonebook-services
- Repeat the steps described for
phonebook-interfaces
-library, but run the script01401-MonoWebApiService.json
- 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)
- right click
- repeat the steps with
-
phbk-employee
,phbk-employee-view
and01421-MonoSForm.json
(or 01421-MonoSForm.kendo.json) -
phbk-enterprise
,phbk-enterprise-view
and01421-MonoSForm.json
(or 01421-MonoSForm.kendo.json) -
phbk-phone
,phbk-phone-view
and01421-MonoSForm.json
(or 01421-MonoSForm.kendo.json) -
phbk-phone-type
,phbk-phone-type-view
and01421-MonoSForm.json
(or 01421-MonoSForm.kendo.json)
-
- 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
)
-
- 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)
-
- run the command
ng generate library phonebook-rlforms
- Repeat the steps described for
phonebook-sforms
-library, but run the scripts:-
01961-MonoRv.json
(or01961-MonoRv.kendo.json
) -
01963-MonoRa.json
(or01963-MonoRa.kendo.json
) -
01965-MonoRu.json
(or01965-MonoRu.kendo.json
) -
01967-MonoRd.json
(or01967-MonoRd.kendo.json
) -
01969-MonoRl.json
(or01969-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
- run the command
ng generate library phonebook-rdlforms
- Repeat the steps described for
phonebook-sforms
-library, but run the scripts:-
02021-MonoRdl.json
(or02021-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
-
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 theprojects/angular-phonebook/src/app/app-routing.module.ts
- read the instruction at the beginning of the generated code
- here is an example:
- do not save the file but copy generated code and paste into
- right click
//
// 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.
- 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
- the
ng generate application AngularAsp
-command is not enough - please read the Paragraph with instructions
- 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'
- Open 'PhBkContext.PhBkContext.csproj.PhBkContext.PhBk.PhbkDbContext.json' and copy
- Instead
- repeat the steps described in the paragraph. Please use
aspnetchckdbcontext
-Dbcontext.
- repeat the steps described in the paragraph. Please use
aspnetchckdbcontext
-Dbcontext.
- run the command:
ng add @angular-architects/module-federation --project AngularAsp --port 4201 --type remote
- 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
- run the command
ng generate library asp-services
- Repeat the steps described for
asp-interfaces
-library, but run the script02141-MonoAspNetAllWebApiServicesBatch.json
- run the command
ng generate library asp-sforms
- Repeat the steps described for
asp-interfaces
-library, but run the script-
02142-MonoAspNetAllSFormsBatch.json
(or02142-MonoAspNetAllSFormsBatch.kendo.json
)
-
- run the command
ng generate library asp-updforms
- Repeat the steps described for
asp-interfaces
-library, but run the scripts-
02143-MonoAspNetAllVformsBatch.json
(or02143-MonoAspNetAllVformsBatch.kendo.json
) -
02144-MonoAspNetAllAformsBatch.json
(or02144-MonoAspNetAllAformsBatch.kendo.json
) -
02145-MonoAspNetAllUformsBatch.json
(or02145-MonoAspNetAllUformsBatch.kendo.json
) -
02146-MonoAspNetAllDformsBatch.json
(or02146-MonoAspNetAllDformsBatch.kendo.json
)
-
- 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
(or02147-MonoAspNetAllRvBatch.kendo.json
) -
02148-MonoAspNetAllRaBatch.json
(or02148-MonoAspNetAllRaBatch.kendo.json
) -
02149-MonoAspNetAllRuBatch.json
(or02149-MonoAspNetAllRuBatch.kendo.json
) -
02150-MonoAspNetAllRdBatch.json
(or02150-MonoAspNetAllRdBatch.kendo.json
) -
02151-MonoAspNetAllRlBatch.json
(or02151-MonoAspNetAllRlBatch.kendo.json
) -
02152-MonoAspNetAllRdlBatch.json
(or02152-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.
-
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 insideexposes: { ... }
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
-
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 - ...
- From inside Visual Studio 2022
-
generate routes for
- aspnetmodelView
- aspnetroleView
- aspnetuserView
-
run the command again
ng serve --project=AngularAsp -o
- our app starts without errors
- read the article 015 Preparing projects for application launch
- 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"
}
- 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'],
});
- 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
- 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
- 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
- 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
-
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)
- Generate the library
ng generate library phonebook-features
- Clear
src/lib
folder of the library- remove all files in the
src/lib
-folder of thephonebook-features
-library
- remove all files in the
- 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
folderphonebook-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
- right click
- From inside Visual Studio 2022
- right click
projects\angular-phonebook\src\app
. (It's anapp
folder of theangular-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
- copy generated html and typescript below into
- right click
- 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 createRdListsFeature
-feature forPhbkEnterpriseView/02020-Rdlist.component.ts
- for the
phonebook-rlforms-ftrs
-subfolder createRListsFeature
-feature forPhbkEnterpriseView/02020-Rdlist.component.ts
- for the
- 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
- use
-
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
- Library name is
-
From inside Visual Studio 2022
- right click
projects\angular-phonebook\src\app
. (It's anapp
folder of theangular-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
- copy generated html and typescript into
- right click
-
From inside Visual Studio 2022
- right click
projects\angular-asp\src\app
. (It's anapp
folder of theangular-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
- copy generated html and typescript into
- right click
-
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']
-
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 theangular-asp
-application) - run
FeatureScripts Wizard
- create the feature
- Dbcontext is
aspnetchckdbcontext
- Feature name is
AspRlFeature01
- Add to feature:
aspnetuserView/01920-Rlist.component.ts
- Dbcontext is
- right click
-
Run the
30170-.ftr.lazy.routes.ts/ftr.lazy.routes.t4
-script for bothprojects\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'} },
- 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
- Dbcontext is
- right click
-
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 byAngularAsp
-application -
Of course,
- we can run the
30170-.ftr.lazy.routes.ts/ftr.lazy.routes.t4
-script forprojects\angular-asp\src\app
- we can launch 'AngularAsp'-application
- we can try to navigate to
AspUserRlistFeature
, but exception will be thrown
- we can try to navigate to
- we can run the
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 forprojects\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
andAspUserRlistFeature
.
- navigation works for