p3x-angular-compile 2025.4.122 โ 2026.4.102
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -22
- package/lib/angular-compile.component.ts +35 -98
- package/lib/angular-compile.module.ts +12 -16
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
# ๐ Angular Dynamic Compile - Convert strings to Angular components
|
|
9
|
+
# ๐ Angular Dynamic Compile - Convert strings to Angular components v2026.4.102
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
### ๐ ๏ธ Built on NodeJs version
|
|
23
23
|
|
|
24
24
|
```txt
|
|
25
|
-
|
|
25
|
+
v24.14.1
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
|
|
@@ -31,7 +31,7 @@ v22.13.1
|
|
|
31
31
|
# ๐ฆ Built on Angular
|
|
32
32
|
|
|
33
33
|
```text
|
|
34
|
-
|
|
34
|
+
21.2.9
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
|
|
@@ -109,11 +109,31 @@ ng build --aot=false --build-optimizer=false
|
|
|
109
109
|
|
|
110
110
|
## Usage
|
|
111
111
|
|
|
112
|
+
`CompileAttribute` is now a **standalone component**. You can use it either directly in a standalone component or via the legacy `CompileModule` NgModule โ both paths are fully supported.
|
|
113
|
+
|
|
114
|
+
### Standalone (Angular 16+)
|
|
115
|
+
|
|
116
|
+
```typescript
|
|
117
|
+
import { Component } from '@angular/core';
|
|
118
|
+
import { CompileAttribute } from 'p3x-angular-compile';
|
|
119
|
+
|
|
120
|
+
@Component({
|
|
121
|
+
selector: 'my-page',
|
|
122
|
+
standalone: true,
|
|
123
|
+
imports: [CompileAttribute],
|
|
124
|
+
template: `<span [p3x-compile]="template" [p3x-compile-ctx]="this"></span>`,
|
|
125
|
+
})
|
|
126
|
+
export class Page {
|
|
127
|
+
template = '<button (click)="context.alert()">Dynamic template</button>';
|
|
128
|
+
alert() { alert('ok'); }
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Legacy NgModule (unchanged)
|
|
112
133
|
|
|
113
134
|
```typescript
|
|
114
|
-
import { CompileModule} from
|
|
135
|
+
import { CompileModule } from 'p3x-angular-compile';
|
|
115
136
|
|
|
116
|
-
// the module settings
|
|
117
137
|
@NgModule({
|
|
118
138
|
imports: [
|
|
119
139
|
CorifeusWebMaterialModule, // Optional
|
|
@@ -298,23 +318,22 @@ If you want very small bundle, use ```gzip```.
|
|
|
298
318
|
|
|
299
319
|
---
|
|
300
320
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
If you want to quickly and affordably develop your next digital project, visit [corifeus.eu](https://corifeus.eu) for expert solutions tailored to your needs.
|
|
304
|
-
|
|
305
|
-
---
|
|
321
|
+
# Corifeus Network
|
|
306
322
|
|
|
307
|
-
|
|
323
|
+
AI-powered network & email toolkit โ free, no signup.
|
|
308
324
|
|
|
309
|
-
|
|
325
|
+
**Web** ยท [network.corifeus.com](https://network.corifeus.com) **MCP** ยท [`npm i -g p3x-network-mcp`](https://www.npmjs.com/package/p3x-network-mcp)
|
|
310
326
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
-
|
|
315
|
-
-
|
|
316
|
-
|
|
317
|
-
|
|
327
|
+
- **AI Network Assistant** โ ask in plain language, get a full domain health report
|
|
328
|
+
- **Network Audit** โ DNS, SSL, security headers, DNSBL, BGP, IPv6, geolocation in one call
|
|
329
|
+
- **Diagnostics** โ DNS lookup & global propagation, WHOIS, reverse DNS, HTTP check, my-IP
|
|
330
|
+
- **Mail Tester** โ live SPF/DKIM/DMARC + spam score + AI fix suggestions, results emailed (localized)
|
|
331
|
+
- **Monitoring** โ TCP / HTTP / Ping with alerts and public status pages
|
|
332
|
+
- **MCP server** โ 17 tools exposed to Claude Code, Codex, Cursor, any MCP client
|
|
333
|
+
- **Install** โ `claude mcp add p3x-network -- npx p3x-network-mcp`
|
|
334
|
+
- **Try** โ *"audit example.com"*, *"why do my emails land in spam? test me@example.com"*
|
|
335
|
+
- **Source** โ [patrikx3/network](https://github.com/patrikx3/network) ยท [patrikx3/network-mcp](https://github.com/patrikx3/network-mcp)
|
|
336
|
+
- **Contact** โ [patrikx3.com](https://www.patrikx3.com/en/front/contact) ยท [donate](https://paypal.me/patrikx3)
|
|
318
337
|
|
|
319
338
|
---
|
|
320
339
|
|
|
@@ -336,10 +355,8 @@ All my domains, including [patrikx3.com](https://patrikx3.com), [corifeus.eu](ht
|
|
|
336
355
|
|
|
337
356
|
**๐จ Important Changes:** Any breaking changes are prominently noted in the readme to keep you informed.
|
|
338
357
|
|
|
339
|
-
---
|
|
340
|
-
|
|
341
358
|
|
|
342
|
-
[**P3X-ANGULAR-COMPILE**](https://corifeus.com/angular-compile) Build
|
|
359
|
+
[**P3X-ANGULAR-COMPILE**](https://corifeus.com/angular-compile) Build v2026.4.102
|
|
343
360
|
|
|
344
361
|
[](https://www.npmjs.com/package/p3x-angular-compile) [](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QZVM4V6HVZJW6) [](https://www.patrikx3.com/en/front/contact) [](https://www.facebook.com/corifeus.software)
|
|
345
362
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Compiler,
|
|
3
3
|
Component,
|
|
4
|
+
inject,
|
|
4
5
|
Injectable,
|
|
5
6
|
Input,
|
|
6
7
|
ModuleWithProviders,
|
|
@@ -10,133 +11,88 @@ import {
|
|
|
10
11
|
SimpleChanges,
|
|
11
12
|
Type,
|
|
12
13
|
} from '@angular/core';
|
|
13
|
-
|
|
14
|
-
import {CommonModule} from '@angular/common';
|
|
15
|
-
//import { BrowserModule } from '@angular/platform-browser';
|
|
16
|
-
//let SingletonDefaultModule: NgModule;
|
|
17
|
-
//import cloneDeep from 'lodash/cloneDeep';
|
|
18
|
-
|
|
19
|
-
//import { CorifeusMaterialModule } from 'corifeus-web-material';
|
|
14
|
+
import { CommonModule, NgComponentOutlet } from '@angular/common';
|
|
20
15
|
|
|
21
16
|
function reverse(str: string) {
|
|
22
|
-
return str.split('').reverse().join('')
|
|
17
|
+
return str.split('').reverse().join('');
|
|
23
18
|
}
|
|
24
19
|
|
|
25
20
|
function random() {
|
|
26
|
-
return (
|
|
21
|
+
return (
|
|
22
|
+
Math.floor(Math.random() * (99999999999999999 - 10000000000000000)) +
|
|
23
|
+
10000000000000000
|
|
24
|
+
).toString(16);
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
let currentIdTime: number;
|
|
30
28
|
let currentId = 0;
|
|
31
29
|
|
|
32
30
|
function nextId(): string {
|
|
33
|
-
|
|
34
31
|
const now = Date.now();
|
|
35
32
|
if (currentIdTime !== now) {
|
|
36
33
|
currentId = 0;
|
|
37
|
-
currentIdTime = now
|
|
34
|
+
currentIdTime = now;
|
|
38
35
|
}
|
|
39
36
|
const comingId = ++currentId;
|
|
40
37
|
const randomHex = reverse(random()).padStart(15, '0');
|
|
41
|
-
const timeHex = reverse(currentIdTime.toString(16).padStart(12, '0'))
|
|
42
|
-
const comingIdHex = reverse(comingId.toString(16).padStart(3, '0'))
|
|
43
|
-
|
|
44
|
-
//console.log(newId)
|
|
45
|
-
return newId
|
|
38
|
+
const timeHex = reverse(currentIdTime.toString(16).padStart(12, '0'));
|
|
39
|
+
const comingIdHex = reverse(comingId.toString(16).padStart(3, '0'));
|
|
40
|
+
return `p3x-angular-compile-${timeHex}${comingIdHex}${randomHex}`;
|
|
46
41
|
}
|
|
47
42
|
|
|
48
|
-
|
|
49
|
-
//const cache : any = {};
|
|
50
|
-
|
|
51
43
|
@Component({
|
|
52
44
|
selector: '[p3x-compile]',
|
|
53
45
|
template: `
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
46
|
+
@if (renderComponent) {
|
|
47
|
+
<ng-container *ngComponentOutlet="dynamicComponent; ngModuleFactory: dynamicModule;"></ng-container>
|
|
48
|
+
}
|
|
57
49
|
`,
|
|
58
|
-
standalone:
|
|
50
|
+
standalone: true,
|
|
51
|
+
imports: [CommonModule, NgComponentOutlet],
|
|
59
52
|
})
|
|
60
53
|
@Injectable()
|
|
61
54
|
export class CompileAttribute implements OnChanges {
|
|
62
|
-
//export class CompileAttribute implements OnChanges ,OnInit {
|
|
63
55
|
|
|
64
56
|
@Input('p3x-compile')
|
|
65
|
-
html
|
|
57
|
+
html!: string;
|
|
66
58
|
|
|
67
59
|
@Input('p3x-compile-ctx')
|
|
68
60
|
context: any;
|
|
69
61
|
|
|
70
62
|
@Input('p3x-compile-error-handler')
|
|
71
|
-
errorHandler: Function = undefined;
|
|
63
|
+
errorHandler: Function | undefined = undefined;
|
|
72
64
|
|
|
73
65
|
dynamicComponent: any;
|
|
74
66
|
dynamicModule: NgModuleFactory<any> | any;
|
|
75
67
|
|
|
76
68
|
@Input('p3x-compile-module')
|
|
77
|
-
module: NgModule;
|
|
69
|
+
module: NgModule | undefined;
|
|
78
70
|
|
|
79
71
|
@Input('p3x-compile-imports')
|
|
80
|
-
imports: Array<Type<any> | ModuleWithProviders<any> | any[]
|
|
81
|
-
|
|
82
|
-
constructor(
|
|
83
|
-
// private container: ViewContainerRef,
|
|
84
|
-
// private service: CompileService
|
|
85
|
-
private compiler: Compiler,
|
|
86
|
-
// @Inject('config') private config:CompileServiceConfig
|
|
87
|
-
) {
|
|
88
|
-
}
|
|
72
|
+
imports: Array<Type<any> | ModuleWithProviders<any> | any[]> | undefined;
|
|
89
73
|
|
|
90
|
-
|
|
91
|
-
// not requires, since ngOnChanges does it first time change
|
|
92
|
-
ngOnInit() {
|
|
93
|
-
//console.log('ng init')
|
|
94
|
-
// this.update();
|
|
95
|
-
}
|
|
96
|
-
*/
|
|
74
|
+
private readonly compiler = inject(Compiler);
|
|
97
75
|
|
|
98
76
|
get renderComponent() {
|
|
99
|
-
return typeof this.html === 'string' && this.html.trim() !== ''
|
|
77
|
+
return typeof this.html === 'string' && this.html.trim() !== '';
|
|
100
78
|
}
|
|
101
79
|
|
|
102
|
-
ngOnChanges(
|
|
103
|
-
//console.log('ng one changes')
|
|
80
|
+
ngOnChanges(_changes: SimpleChanges) {
|
|
104
81
|
this.update();
|
|
105
82
|
}
|
|
106
83
|
|
|
107
|
-
|
|
108
84
|
update() {
|
|
109
85
|
try {
|
|
110
86
|
if (this.html === undefined || this.html === null || this.html.trim() === '') {
|
|
111
|
-
// this.container.clear();
|
|
112
87
|
this.dynamicComponent = undefined;
|
|
113
88
|
this.dynamicModule = undefined;
|
|
114
89
|
return;
|
|
115
90
|
}
|
|
116
91
|
|
|
117
|
-
/*
|
|
118
|
-
|
|
119
|
-
// looks like Angular already is caching
|
|
120
|
-
|
|
121
|
-
//console.log('html', this.html)
|
|
122
|
-
const cacheKey = this.html;
|
|
123
|
-
//console.log(Object.keys(cache).indexOf(cacheKey), cache)
|
|
124
|
-
if (cache.hasOwnProperty(cacheKey)) {
|
|
125
|
-
const currentCache = cache[cacheKey];
|
|
126
|
-
this.dynamicComponent = currentCache.dynamicComponent
|
|
127
|
-
this.dynamicModule = currentCache.dynamicModule
|
|
128
|
-
return ;
|
|
129
|
-
}
|
|
130
|
-
*/
|
|
131
92
|
this.dynamicComponent = this.createNewComponent(this.html, this.context);
|
|
132
|
-
this.dynamicModule = this.compiler.compileModuleSync(
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
cache[cacheKey] = {
|
|
136
|
-
dynamicComponent: this.dynamicComponent,
|
|
137
|
-
dynamicModule: this.dynamicModule,
|
|
138
|
-
};
|
|
139
|
-
*/
|
|
93
|
+
this.dynamicModule = this.compiler.compileModuleSync(
|
|
94
|
+
this.createComponentModule(this.dynamicComponent),
|
|
95
|
+
);
|
|
140
96
|
} catch (e) {
|
|
141
97
|
if (this.errorHandler === undefined) {
|
|
142
98
|
throw e;
|
|
@@ -144,16 +100,6 @@ export class CompileAttribute implements OnChanges {
|
|
|
144
100
|
this.errorHandler(e);
|
|
145
101
|
}
|
|
146
102
|
}
|
|
147
|
-
/*
|
|
148
|
-
// now we use it with ngComponentOutlet, since about angular 5
|
|
149
|
-
await this.service.compile({
|
|
150
|
-
template: this.html,
|
|
151
|
-
container: this.container,
|
|
152
|
-
context: this.context,
|
|
153
|
-
imports: this.imports,
|
|
154
|
-
module: this.module
|
|
155
|
-
})
|
|
156
|
-
*/
|
|
157
103
|
}
|
|
158
104
|
|
|
159
105
|
private createComponentModule(componentType: any) {
|
|
@@ -162,41 +108,32 @@ export class CompileAttribute implements OnChanges {
|
|
|
162
108
|
if (this.module !== undefined) {
|
|
163
109
|
module = Object.assign({}, this.module);
|
|
164
110
|
}
|
|
165
|
-
|
|
166
|
-
else if (SingletonDefaultModule !== undefined && SingletonDefaultModule !== null) {
|
|
167
|
-
module = cloneDeep(SingletonDefaultModule);
|
|
168
|
-
}
|
|
169
|
-
*/
|
|
111
|
+
|
|
170
112
|
module.imports = module.imports || [];
|
|
171
113
|
module.imports.push(CommonModule);
|
|
172
114
|
if (this.imports !== undefined) {
|
|
173
|
-
module.imports = module.imports.concat(this.imports)
|
|
115
|
+
module.imports = module.imports.concat(this.imports);
|
|
174
116
|
}
|
|
175
117
|
if (module.declarations === undefined) {
|
|
176
|
-
module.declarations = [
|
|
177
|
-
componentType
|
|
178
|
-
];
|
|
118
|
+
module.declarations = [componentType];
|
|
179
119
|
} else {
|
|
180
120
|
module.declarations.push(componentType);
|
|
181
121
|
}
|
|
182
122
|
|
|
183
123
|
@NgModule(module)
|
|
184
|
-
class RuntimeComponentModule {
|
|
185
|
-
}
|
|
124
|
+
class RuntimeComponentModule {}
|
|
186
125
|
|
|
187
126
|
return RuntimeComponentModule;
|
|
188
127
|
}
|
|
189
128
|
|
|
190
|
-
|
|
191
129
|
private createNewComponent(html: string, context: any) {
|
|
192
|
-
|
|
193
|
-
const selector: string = nextId()
|
|
130
|
+
const selector: string = nextId();
|
|
194
131
|
|
|
195
132
|
@Component({
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
})
|
|
133
|
+
selector: selector,
|
|
134
|
+
template: html,
|
|
135
|
+
standalone: false,
|
|
136
|
+
})
|
|
200
137
|
class DynamicComponent {
|
|
201
138
|
context: any = context;
|
|
202
139
|
}
|
|
@@ -1,19 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
} from '@angular/core';
|
|
5
|
-
import {CompileAttribute} from "./angular-compile.component";
|
|
6
|
-
import {CommonModule} from '@angular/common';
|
|
1
|
+
import { NgModule } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { CompileAttribute } from './angular-compile.component';
|
|
7
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Legacy NgModule wrapper โ kept for consumers that still bootstrap via
|
|
7
|
+
* `@NgModule({ imports: [CompileModule] })`. `CompileAttribute` itself is
|
|
8
|
+
* now standalone, so new code can simply `imports: [CompileAttribute]` in
|
|
9
|
+
* a standalone component.
|
|
10
|
+
*/
|
|
8
11
|
@NgModule({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
],
|
|
12
|
-
imports: [
|
|
13
|
-
CommonModule
|
|
14
|
-
],
|
|
15
|
-
exports: [
|
|
16
|
-
CompileAttribute
|
|
17
|
-
]
|
|
12
|
+
imports: [CommonModule, CompileAttribute],
|
|
13
|
+
exports: [CompileAttribute],
|
|
18
14
|
})
|
|
19
|
-
export class CompileModule {
|
|
15
|
+
export class CompileModule {}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "p3x-angular-compile",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2026.4.102",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^13.0.0",
|
|
6
6
|
"@angular/core": "^13.0.0"
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"publish": true
|
|
11
11
|
},
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"corifeus-builder": "^
|
|
13
|
+
"corifeus-builder": "^2026.4.143"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"tslib": "^2.0.0"
|