p3x-angular-compile

Angular Dynamic Compile service and directive

Issues / Support

This is an open source project. Time is a precious thing, so I have rarely time to give support and fix issues for someone else. I fix a bug, when I have an error that I need. If you got an issue, error or bug, I hope someone will have time to do it for you, otherwise, you are on your own.

Though, if I know the solution, I will tell you. Besides, core errors will be fixed by me.

If you want to extend, fix bugs or add in new features, I promptly merge pull requests or you can become a patrikx3 member.

Node Version Requirement

>=7.8.0 

Built on Node

v7.10.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..)

The old angular-compile-html.

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

HTML

 <div #container></div>
 <div   [p3x-compile]="string" 
        [p3x-compile-ctx]="youGetAContextToDoWithItAnything"
        [p3x-compile-imports]="importsLikeMaterialEtcArray">        
</div>

Custom module

If you wish to customize the dynamic compilation:

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

export class Page {

    data: string = "<div>It is working</div>";

    module: NgModule= {
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }

    context: Page;
    
    constructor() {
      this.context = this;
    }    
}

Options

The templates are cached.

Reference for module settings:
https://github.com/angular/angular/blob/master/packages/core/src/metadata/ng_module.ts

export interface CompileOptions {
    
    // cached by template
    template: string;
    container: ViewContainerRef;
    context?: any,
    
    // either imports or modules, don't use both
    // modules overrides imports
    imports?: Array<Type<any> | ModuleWithProviders | any[]>;
    
    // you can customize here any you want to
    // CommonModule, BrowserModule are auto added 
    // (like *ngIf and angular default directives)
    module?: NgModule;
    
    onCompiled?: Function,
    onError?: Function;

}

Example

Check out the example, here test/angular-webpack/angular/page.ts.

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

---

P3X-ANGULAR-COMPILE Build v4.1.347-37

Corifeus by Patrik Laszlo