🆖 Angular Dynamic Compile - Convert strings to Angular components v2020.10.165
Bugs are evident™ - MATRIX️
NodeJs LTS Version Requirement
>=12.13.0
Built on NodeJs
v14.15.3
The async
and await
keywords are required. Only the latest LTS variant is supported.
Install NodeJs: https://nodejs.org/en/download/package-manager/
Built on Angular
11.0.5
Description
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": []
}
}
}
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
Errors
Type x is part of the declarations of 2 modules
Basically, you need a shared component.
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
.
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 v2020.10.165