012.1 Auxiliary Angular Typescript Classes Material UI - chempkovsky/CS82ANGULAR GitHub Wiki

Notes

Steps required to accomplish the task for Monolithic App

Steps required to accomplish the task for Micro-frontend App

Notes

  • Before creating angular typescript classes for the very first View, all auxiliary interfaces, services, components and modules must be in place and ready for use.
  • It’s time to note that the order of generated classes is extremely important. For instance, @Component() references “html” and “css” files. So, “html” and “css” must be generated first.
  • The second point relates to script types. All scripts are divided into two large sets:
    • The first one consists of the context level scripts. These scripts are used to generate interfaces, classes, services that are used across the Views and application level components.
    • The second set consists of the View level scripts. They are scripts that are used to generate the code for the given view. For instance, Edit form for one View is not applicable for another one because of captions, validations and so on.
  • These two large sets are organized as follows:
    • Scripts with a range of 00000-00999 are context level scripts.
    • Scripts with a range of 01000-99999 are view level scripts

Steps required to accomplish the task for Monolithic App

00000 ContextLevelBatch

00000 Run JavaScripts Wizard
  • To Generate Typescript files
    • Run Visual Studio and Open “PhonebookSolution” solution
    • Right Click “app”-folder of the “src”-project that was created by “Add/Existing Web Site”-command.
Click to show the picture

project structure

00000 First page of the Wizard

  • On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be created. Click Next-button.
Click to show the picture

project structure

00000 Second page of the Wizard

  • On the second page of the Wizard we select DbContext that will be used to choose the entity for the View. Select PhBkContext.csproj and the PhBkContext class using the drop-down lists. Click Next-button.
Click to show the picture

project structure

00000 Third page of the Wizard

  • On the third page of the Wizard
      1. select ==Context==
      1. if to generate localized typescript code-CheckBox using Angular i18n
  • Click Next-button
Click to show the picture

project structure

00000 Fourth page of the Wizard

  • On the Fourth page of the Wizard click Batch processing-button.
Click to show the picture

project structure

00000 Batch Action Dialog

  • On the Batch Action Dialog of the Wizard
    • choose 00000-ContextLevelBatch.json-batch script
    • click Start-button.
Click to show the picture

project structure

  • After 00000-ContextLevelBatch.json-script completed
    • Close Batch Action Dialog
    • Close Wizard form

00010 AssetsFolderData

00010 Run JavaScripts Wizard
  • To Generate Typescript files
    • Run Visual Studio and Open “PhonebookSolution” solution
    • Right Click “src”-project that was created by “Add/Existing Web Site”-command.
Click to show the picture

project structure

00010 First page of the Wizard

  • On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be created. Click Next-button.
Click to show the picture

project structure

00010 Second page of the Wizard

00010 Third page of the Wizard

00010 Fourth page of the Wizard

00010 Batch Action Dialog

  • On the Batch Action Dialog of the Wizard
    • choose 00010-AssetsFolderData.json-batch script
    • click Start-button.
Click to show the picture

project structure

  • After 00010-AssetsFolderData.json-script completed
    • Close Batch Action Dialog
    • Close Wizard form

00200-AppGlblAuth

00200 Run JavaScripts Wizard

00200 First page of the Wizard

00200 Second page of the Wizard

00200 Third page of the Wizard

00200 Fourth page of the Wizard

00200 Batch Action Dialog

  • On the Batch Action Dialog of the Wizard
    • choose 00200-app-glbl-auth.json-batch script
    • click Start-button.
Click to show the picture

project structure

  • After 00200-app-glbl-auth.json-script completed
    • Close Batch Action Dialog
    • Close Wizard form

00230 appCompAndModule

00230 Run JavaScripts Wizard

00230 First page of the Wizard

00230 Second page of the Wizard

00230 Third page of the Wizard

00230 Fourth page of the Wizard

00230 Batch Action Dialog

  • On the Batch Action Dialog of the Wizard
    • choose 00230-appCompAndModule.json-batch script
    • click Start-button.
Click to show the picture

project structure

  • After 00230-appCompAndModule.json-script completed
    • Close Batch Action Dialog
    • Close Wizard form

Steps required to accomplish the task for Micro frontend App

00001 ContextLevelMonoCommonModulesBatch

Generate common-modules library

  • run the command:
ng generate library common-modules
  • remove all files in 'src\lib'-folder
  • remove all lines in the src\lib\public-api.ts-file

run 00001-ContextLevelMonoCommonModulesBatch.json

  • right click 'src\lib'-folder of the common-modules-library
  • Run JavaScripts Wizard
  • On the third page of the Wizard
      1. select ==Context==
      1. if to generate localized typescript code-CheckBox using Angular i18n
  • Click Next-button
  • On the Fourth page of the Wizard click Batch processing-button.
  • On the Batch Action Dialog of the Wizard
    • choose 00001-ContextLevelMonoCommonModulesBatch.json-batch script
    • click Start-button.
  • add a line of code to the file src\lib\public-api.ts at the beginning of the file
import '@angular/localize/init';

build common-modules library

  • run the command
ng build --project=common-modules
  • here is a response
PS E:\Development\PhonebookSolution\AngularMatPhonebookSolution> ng build --project=common-modules
Building Angular Package

------------------------------------------------------------------------------
Building entry point 'common-modules'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy partial compilation mode.
✔ Generating FESM2020
✔ Generating FESM2015
✔ Copying assets
✔ Writing package manifest
✔ Built common-modules

------------------------------------------------------------------------------
Built Angular Package
 - from: E:\Development\PhonebookSolution\AngularMatPhonebookSolution\projects\common-modules
 - to:   E:\Development\PhonebookSolution\AngularMatPhonebookSolution\dist\common-modules
------------------------------------------------------------------------------

Build at: 2022-11-09T08:42:33.570Z - Time: 10882ms

00002 ContextLevelMonoCommonInterfacesBatch

  • repeat the steps described for common-modules library
    • the library name: common-interfaces
    • the batch file: 00002-ContextLevelMonoCommonInterfacesBatch.json

00003 ContextLevelMonoCommonServicesBatch

  • repeat the steps described for common-modules library
    • the library name: common-services
    • the batch file: 00003-ContextLevelMonoCommonServicesBatch.json

00004 ContextLevelMonoCommonFormattersBatch

  • repeat the steps described for common-modules library
    • the library name: common-formatters
    • the batch file: 00004-ContextLevelMonoCommonFormattersBatch.json

00005 ContextLevelMonoCommonComponentsBatch

  • repeat the steps described for common-modules library
    • the library name: common-components
    • the batch file: 00005-ContextLevelMonoCommonComponentsBatch.json

00201 ContextLevelMonoCommonAuth

  • repeat the steps described for common-modules library
    • the library name: common-auth
    • the batch file: 00201-ContextLevelMonoCommonAuth.json

00231 ContextLevelMonoAppCompAndModule

  • right click src\app-folder of the AngularPhonebook-app
  • Run JavaScripts Wizard
  • On the third page of the Wizard
      1. select ==Context==
      1. if to generate localized typescript code-CheckBox using Angular i18n
  • Click Next-button
  • On the Fourth page of the Wizard click Batch processing-button.
  • On the Batch Action Dialog of the Wizard
    • choose 00231-ContextLevelMonoAppCompAndModule.json-batch script
    • click Start-button.

00010 AssetsFolderData

  • right click src-folder of the AngularPhonebook-app
  • Run JavaScripts Wizard
  • On the third page of the Wizard
      1. select ==Context==
      1. if to generate localized typescript code-CheckBox using Angular i18n
  • Click Next-button
  • On the Fourth page of the Wizard click Batch processing-button.
  • On the Batch Action Dialog of the Wizard
    • choose 00010-AssetsFolderData.json-batch script
    • click Start-button.

run AngularPhonebook

  • run the command
ng serve -o --project=AngularPhonebook

Naming note

  • instead of the names common-modules, common-interfaces,..., common-auth you can use any valid names you like
⚠️ **GitHub.com Fallback** ⚠️