P3X GitList

f46e4d96

[//]: #@corifeus-header

d38ccf81

1b2e74fa

[![NPM](https://nodei.co/npm/p3x-angular-compile.png?downloads=true&downloadRank=true)](https://www.npmjs.com/package/p3x-angular-compile/)

f46e4d96

7b1203af

d38ccf81

[![Donate for Corifeus / P3X](https://img.shields.io/badge/Donate-Corifeus-003087.svg)](https://paypal.me/patrikx3) [![Contact Corifeus / P3X](https://img.shields.io/badge/Contact-P3X-ff9900.svg)](https://www.patrikx3.com/en/front/contact) [![Corifeus @ Facebook](https://img.shields.io/badge/Facebook-Corifeus-3b5998.svg)](https://www.facebook.com/corifeus.software) [![Build Status](https://api.travis-ci.com/patrikx3/angular-compile.svg?branch=master)](https://travis-ci.com/patrikx3/angular-compile)

601cfd53

[![Uptime Robot ratio (30 days)](https://img.shields.io/uptimerobot/ratio/m780749701-41bcade28c1ea8154eda7cca.svg)](https://uptimerobot.patrikx3.com/)

f46e4d96

445edca6

6556210c

# 🆖 Angular Dynamic Compile - Convert strings to Angular components v2020.10.125

d38ccf81

**Bugs are evident™ - MATRIX️**

00816406

ab01b20e

0cfe261b

### NodeJs LTS Version Requirement

d084fed2

```txt

6adde212

>=12.13.0

d38ccf81

```

0cfe261b

### Built on NodeJs

d084fed2

```txt

6556210c

v12.19.0

d38ccf81

```

0cfe261b

The ```async``` and ```await``` keywords are required. Only the latest LTS variant is supported.

f46e4d96

d38ccf81

Install NodeJs: https://nodejs.org/en/download/package-manager/

96b948ec

ab01b20e

# Built on Angular

c85ba1af

```text

6556210c

10.1.5

c85ba1af

```

ab01b20e

d38ccf81

# Description

f46e4d96

bc3279cc

f46e4d96

[//]: #@corifeus-header:end

ff48999f

f46e4d96

# Use case

f17552e2

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

f46e4d96

6bce1733

## NPM

83396ced

63831028

It is an ```ESNEXT``` bundle by default.

83396ced

f46e4d96

## Install ```bash npm install --save p3x-angular-compile # or yarn add p3x-angular-compile ```

6cee87e1

## Check out how it works and code

83396ced

fae8634d

https://angular-compile.corifeus.com

83396ced

fae8634d

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

83396ced

2c4c0f20

## IMPORTANT Make sure Ivy is disabled in the `tsconfig.json`: ```json "angularCompilerOptions": { "enableIvy": false } ```

700e13e0

Make sure AOT is disabled in the `angular.json`: ```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": [] } } } ```

2c4c0f20

When you work with P3X Angular Compile, you have to disable AOT as well, so like this: ```bash ng serve --aot=false ```

f46e4d96

## Usage

2c4c0f20

69db3407

```typescript

3ca7fe02

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

69db3407

// the module settings @NgModule({ imports: [

f17552e2

CorifeusWebMaterialModule, // Optional CompileModule, // Required

69db3407

], declarations: [ Page, ], providers: [ ], bootstrap: [ Page ] }) export class Module { }; ```

92543ad1

f17552e2

#### Template

778d99bf

```html

cbed43df

<span

47109d81

92543ad1

*ngIf="isEnabled"

04a1283e

[p3x-compile]="template"

92543ad1

7d7aeb47

[p3x-compile-ctx]="this"

92543ad1

f17552e2

92543ad1

[p3x-compile-error-handler]="handleCompileErrorHandler"  [p3x-compile-module]="dataModule"

778d99bf

>

cbed43df

</span>

f46e4d96

```

f17552e2

#### Code

69db3407

```typescript

f17552e2

// A page example

69db3407

export class Page {

92543ad1

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

69db3407

04a1283e

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

69db3407

92543ad1

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

69db3407

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

9aa71751

<!--

69db3407

#### Actual used dynamic compiler I use a dynamic Markdown page with ```p3x-angular-compile```: [Module](https://github.com/patrikx3/corifeus-app-web-pages/blob/master/src/angular/module.ts) , [Example page](https://github.com/patrikx3/corifeus-app-web-pages/blob/master/src/angular/modules/cory-page.ts)

c605ea6f

69db3407

#### Service [Please refer to use an a service](https://github.com/patrikx3/angular-compile/blob/master/test/angular-webpack/angular/page.ts)

f46e4d96

```typescript

69db3407

export interface CompileOptions { // cached by template

f46e4d96

template: string; container: ViewContainerRef; context?: any,

69db3407

// you can customize here any you want to // CommonModule, BrowserModule are auto added // (like *ngIf and angular default directives) // though CompileModule.forRoot is usually enough // so you do not need to use it module?: NgModule;

f46e4d96

onCompiled?: Function, onError?: Function;

69db3407

f46e4d96

} ```

c605ea6f

--> ### Options

f17552e2

[Reference for the Angular module settings which are available.](

c605ea6f

https://github.com/angular/angular/blob/master/packages/core/src/metadata/ng_module.ts)

f46e4d96

c605ea6f

<!--

9aa71751

### Deployed example

0cfe261b

[Corifeus Pages (JIT + AOT at once)](https://corifeus.com)

c605ea6f

fb0911e3

#### For now, until there is no options in Angular to use JIT, I just use AOT, so I don't use this component

0cfe261b

[Corifeus Pages (AOT)](https://corifeus.com)

c605ea6f

f46e4d96

[https://github.com/patrikx3/corifeus-app-web-pages/blob/master/src/angular/modules/cory-page.ts](https://github.com/patrikx3/corifeus-app-web-pages/blob/master/src/angular/modules/cory-page.ts)

9aa71751

-->

f46e4d96

## Dev environment end test ```bash npm install -g yarn git clone https://github.com/patrikx3/angular-compile.git cd angular-compile

d23b2c70

npm install

f46e4d96

grunt run|default ``` [http://localhost:8080](http://localhost:8080)

dbff41e2

# 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

200b0462

## 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: ```text To reduce the payload, we do not ship the compiler in AOT. ``` So right now, it is not possible.

e0ca3d8f

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

200b0462

<!--- ### Angular 4.x.x It is not working out of the box (the default is either JIT or AOT, not both), but the apps become 10 folds faster. The ``@ngtools/webpack`` is AOT and the ```awesome-typescript-loader``` is JIT only. The solution can be architect with the ```@angular/compiler``` and the ```awesome-typescript-loader``` together. A miracle! Example here (since I am using Angular 5 not, it is not AOT + JIT anymore, but if you are on Angular 4, you can do it):

0cfe261b

[More info about AOT + JIT](https://corifeus.com/github/corifeus-builder-angular/artifacts/readme/skeleton.html)

200b0462

--> ### Size If you want very small bundle, use ```gzip```.

f46e4d96

[//]: #@corifeus-footer ---

bc3279cc

63831028

🙏 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](https://patrikx3.com) and [corifeus.com](https://corifeus.com)) could have minor errors, since I am developing in my free time. However, it is usually stable.

d38ccf81

**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.

c49f31d2

ebc85155

---

ad219b23

6556210c

[**P3X-ANGULAR-COMPILE**](https://corifeus.com/angular-compile) Build v2020.10.125

d38ccf81

[![Donate for Corifeus / P3X](https://img.shields.io/badge/Donate-Corifeus-003087.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QZVM4V6HVZJW6) [![Contact Corifeus / P3X](https://img.shields.io/badge/Contact-P3X-ff9900.svg)](https://www.patrikx3.com/en/front/contact) [![Like Corifeus @ Facebook](https://img.shields.io/badge/LIKE-Corifeus-3b5998.svg)](https://www.facebook.com/corifeus.software)

ad219b23

f46e4d96

d38ccf81

## P3X Sponsor

921f407c

d9151425

[IntelliJ - The most intelligent Java IDE](https://www.jetbrains.com/?from=patrikx3)

9aa71751

d38ccf81

[![JetBrains](https://cdn.corifeus.com/assets/svg/jetbrains-logo.svg)](https://www.jetbrains.com/?from=patrikx3)

f46e4d96

92543ad1

[//]: #@corifeus-footer:end