RSS Git Download  Clone
  .idea p3x-robot sunday release 2017-8-30 16:39:17 7 years ago
  src p3x-robot sunday release 2017-6-3 15:44:33 7 years ago
  test p3x-robot sunday release 2017-6-17 07:10:57 7 years ago
  .gitignore 213B p3x-robot sunday release 2017-9-18 01:05:33 7 years ago
  .npmignore 229B p3x-robot sunday release 5/20/2017, 5:00:16 PM 7 years ago
  .scrutinizer.yml 569B p3x-robot sunday release 2017-10-9 19:38:16 6 years ago
  .travis.yml 381B p3x-robot sunday release 2017-6-17 07:10:57 7 years ago
  Gruntfile.js 1kB p3x-robot sunday release 5/28/2017, 7:59:00 AM 7 years ago
  LICENSE 1kB p3x-robot sunday release 2017-7-10 02:31:55 7 years ago
  README.md 5kB p3x-robot sunday release 2017-10-31 18:32:25 6 years ago
  angular-compile.iml 335B p3x-robot sunday release 2017-6-25 22:06:42 7 years ago
  index.ts 23B p3x-robot 7 years ago
  package.json 1kB p3x-robot sunday release 2017-10-31 18:32:25 6 years ago
  tsconfig.aot.json 759B p3x-robot sunday release 2017-9-27 00:05:45 7 years ago
  tsconfig.build.json 858B p3x-robot sunday release 2017-9-27 00:05:45 7 years ago
  tsconfig.json 714B p3x-robot sunday release 2017-9-27 00:05:45 7 years ago
  README.md
[//]: #@corifeus-header [![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) [![NPM](https://nodei.co/npm/p3x-angular-compile.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/p3x-angular-compile/) --- # Angular Dynamic Compile service and directive This is an open source project. Just code. ### Node Version Requirement ``` >=7.8.0 ``` ### Built on Node ``` v8.8.1 ``` The ```async``` and ```await``` keywords are required. Install NodeJs: https://nodejs.org/en/download/package-manager/ # Description [//]: #@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. The version reflects the Angular version (```AngularMajor.AngularMinor.Build-Commit```). ## 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.com/github/corifeus-builder-angular/artifacts/readme/skeleton.html) ### Size If you want very small bundle, use ```gzip```. ## Usage ```typescript import { CompileModule} from "p3x-angular-compile" // the module settings @NgModule({ imports: [ // multiple directives in a shared module like this CorifeusWebMaterialModule, CompileModule.forRoot({ module: { schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [MyDynamicElement ], // though you are better a shared component like imports: [ CorifeusWebMaterialModule ] } }) ], declarations: [ Page, ], providers: [ ], bootstrap: [ Page ] }) export class Module { }; ``` ```html <div *ngIf="true" [p3x-compile]="data" [p3x-compile-ctx]="this"></div> ``` ```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) ### Options [Reference for the Angular module settings.]( https://github.com/angular/angular/blob/master/packages/core/src/metadata/ng_module.ts) The templates are cached. ```typescript export interface CompileOptions { // cached by template template: string; container: ViewContainerRef; context?: any, // 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; onCompiled?: Function, onError?: Function; } ``` ### Deployed example [Corifeus Pages (JIT + AOT at once)](https://pages.corifeus.com) [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) # 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 [//]: #@corifeus-footer --- [**P3X-ANGULAR-COMPILE**](https://pages.corifeus.com/angular-compile) Build v4.4.108-185 [![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=_donations&business=LFRV89WPRMMVE&lc=HU&item_name=Patrik%20Laszlo&item_number=patrikx3&currency_code=HUF&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted) [//]: #@corifeus-footer:end