RSS Git Download  Clone
  angular-karma p3x-robot sunday release 2017-11-4 15:46:19 4 years, 3 months ago
  angular-protractor p3x-robot sunday release 2017-11-4 15:46:19 4 years, 3 months ago
  angular-webpack p3x-robot sunday release 2018-3-14 20:59:20 3 years, 10 months ago
[//]: #@corifeus-header [![Build Status](]( [![Scrutinizer Code Quality](]( [![Code Coverage](]( [![NPM](]( --- # Angular Dynamic Compile component, that turns a string into a compiled component v5.2.89-308 This is an open source project. Just code. If you like this code, please add a star in GitHub and if you really like, you can donate as well. Thanks you so much! Given, I have my own server, with dynamic IP address, it could happen that the server for about max 5 minutes can not be reachable for the dynamic DNS or very rarely I backup with Clonzilla the SSD or something with the electricity (too much hoovering or cleaning - but I worked on it, so should not happen again), but for some reason, it is not reachable please hang on for 5-30 minutes and it will be back for sure. All my domains ( and could have errors right now, since I am developing in my free time and you can catch glitches, but usually it is stable (imagine updating everything always, which is weird). ### Node Version Requirement ``` >=8.9.0 ``` ### Built on Node ``` v9.8.0 ``` The ```async``` and ```await``` keywords are required. Install NodeJs: # Built on Angular ```text 5.2.8 ``` # 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```). You can find out your proper version with this command: ```bash npm show p3x-angular-compile versions --json ``` ## Install ```bash npm install --save p3x-angular-compile # or yarn add p3x-angular-compile ``` ## AOT + JIT ### 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. #### Info 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. ### Angular 4.x.x 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 (since I am using Angular 5 not, it is not AOT + JIT anymore, but if you are on Angular 4, you can do it): [More info about AOT + JIT]( ### 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, // 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 CompileModule.forRoot({ // module = NgModule 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" [p3x-compile-error-handler]="anyFunctionThatTakesAnExceptionObject" [p3x-compile-module]="youCanConfigureTheCompileNgModuleForAngular5NotNeeded" [p3x-compile-imports]="ifForSomeReasonADirectiveIsNotWorkingYouCanAddInForAngular5NotNeeded" > </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]( , [Example page]( <!-- #### Service [Please refer to use an a service]( ```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; } ``` --> ### Options [Reference for the Angular module settings.]( <!-- The templates are cached. --> ### Deployed example <!-- [Corifeus Pages (JIT + AOT at once)]( --> #### 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)]( []( ## Dev environment end test ```bash npm install -g yarn git clone 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. [//]: #@corifeus-footer --- [**P3X-ANGULAR-COMPILE**]( Build v5.2.89-308 [![Like Corifeus @ Facebook](]( [![Donate for Corifeus / P3X](]( [![Contact Corifeus / P3X](]( ## Sponsor [![JetBrains](]( [//]: #@corifeus-footer:end