Dynamically compile standard strings to fully functional Angular components. Supports imports, exports, and standard context.
npm install --save p3x-angular-compile lodash @types/lodash
# or
yarn add p3x-angular-compile lodash @types/lodash
https://angular-compile.corifeus.com
https://github.com/patrikx3/angular-compile/blob/master/src/app/app.component.ts
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": []
}
}
}
import { CompileModule} from "p3x-angular-compile"
// the module settings
@NgModule({
imports: [
CorifeusWebMaterialModule, // Optional
CompileModule, // Required
],
declarations: [
Page,
],
providers: [
],
bootstrap: [ Page ]
})
export class Module { };
<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>
// 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');
}
}
Reference for the Angular module settings which are available.
npm install -g yarn
git clone https://github.com/patrikx3/angular-compile.git
cd angular-compile
npm install
npm run start
Basically, you need a shared component.
We cannot use AOT + JIT at once.
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
If you want very small bundle, use gzip
.