P3X GitList

f46e4d96

[//]: #@corifeus-header

9b2a07d6

1b2e74fa

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

f46e4d96

7b1203af

432f765b

[![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

bc3279cc

c49f31d2

# 🆖 Angular Dynamic Compile component, that turns a string into a compiled component v2019.10.142

f46e4d96

00816406

445edca6

00816406

**Bugs are evident™ - MATRIX️**

ab01b20e

f46e4d96

### Node Version Requirement

6da22932

```

63831028

>=10.16.0

6da22932

```

f46e4d96

bc3279cc

### Built on Node ```

08442807

v12.8.0

bc3279cc

```

f46e4d96

The ```async``` and ```await``` keywords are required.

6da22932

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

96b948ec

ab01b20e

# Built on Angular

c85ba1af

```text

c49f31d2

8.2.2

c85ba1af

```

ab01b20e

bc3279cc

# Description

f46e4d96

bc3279cc

f46e4d96

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

ff48999f

f46e4d96

# Use case

c2530961

Dynamic compile components by a string template for Angular. You can provide a context, that you can use with anything (response to events / clicking etc..)

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

f46e4d96

## Usage

69db3407

```typescript

3ca7fe02

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

69db3407

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

dbff41e2

// multiple directives in a shared module like this CorifeusWebMaterialModule,

c605ea6f

// usually it is enough CompileModule,

69db3407

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

92543ad1

#### The template

778d99bf

```html

cbed43df

<span

47109d81

92543ad1

*ngIf="isEnabled"

04a1283e

[p3x-compile]="template"

92543ad1

7d7aeb47

[p3x-compile-ctx]="this"

92543ad1

47109d81

92543ad1

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

778d99bf

>

cbed43df

</span>

f46e4d96

```

92543ad1

#### The code

69db3407

```typescript // a page example 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 [Reference for the Angular module settings.]( https://github.com/angular/angular/blob/master/packages/core/src/metadata/ng_module.ts)

f46e4d96

c605ea6f

<!--

9aa71751

### Deployed example

0a49ad92

[Corifeus Pages (JIT + AOT at once)](https://pages.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 [Corifeus Pages (AOT)](https://pages.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 yarn install 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

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

c49f31d2

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

ebc85155

---

c49f31d2

[**P3X-ANGULAR-COMPILE**](https://pages.corifeus.com/angular-compile) Build v2019.10.142

ad219b23

432f765b

[![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

0d977c3f

## P3X Sponsors

921f407c

d9151425

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

9aa71751

d9151425

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

9aa71751

[The Smartest IDE for MongoDB](https://www.nosqlbooster.com)

921f407c

b9db5c22

f46e4d96

92543ad1

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