P3X GitList

f46e4d96

[//]: #@corifeus-header

01cade89

[![Build Status](https://travis-ci.org/patrikx3/angular-compile.svg?branch=master)](https://travis-ci.org/patrikx3/angular-compile) [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/patrikx3/angular-compile/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/patrikx3/angular-compile/?branch=master) [![Code Coverage](https://scrutinizer-ci.com/g/patrikx3/angular-compile/badges/coverage.png?b=master)](https://scrutinizer-ci.com/g/patrikx3/angular-compile/?branch=master)

f46e4d96

bc3279cc

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

6da22932

---

f46e4d96

bc3279cc

6dce1991

# Angular Dynamic Compile component, that turns a string into a compiled component v5.2.96-316

f46e4d96

68704de4

This is an open-source project. Star this repository if you like it, or even donate! Thank you so much! :)

db3e80f5

68704de4

I run my own server with dynamic IP address so it may happen that the server can not be reachable for about max 5 minutes due to the dynamic DNS. The server may also be unreachable when I backup the SSD with Clonzilla (very rarely) or an electrical issue (but this should not happen again). When he server is down, please hang on for 5-30 minutes and the server will be back up. All my domains (patrikx3.com and corifeus.com) could have errors since I am developing in my free time. However, it is usually stable.

4890e322

ab01b20e

f46e4d96

### Node Version Requirement

6da22932

```

d34e2019

>=8.9.0

6da22932

```

f46e4d96

bc3279cc

### Built on Node ```

68704de4

v9.9.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

e6a9e0e0

5.2.9

c85ba1af

```

ab01b20e

bc3279cc

# Description

f46e4d96

bc3279cc

f46e4d96

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

ff48999f

f46e4d96

# Use case Dynamic compile components by a string template for Angular. You can provide a context, that you can use with anything (for clicking for free etc..) ## NPM & Version It is a ```CommonJS``` bundle.

6da22932

The version reflects the Angular version (```AngularMajor.AngularMinor.Build-Commit```).

f46e4d96

c605ea6f

You can find out your proper version with this command: ```bash npm show p3x-angular-compile versions --json ```

f46e4d96

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

c605ea6f

### Angular 5.x.x + For now we cannot use AOT + JIT at once. It is too new, we will need more releases and new functions that are removed.

afc3d6b7

#### Info https://github.com/angular/angular/issues/20156 On the bottom, you can see: ```text To reduce the payload we do not ship the compiler in AoT ``` So right now, it is not possible.

c605ea6f

### Angular 4.x.x

f46e4d96

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!

c605ea6f

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):

0a49ad92

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

f46e4d96

### Size If you want very small bundle, use ```gzip```. ## 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, // usually it is not required anymore // since Angular 5 changed // but if there is something missing, // you can add in as before

69db3407

CompileModule.forRoot({

2dc7ba78

// module = NgModule

69db3407

module: {

8e7c9bcf

schemas: [CUSTOM_ELEMENTS_SCHEMA],

dbff41e2

declarations: [MyDynamicElement ], // though you are better a shared component like imports: [ CorifeusWebMaterialModule ]

69db3407

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

c605ea6f

778d99bf

```html

7d7aeb47

<div *ngIf="true" [p3x-compile]="data" [p3x-compile-ctx]="this"

e0fc8584

[p3x-compile-error-handler]="anyFunctionThatTakesAnExceptionObject" [p3x-compile-module]="youCanConfigureTheCompileNgModuleForAngular5NotNeeded"

778d99bf

[p3x-compile-imports]="ifForSomeReasonADirectiveIsNotWorkingYouCanAddInForAngular5NotNeeded" >

7d7aeb47

</div>

f46e4d96

```

69db3407

```typescript // a page example export class Page { data: string = "<div (click)="context.alert()">It is working</div>"; alert() { alert('ok'); } } ``` #### 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

### Deployed example

c605ea6f

<!--

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

f46e4d96

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

bc3279cc

6dce1991

[**P3X-ANGULAR-COMPILE**](https://pages.corifeus.com/angular-compile) Build v5.2.96-316

ad219b23

d0b33729

[![Like Corifeus @ Facebook](https://img.shields.io/badge/LIKE-Corifeus-3b5998.svg)](https://www.facebook.com/corifeus.software) [![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)

ad219b23

f46e4d96

921f407c

## Sponsor [![JetBrains](https://www.patrikx3.com/images/jetbrains-logo.svg)](https://www.jetbrains.com/)

b9db5c22

f46e4d96

34d2f3ef

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