P3X GitList

f46e4d96

[//]: #@corifeus-header

bc3279cc

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

f46e4d96

# Angular Dynamic Compile service and directive

bc3279cc

## Issues / Support This is an open source project. Time is a precious thing, so I have rarely time to give support and fix issues for someone else. I fix a bug, when I have an error that I need. If you got an issue, error or bug, I hope someone will have time to do it for you, otherwise, you are on your own. Though, if I know the solution, I will tell you. Besides, core errors will be fixed by me. ***If you want to extend, fix bugs or add in new features, I promptly merge pull requests or you can become a ```patrikx3``` member.***

db3e80f5

Besides, when I can support, please note, I cannot support old versions, only the current/latest version.

f46e4d96

### Node Version Requirement

6da22932

``` >=7.8.0 ```

f46e4d96

bc3279cc

### Built on Node ```

27d0f843

v8.1.0

bc3279cc

```

f46e4d96

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

6da22932

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

db3e80f5

### Updating

27d0f843

Since, I work full time, I can work only on weekends. Github updates are released only Sundays. Minor errors can be released any time, but reflects will be shown only in NPM.

db3e80f5

bc3279cc

# Description

f46e4d96

bc3279cc

f46e4d96

[//]: #@corifeus-header:end # 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

## Install ```bash npm install --save p3x-angular-compile # or yarn add p3x-angular-compile ``` ## AOT + JIT 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: [More info about AOT + JIT](https://pages.corifeus.tk/github/corifeus-builder-angular/artifacts/readme/skeleton.html) ### Size If you want very small bundle, use ```gzip```. ## Usage

69db3407

```typescript // the module settings @NgModule({ imports: [ CompileModule.forRoot({ module: {

8e7c9bcf

schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [MyDynamicElement ]

69db3407

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

f46e4d96

```html

69db3407

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

f46e4d96

### Options

69db3407

[Reference for the Angular module settings.]( https://github.com/angular/angular/blob/master/packages/core/src/metadata/ng_module.ts)

f46e4d96

69db3407

The templates are cached.

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

} ``` ### Deployed example [Corifeus Pages (JIT + AOT at once)](https://pages.corifeus.tk) [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) [//]: #@corifeus-footer ---

27d0f843

[**P3X-ANGULAR-COMPILE**](https://pages.corifeus.tk/angular-compile) Build v4.1.483-19

bc3279cc

[Corifeus](http://www.corifeus.tk) by [Patrik Laszlo](http://patrikx3.tk)

f46e4d96

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