Use case 

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

Install 

npm install --save p3x-angular-compile lodash @types/lodash
# or
yarn add p3x-angular-compile lodash @types/lodash

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 Ivy is disabled and allow synthetic default imports in the tsconfig.json:

"compilerOptions": {
   "allowSyntheticDefaultImports": true
},
"angularCompilerOptions": {
  "enableIvy": false
}

Make sure AOT is disabled and allow lodash CommonJs 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",

            "aot-info": "make sure it is false",
            "aot": false,

            "allowedCommonJsDependencies-info": "allow lodash common js dependencies",
            "allowedCommonJsDependencies": ["lodash"],

            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
    }
}

When you work with P3X Angular Compile, you have to disable AOT as well, so like this:

ng serve --aot=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.