[//]: #@corifeus-header
[](https://travis-ci.org/patrikx3/angular-compile) [](https://scrutinizer-ci.com/g/patrikx3/angular-compile/?branch=master) [](https://scrutinizer-ci.com/g/patrikx3/angular-compile/?branch=master)
[](https://www.npmjs.com/package/p3x-angular-compile/)
---
# Angular Dynamic Compile component, that turns a string into a compiled component v5.2.6-256
This is an open source project. Just code. If you like this code, please add a star in GitHub and 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 (patrikx3.com and corifeus.com) 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.4.0
```
The ```async``` and ```await``` keywords are required.
Install NodeJs:
https://nodejs.org/en/download/package-manager/
# Built on Angular
```5.2.0```
# 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
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.
### 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](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,
// 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](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)
```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.](
https://github.com/angular/angular/blob/master/packages/core/src/metadata/ng_module.ts)
<!--
The templates are cached.
-->
### Deployed example
<!--
[Corifeus Pages (JIT + AOT at once)](https://pages.corifeus.com)
-->
[Corifeus Pages (JIT)](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 v5.2.6-256
[](https://www.facebook.com/corifeus.software) [](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=LFRV89WPRMMVE&lc=HU&item_name=Patrik%20Laszlo&item_number=patrikx3¤cy_code=HUF&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted) [](https://www.patrikx3.com/en/front/contact)
[//]: #@corifeus-footer:end
