Naturally Processed Meals

    p3x-angular-compile

    2022.4.114 • Public • Published

    NPM

    Donate for Corifeus / P3X Contact Corifeus / P3X Corifeus @ Facebook Build Status Uptime Robot ratio (30 days)

    🆖 Angular Dynamic Compile - Convert strings to Angular components v2022.4.114

    Bugs are evident™ - MATRIX️

    NodeJS LTS is supported

    Built on NodeJs version

    v16.14.0
    

    Built on Angular

    13.2.4
    

    Description

    WARNING

    Angular has changed, so it stricts many things for dynamic compilation. The only solution right now, is to simple copy the code into your code and it will work (like on https://angular-compile.corifeus.com/).

    The code you just copy into your project is here:
    https://github.com/patrikx3/angular-compile/tree/master/projects/angular-compile/src/lib

    The package on the NPM is the pure TypeScript code. Not built using Angular.

    Use case

    Dynamically compile standard strings to fully functional Angular components. Supports imports, exports, and standard context.

    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/src/app/app.component.ts

    IMPORTANT

    Make sure AOT is disabled in the angular.json:

    { 
        "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/workspace",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.app.json",
                
                // make sure it is false
                "aot": false,
    
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "src/styles.scss"
                ],
                "scripts": []
              }
        }
    }

    Minimum build requirement arguments

    ng build --aot=false --build-optimizer=false

    Usage

    import { CompileModule} from "p3x-angular-compile"
    
    // the module settings
    @NgModule({
        imports: [
            CorifeusWebMaterialModule, // Optional
            CompileModule, // Required
        ],
        declarations: [
            Page,
        ],
        providers: [
        ],
        bootstrap: [ Page ]
    })
    export class Module { };

    Template

     <span 
     
     <!--- Not required -->
     *ngIf="isEnabled" 
    
     <!--- Required -->
     [p3x-compile]="template"
    
     <!--- Required -->
     [p3x-compile-ctx]="this"
    
     <!--- Not required, will just throw the component's exception if not provided -->
     [p3x-compile-error-handler]="handleCompileErrorHandler"
    
     <!--- Not required -->
     [p3x-compile-module]="dataModule"
     >     
    </span>

    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 which are available.

    Dev environment end test

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

    http://localhost:4200

    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.


    🙏 This is an open-source project. Star this repository, if you like it, or even donate to maintain the servers and the development. Thank you so much!

    Possible, this server, rarely, is down, please, hang on for 15-30 minutes and the server will be back up.

    All my domains (patrikx3.com and corifeus.com) could have minor errors, since I am developing in my free time. However, it is usually stable.

    Note about versioning: Versions are cut in Major.Minor.Patch schema. Major is always the current year. Minor is either 4 (January - June) or 10 (July - December). Patch is incremental by every build. If there is a breaking change, it should be noted in the readme.


    P3X-ANGULAR-COMPILE Build v2022.4.114

    Donate for Corifeus / P3X Contact Corifeus / P3X Like Corifeus @ Facebook

    P3X Sponsor

    IntelliJ - The most intelligent Java IDE

    JetBrains

    Install

    npm i p3x-angular-compile

    DownloadsWeekly Downloads

    75

    Version

    2022.4.114

    License

    MIT

    Unpacked Size

    18 kB

    Total Files

    8

    Last publish

    Collaborators

    • patrikx3