p3x-angular-compile

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

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-typescipt-loader together. A miracle!

Example here: More info about AOT + JIT

Help

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>

Options

The templates are cached.

export interface CompileOptions {
    template: string;
    container: ViewContainerRef;
    imports?: any[];
    context?: any,
    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.0.210-507 on 4/25/2017, 8:46:53 AM

by Patrik Laszlo