LogoLogo
WinForms to WebPowerBuilder to .NETPowerBuilder to Java
  • WebMAP Documentation | Mobilize.Net
  • WinForms
    • Introduction
    • Getting Started
    • Conversion Process
    • Post-Conversion
    • Extend or Modify the Converted Application
      • NoWebMap Forms Winforms
        • How to add a new Form
        • Adding the created form to the migrated App
        • Interacting with the application data
        • Call the custom API
        • Interaction between the no webmap added Form and the WebMap components
      • Adding a component
      • Adding a component dynamically
      • Add a new control model
      • Switching CSS theme
      • Adding new window
      • Conversion Configuration
        • WebMAP configuration file
        • Stub Filter
      • Adding Non-WebMap Angular Forms
      • Adding FrontEnd Handler to a ToolStripMenuItem
      • Changing ToolStripButton icons
      • Adding new items to existing toolbar
      • Adding FrontEnd element properties and JS listeners
      • Adding FrontEnd output handlers
      • Access FrontEnd components
      • Create custom components based on existing WebMap Component
      • Override FrontEnd methods
    • Assessment Mode
    • Errors and Troubleshooting
      • How to resolve broken reference problems with VBUC
    • Portability
    • Glossary
    • Release Notes
    • Internal Demos
    • Known Issues
    • WinForms DCP
  • WebForms
    • Introduction
    • Overview
    • Desktop Compatibility Platform (DCP)
      • Pages and Master Pages
      • GridView and DataList data synchronization
      • HTTP objects
    • Post-Conversion
    • Extend or Modify the Converted Application
      • Adding FrontEnd validator
      • Adding Page
      • Adding MasterPage
    • Designer classes on WebForms Conversion Tool
    • Errors and Troubleshooting
      • How fix Solution when have been added website from filesystem without project file
    • Release Notes
  • PowerBuilder to .Net
    • Introduction
    • Getting Started
      • Conversion Tool
    • Desktop Compatibility Platform (DCP)
      • Data Manager
    • Reports
      • Report Rendering in Modernized Code
      • ReportWatcher Service Configuration
      • Data Manager to RDL Conversion
      • Reporting Service Internals
      • Troubleshooting
  • PowerBuilder to Java
    • Introduction
    • Getting started
    • Post-Conversion
      • Setup PBJava Environment
      • Architecture
      • App Start
    • Glossary
    • Errors
    • Glossary
    • FAQ
      • How to create a new Control
      • How to create a new Screen
      • What is the Mobilize.WebMAP.CoreServices.All?
      • What is the DesignerAttribute?
      • What is the InterceptedAttribute?
      • What is the InterceptedAttribute?
      • What is the ObservableAttribute?
      • What is the Mobilize.Weaving.WebMAPExtensions.All?
  • General
    • FrontEnd
      • Documentation
        • Webforms Angular Components
          • Web Components
            • Base Components
              • BaseValidator Component
            • KendoUI Components
              • CompareValidator
              • CustomValidator
              • RegularExpressionValidator
              • RequiredFieldValidator
              • ValidationSummary
          • Directives
          • AJAX Web Components
            • AjaxCalendar
            • AjaxModalPopupExtender
          • Ajax Interaction Services
        • Client Core
          • WebMap's Client Core
        • Angular Client
          • Introduction
          • WebMap Service
          • WebMap Interceptor Service
        • Base Components
          • Introduction
          • Components
            • Container
            • Control
            • ControlContainer
            • FormsContainer
            • Loading
            • Stub
        • Winforms Angular Components
          • Web Components
            • Base Components
              • Control Component
              • Form Container
              • Grid Component
              • Style
            • KendoUI Components
              • AdoDataControl
              • Button
              • C1TrueDBGrid
              • CheckBox
              • CheckedListBox
              • ComboBox
              • ContextMenuStrip
              • DataGridView
              • DataGridViewFlex
              • DateTimePicker
              • FileDialog
              • GroupBox
              • Label
              • ListBox
              • ListView
              • MaskedTextBox
              • MessageBox
              • NumericUpDown
              • Panel
              • PictureBox
              • PrintDialog
              • ProgressBar
              • RadioButton
              • RichTextBox
              • StatusStrip
              • Stup
              • TabControl
              • TabPage
              • TextBox
              • Timer
              • ToolStrip
              • TreeView
              • WebBrowser
              • Window
            • JQuery Web Components
          • WebMap FrontEnd Architecture
          • Migrated Structure
          • Setup
            • Front-End setup and compilation
            • Components Manual
            • Browser Support
            • Unit Test Manual
            • Development Process
            • Setup AOT/JIT Compilation
          • Decorators
            • Server Event
          • Conventions
            • Application Structure and NgModules
            • Coding
            • Components
            • Data Service
            • Directives
            • Lifecycle hooks
            • Names
            • Services
        • PowerBuilder Kendo Components
          • Base Components
            • base-component
            • column-control
            • controlcontainer
          • Data Manager Componets
            • base-data-manager
            • data-manager-control
            • data-manager-control-base
            • dw-checkbox
            • dw-column
            • dw-complexNumericMaskComponent
            • dw-compute
            • dw-date-time-edit-mask
            • dw-dropdowndatawindow
            • dw-edit
            • dw-edit-mask
            • dw-radio-button
            • dw-simple-numeric-edit-mask
            • dw-string-edit-mask
            • dw-time-edit-mask
          • Window Components
            • basemask
            • graphics
            • w-checkbox
            • w-command-button
            • w-complex-numeric-mask
            • w-date-time-edit-mask
            • w-dropdownlistbox
            • w-group-box
            • w-line
            • w-listbox
            • w-maskedtextbox
            • w-mdiclient
            • w-menu
            • w-multiline
            • w-picture
            • w-picture
            • w-radiobutton
            • w-rectangle
            • w-simple-numeric-edit-mask
            • w-single-line-edit
            • w-statictext
            • w-string-edit-mask
            • w-time-edit-mask
            • w-toolbar
            • w-toolbaritem
            • w-user-object
            • w-window
          • Services
            • DmInteractionService
          • DataManagerEvents
          • FocusManager guide
      • Api Documentation
        • WebMap Silverlight
        • WfNetC1Components
        • WebFormsComponents
      • Guides
        • Setup NPM package registry in the workspace
        • How to Setup WebMap Applications To Run Over SubDomains or WebApplications In IIS
        • Deploy several WebMap Apps in the same Server
        • Update to Angular 16
        • Appearance
          • How to change the CSS
          • How to override the style for a component
        • Component maintenance
          • How link WebMap package to the migrated Application
          • How to resolve broken reference problems with VBUC
          • How to test a local WebMap Components package
          • How to add a new component in a migrated application
          • How to update a component
          • Dynamic Control Support
          • How to add new set of component with a different provider
          • How to test your component in the playground
          • Tools
        • WMLogger
          • How to use the WMLogger's instance
          • How to change log's level
          • How to add log tags
        • Integration test
        • Setup WebMap Applications to Run Front-End And Back-End In Separates Sites
          • Setup WebMap Applications To Run Front-End And Back-End In Separates Sites in Production (IIS)
        • Setup Migrated WebMap Applications To Run Front-end & Back-end In Separates Sites (Only development)
        • Initial Set Up
          • Software to Install
          • Necessary Repositories
      • Errors
      • Version Notes
        • Client Core
        • Angular Client
        • Web Base Components
        • Winforms Angular Components
        • PowerBuilder Kendo Components
      • Licenses
        • Client Core
        • Angular Client
        • Base Components
        • PB Kendo Components
        • WFNet Kendo Components
        • WebForms Components
        • WFNet Access Components
        • WFNet Janus Components
        • WFNet C1 Components
        • Silverlight wms-framework
        • Silverlight i-components
    • BackEnd
      • WebMAP From Scratch
      • Setup
      • DCP: Desktop Compatibly Platform
        • Overview
        • Library Bundles
          • Bundle Library
            • Create an Observable Object
          • Bundle DTO
            • DTO: Data Transfer Objects
              • Creating a DTO
            • Mappers
              • Create Mappers
            • Observable Wrappers
              • Create an Observable Wrapper
            • API/Controllers
      • Architecture
      • Weaving on WebMAP
      • Glossary
      • FAQ
        • How to create a new Control
        • How to create a new Screen
        • What is the Mobilize.WebMAP.CoreServices.All?
        • What is the DesignerAttribute?
        • What is the InterceptedAttribute?
        • What is the Mobilize.Extensions.Logging.RollingFile?
        • What is the ObservableAttribute?
        • What is the Mobilize.Weaving.WebMAPExtensions.All?
      • Licenses
        • PBNet DCP
        • WebFormsDCP
        • WFNet DCP
        • CoreServices
        • CoreServicesCommon
    • Request and Response
  • SCALABILITY
    • Introduction
    • Microservices
    • Containerizing a WebMap .Net Application with Docker
    • Vertical scalability
Powered by GitBook
On this page
  • 1) Compiling with NGC instead TSC
  • rootDir
  • outDir
  • files
  • angularCompilerOptions
  • 2) Adding compile instruction to package.json
  • 3) Gulp tasks configuration
  • 4) Create the distribution package
  • Notes

Was this helpful?

  1. General
  2. FrontEnd
  3. Documentation
  4. Winforms Angular Components
  5. Setup

Setup AOT/JIT Compilation

The Angular Ahead-of-Time (AOT) compiler converts the Angular HTML and Typescript code in an efficient JavaScript library, that means that the code is processed in the build phase, before the browser downloads and runs the code as the Just-in-Time (JIT) does. The WebMap 5 WebComponents library is compiled to be compatible with AOT/JIT compilation and some configuration is needed, therefore the following setup guideline has been created to show how the library can be configured:

1) Compiling with NGC instead TSC

To change TSC to NGC a new tsconfig file has to be created, the file is tsconfig-aot.json. This file has a different configuration, the rootDir is pointing to /tmp/src-inlined path, the outDir is pointing to dist folder, the section files is pointing to ./tmp/src-inlined/index.ts and the angularCompilerOptions section is new.

rootDir

It is the root directory where NGC takes the files to compile. In this case the directory is pointing to /tmp/src-inlined that is a temporary path where a copy of source code is created with inline templates (in forward steps we are going to talk about it).

outDir

It is the output directory where NGC writes the compiled files. The dist folder is a common naming convention of NPM for distribution version that has been modified to perform better for users.

files

The files declaration defines which files are going to be included in the compile process. The ./tmp/src-inlined/index.ts is the root file for the entire WinformsComponents library.

angularCompilerOptions

This section defines how the NGC compiles the code, the tsconfig-aot.json has different parameters:

Parameter Name

Value

Description

genDir

"dist"

The output generation directory

debug

false

Production Mode

skipTemplateCodegen

true

NGC does not produce .ngfactory and .ngstyle.js files

skipMetadataEmit

false

NGC produces .metadata.json files

strictMetadataEmit

true

Produce an error if the metadata written for a class would produce an error if used

fullTemplateTypeCheck

true

NGC enables the binding expression validation

strictInjectionParameters

true

NGC reports an error for a parameter supplied whose injection type cannot be determined

2) Adding compile instruction to package.json

In the package.json file a compilation instruction must be added to change the compilation process to NGC with the tsconfig-aot.json, this instruction goes in the scripts section:

"ngcompile": "node_modules/.bin/ngc -p tsconfig-aot.json",

Then some dependencies have to be added:

"node-sass": "^4.9.0",
"gulp-inline-ng2-template": "^4.1.0",

The first one is used to compile SASS and the second one is to create a copy of the current project with the HTML template of each component inline of its compiled JavaScript, this is important because it going to allow both configurations AOT and JIT.

Then the styles and scripts declarations should be cleaned, so every .css or .js referenced by styles or scripts has to be removed as is shown below:

"styles": [
],
"scripts": [
]

Finally at the end of package.json file the definitions for typings and main have to be pointing to dist/index.d.ts and dist/index.js

"typings": "dist/index.d.ts",
"main": "dist/index.js"

3) Gulp tasks configuration

The build task is composed of two compilation process, the AOT/JIT compilation and the usual compilation process and that is why there are two tsconfig.

gulp.task('build', function(done) {
    runSequence(
        'clean_dist',     //Clean the dist folder and tmp folder
        'clean_dev',      //Clean the developer compilation
        'build-aot',      //Compile AOT/JIT
        'compile-typings' //Compile developer mode
    );
});

The AOT/JIT compilation has three processes:

  • Compile SASS to CSS.

function compileSass(path, ext, file, callback) {
    let compiledCss = sass.renderSync({
      file: path,
      outputStyle: 'compressed',
    });
    callback(null, compiledCss.css);
}
  • Inline external HTML and SCSS templates into Angular component files. Note that the gulp-inline-ng2-template package is referenced using inlineTemplates variable. The inline-templates task takes all Typescript, SASS, HTML inside the src folder and creates a temporal copy inside the ./tmp/src-inlined with all the content of the component together in an Angular component file.

const INLINE_TEMPLATES = {
    SRC: './src/**/*.ts',
    DIST: './tmp/src-inlined',
    CONFIG: {
        base: '/src',
        target: 'es6',
        useRelativePaths: true,
        styleProcessor: compileSass
    }
};
gulp.task('inline-templates', () => {
    return gulp.src(INLINE_TEMPLATES.SRC)
        .pipe(inlineTemplates(INLINE_TEMPLATES.CONFIG))
        .pipe(gulp.dest(INLINE_TEMPLATES.DIST));
});
  • Build the dist using NGC. It compiles the ./tmp/src-inlined and outputs the build in dist release folder.

gulp.task('build-aot', ['compile-sass', 'inline-templates'], function(cb) {
    exec('npm run ngcompile', function (err, stdout, stderr) {
        console.log(stdout, stderr);
        cb(err);
    });
});

4) Create the distribution package

Exclude the src and temp folders and the tsconfig.json and tsconfig-aot.json files from .npmignore and include the dist folder.

src
temp
!dist
tsconfig.json
tsconfig-aot.json

Notes

  • The index.ts file must be located inside the src folder.

  • The strictMetadataEmit could produces errors with the static classes, @dynamic instruction can helps in these cases, write the instruction above of the class definition:

// @dynamic
export class RemoveAmpersand {
  static remove(value: string): string {
    return value ? value.replace(/&(.|$)/g, '$1') : value;
  }
}
PreviousDevelopment ProcessNextDecorators

Was this helpful?

Note : More documentation about Angular Compiler Options can be found in:

In the AOT/JIT compilation process errors does not visible in the TSC compilation process could appear. A good guide to resolve AOT/JIT errors can be found here:

https://angular.io/guide/aot-compiler#angular-compiler-options
https://blog.angularindepth.com/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5