Web Module Properties
The Web Module folders are separate logical units in the Web Client application. You can create an independent Web Module per folder so that you can load these modules on demand.
When you right-click on a folder under Program repository, a short-cut menu opens. Select Properties (Alt + Enter) option to open the Web Module properties dialog box, which contains the following properties:
|
|
|
|
Is Web Module?
|
When this field is checked, an independent Web Module is created for that particular folder.
|
|
Name
|
It is the name of the folder as long as 30 characters. It is unique within a Web Client project and is populated with Folder name.
|
|
Load on Demand
|
When this field is checked, the Web Module folder is created on demand. The programs inside this module need to be called through Routing. The execution of an individual program inside the module is not possible.
|
When you create a Web Module for a desired folder, the following two files are created in the folder <project_name>\src\app\magic\<folder_name>:
-
component-list.g.ts
-
magic.gen.lib.module.ts
When you set Load on Demand, in addition to above two files, the following file is created:
Since version: 4.5
Support for Calling an Overlay Window Present in a Web Module Marked as Load on Demand
You can call an Overlay window present inside a Web module, when the Web module marked as 'Load on Demand' is loaded.
If you have any projects generated in Magic xpa versions prior to 4.5a, you need to perform the following steps. For new projects generated in 4.5a, these steps are not required as the generation process handles them.
To use this feature in a generated Web Client application, you need to update it by following:
1. Update all files named magic.gen.lib.module.ts.
2. Add import for NgModuleRef from @angular/core.
3. Add the following parameter to the constructor: private moduleRef: NgModuleRef<any>.
4. Add the moduleRef to parameter of method componentList.addComponents (magicGenCmpsHash, moduleRef).
Please refer the following changes marked in Blue:
|
import {NgModule, NgModuleRef} from '@angular/core';
.
.
} from "@angular/material";
@NgModule({
declarations: [
...magicGenComponents
],
exports : [
...magicGenComponents,
MagicModule
],
imports: [
// Angular Modules
CommonModule,
ReactiveFormsModule,
RouterModule,
// Magic Modules
MagicModule,
DynamicModule.withComponents(magicGenComponents),
InfiniteScrollModule,
// Material Modules
MatTableModule,
MatPaginatorModule,
.
.
],
providers: [ExitMagicService],
})
export class MagicLoadOnDemand1Module {
constructor(componentList: ComponentListMagicService, private moduleRef: NgModuleRef<any>) {
componentList.addComponents(magicGenCmpsHash, moduleRef);
componentList.title = title;
}
}
|
Since version: 4.5a
Understanding Web Modules
