Uptime Robot ratio (30 days)      
v2019.4.104
 60

🆖 Angular Dynamic Compile component, that turns a string into a compiled component

Built on Angular v7.2.15

Use case 

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

NPM 

It is a CommonJS bundle by default.

Install 

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

Check out how it works and code 

https://angular-compile.corifeus.com

https://github.com/patrikx3/angular-compile/blob/master/test/angular-webpack/angular/page.ts#L115

Usage 

import { CompileModule} from "p3x-angular-compile"

// the module settings
@NgModule({
    imports: [
        // multiple directives in a shared module like this
        CorifeusWebMaterialModule,

        // usually it is enough
        CompileModule,
    ],
    declarations: [
        Page,
    ],
    providers: [
    ],
    bootstrap: [ Page ]
})
export class Module { };

The template 

 <span 

 <!--- Not required -->
 *ngIf="isEnabled" 

 <!--- Required -->
 [p3x-compile]="template"

 <!--- Required -->
 [p3x-compile-ctx]="this"

 <!--- Not required, if no handler, it throws the error (before, it was swallowing and showing on console.error) -->
 [p3x-compile-error-handler]="handleCompileErrorHandler"

 <!--- Not required -->
 [p3x-compile-module]="dataModule"
 >     
</span>

The code 

// a page example
export class Page {

    isEnabled: boolean = true;

    dataModule : any =  {
        //schemas: [CUSTOM_ELEMENTS_SCHEMA],
        //declarations: [],
        imports: [
            MatButtonModule
        ],
        exports: [       
        ]
    }

    template: string = "<button mat-button mat-raised-button (click)="context.alert()">Dynamic template</button>";

    handleCompileErrorHandler(error: Error) {
        console.error(error)
    }

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

Options 

Reference for the Angular module settings.

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

AOT + JIT 

Since Angular 5.x.x + 

We cannot use AOT + JIT at once.

Info 

https://github.com/angular/angular/issues/20156#issuecomment-341767899

On the issue, you can see:

To reduce the payload, we do not ship the compiler in AOT.

So right now, it is not possible.

Although, there are some hacks, but you are on your own...
https://github.com/angular/angular/issues/20156#issuecomment-468686933

Size 

If you want very small bundle, use gzip.

p3x Logico
onenoteGithub onenoteredis-uiGithub redis-uiangular-compileGithub angular-compilegitlistGithub gitlistramdiskGithub ramdiskfreenomGithub freenomopenwrt-insomniaGithub openwrt-insomniadocker-debian-testing-mongodb-stableGithub docker-debian-testing-mongodb-stableredis-ui-serverGithub redis-ui-servercorifeus-app-web-pagesGithub corifeus-app-web-pagesverdaccio-cliGithub verdaccio-clicorifeusGithub corifeuscorifeus-web-materialGithub corifeus-web-materialgrunt-p3x-expressGithub grunt-p3x-expresshtml-pdfGithub html-pdfsystemd-managerGithub systemd-managercorifeus-app-server-patrikx3Github corifeus-app-server-patrikx3corifeus-builderGithub corifeus-buildercorifeus-builder-angularGithub corifeus-builder-angularcorifeus-serverGithub corifeus-servercorifeus-utilsGithub corifeus-utilscorifeus-webGithub corifeus-webfortune-cookieGithub fortune-cookieredis-ui-materialGithub redis-ui-materialtoolsGithub tools
  Bugs are evident™ - MATRIX
OK