P3X GitList

f46e4d96

[//]: #@corifeus-header

9b2a07d6

[![NPM](https://nodei.co/npm/p3x-angular-compile.png?downloads=true&downloadRank=true&stars=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

200b0462

# 🆖 Angular Dynamic Compile component, that turns a string into a compiled component v2019.3.7-4

f46e4d96

00816406

59498332

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

db3e80f5

4165ccb8

Possible, this mini server, rarely, is down, please hang on for 15-30 minutes and the server will be back up.

68704de4

4165ccb8

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.

4890e322

00816406

**Bugs are evident™ - MATRIX️**

ab01b20e

f46e4d96

### Node Version Requirement

6da22932

```

bd45776c

>=10.13.0

6da22932

```

f46e4d96

bc3279cc

### Built on Node ```

31a449d7

v11.10.1

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

a81ad1c5

7.2.7

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

It is a ```CommonJS``` bundle by default.

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

c2530961

<ng-container

92543ad1

*ngIf="isEnabled"

7d7aeb47

[p3x-compile]="data"

92543ad1

7d7aeb47

[p3x-compile-ctx]="this"

92543ad1

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

778d99bf

>

c2530961

</ng-container>

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

data: string = "<div (click)="context.alert()">It is working</div>";

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.  ### Size If you want very small bundle, use ```gzip```.

f46e4d96

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

bc3279cc

200b0462

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

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