012.1 Auxiliary Angular Typescript Classes Material UI - chempkovsky/CS82ANGULAR GitHub Wiki
- 00001-ContextLevelMonoCommonModulesBatch
- 00002-ContextLevelMonoCommonInterfacesBatch
- 00003 ContextLevelMonoCommonServicesBatch
- 00004 ContextLevelMonoCommonFormattersBatch
- 00005 ContextLevelMonoCommonComponentsBatch
- 00201 ContextLevelMonoCommonAuth
- 00231 ContextLevelMonoAppCompAndModule
- 00010 AssetsFolderData
- run AngularPhonebook
- Naming note
- 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
- 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
- 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
- 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
- On the third page of the Wizard
-
- select ==Context==
-
- if to
generate localized typescript code
-CheckBox usingAngular i18n
- if to
-
- Click
Next
-button
Click to show the picture
- On the Fourth page of the Wizard click
Batch processing
-button.
Click to show the picture
- On the
Batch Action Dialog
of the Wizard- choose
00000-ContextLevelBatch.json
-batch script - click
Start
-button.
- choose
Click to show the picture
- After
00000-ContextLevelBatch.json
-script completed- Close
Batch Action Dialog
- Close Wizard form
- Close
- 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
- 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
- It repeats the actions described at 00000 Second page of the Wizard
- It repeats the actions described at 00000 Third page of the Wizard
- It repeats the actions described at 00000 Fourth page of the Wizard
- On the
Batch Action Dialog
of the Wizard- choose
00010-AssetsFolderData.json
-batch script - click
Start
-button.
- choose
Click to show the picture
- After
00010-AssetsFolderData.json
-script completed- Close
Batch Action Dialog
- Close Wizard form
- Close
- It repeats the actions described at 00000 Run JavaScripts Wizard
- It repeats the actions described at 00000 First page of the Wizard
- It repeats the actions described at 00000 Second page of the Wizard
- It repeats the actions described at 00000 Third page of the Wizard
- It repeats the actions described at 00000 Fourth page of the Wizard
- On the
Batch Action Dialog
of the Wizard- choose
00200-app-glbl-auth.json
-batch script - click
Start
-button.
- choose
Click to show the picture
- After
00200-app-glbl-auth.json
-script completed- Close
Batch Action Dialog
- Close Wizard form
- Close
- It repeats the actions described at 00000 Run JavaScripts Wizard
- It repeats the actions described at 00000 First page of the Wizard
- It repeats the actions described at 00000 Second page of the Wizard
- It repeats the actions described at 00000 Third page of the Wizard
- It repeats the actions described at 00000 Fourth page of the Wizard
- On the
Batch Action Dialog
of the Wizard- choose
00230-appCompAndModule.json
-batch script - click
Start
-button.
- choose
Click to show the picture
- After
00230-appCompAndModule.json
-script completed- Close
Batch Action Dialog
- Close Wizard form
- Close
- 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
- right click 'src\lib'-folder of the
common-modules
-library - Run JavaScripts Wizard
- On the third page of the Wizard
-
- select ==Context==
-
- if to
generate localized typescript code
-CheckBox usingAngular i18n
- if to
-
- 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.
- choose
- add a line of code to the file
src\lib\public-api.ts
at the beginning of the file
import '@angular/localize/init';
- 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
- repeat the steps described for common-modules library
- the library name: common-interfaces
- the batch file: 00002-ContextLevelMonoCommonInterfacesBatch.json
- repeat the steps described for common-modules library
- the library name: common-services
- the batch file: 00003-ContextLevelMonoCommonServicesBatch.json
- repeat the steps described for common-modules library
- the library name: common-formatters
- the batch file: 00004-ContextLevelMonoCommonFormattersBatch.json
- repeat the steps described for common-modules library
- the library name: common-components
- the batch file: 00005-ContextLevelMonoCommonComponentsBatch.json
- repeat the steps described for common-modules library
- the library name: common-auth
- the batch file: 00201-ContextLevelMonoCommonAuth.json
- right click
src\app
-folder of theAngularPhonebook
-app - Run JavaScripts Wizard
- On the third page of the Wizard
-
- select ==Context==
-
- if to
generate localized typescript code
-CheckBox usingAngular i18n
- if to
-
- 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.
- choose
- right click
src
-folder of theAngularPhonebook
-app - Run JavaScripts Wizard
- On the third page of the Wizard
-
- select ==Context==
-
- if to
generate localized typescript code
-CheckBox usingAngular i18n
- if to
-
- 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.
- choose
- run the command
ng serve -o --project=AngularPhonebook
- instead of the names
common-modules
,common-interfaces
,...,common-auth
you can use any valid names you like