p3x-angular-compile

Angular Dynamic Compile service and directive

This is an open source project. Just code.

Node Version Requirement

>=7.8.0 

Built on Node

v8.4.0

The async and await keywords are required.

Install NodeJs:
https://nodejs.org/en/download/package-manager/

Description

Use case

Dynamic compile components by a string template for Angular. You can provide a context, that you can use with anything (for clicking for free etc..)

NPM & Version

It is a CommonJS bundle. The version reflects the Angular version (AngularMajor.AngularMinor.Build-Commit).

Install

npm install --save p3x-angular-compile
# or
yarn add p3x-angular-compile

AOT + JIT

It is not working out of the box (the default is either JIT or AOT, not both), but the apps become 10 folds faster. The @ngtools/webpack is AOT and the awesome-typescript-loader is JIT only.

The solution can be architect with the @angular/compiler and the awesome-typescript-loader together. A miracle!

Example here: More info about AOT + JIT

Size

If you want very small bundle, use gzip.

Usage

// the module settings
@NgModule({
    imports: [
        // multiple directives in a shared module like this
        CorifeusWebMaterialModule,
        
        CompileModule.forRoot({
            module: {
                schemas: [CUSTOM_ELEMENTS_SCHEMA],
                declarations: [MyDynamicElement ],
                // though you are better a shared component like
                imports: [
                    CorifeusWebMaterialModule
                ]
                
            }
        })
    ],
    declarations: [
        Page,
    ],
    providers: [
    ],
    bootstrap: [ Page ]
})
export class Module { };

 <div *ngIf="true" [p3x-compile]="data" [p3x-compile-ctx]="this"></div>

// a page example
export class Page {

    data: string = "<div (click)="context.alert()">It is working</div>";

    alert() {
        alert('ok');
    }
}

Actual used dynamic compiler

I use a dynamic Markdown page with p3x-angular-compile: Module , Example page

Service

Please refer to use an a service

Options

Reference for the Angular module settings.

The templates are cached.

export interface CompileOptions {   
    // cached by template
    template: string;
    container: ViewContainerRef;
    context?: any,
    
    // you can customize here any you want to
    // CommonModule, BrowserModule are auto added 
    // (like *ngIf and angular default directives)
    // though CompileModule.forRoot is usually enough
    // so you do not need to use it
    module?: NgModule;
    
    onCompiled?: Function,
    onError?: Function;

}

Deployed example

Corifeus Pages (JIT + AOT at once)

https://github.com/patrikx3/corifeus-app-web-pages/blob/master/src/angular/modules/cory-page.ts

Dev environment end test

npm install -g yarn
git clone https://github.com/patrikx3/angular-compile.git
cd angular-compile
yarn install
grunt run|default

http://localhost:8080

Errors

Type x is part of the declarations of 2 modules

Basically, you need a shared component.

https://stackoverflow.com/questions/42993580/angular-2-type-childcomponent-is-a-part-of-the-declarations-of-2-modules-par

P3X-ANGULAR-COMPILE Build v4.3.42-93

Corifeus by Patrik Laszlo