piral-ng 1.9.0-beta.8186 → 1.9.0-beta.8209
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 +17 -54
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -26,18 +26,22 @@ The extension slot module to be used in Angular components. This is not really n
|
|
|
26
26
|
|
|
27
27
|
## Usage
|
|
28
28
|
|
|
29
|
-
::: summary:
|
|
29
|
+
::: summary: Modern Use (recommended)
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
The recommended way is to use `piral-ng` from your pilets. In this case, no registration in the Piral instance is required.
|
|
32
32
|
|
|
33
33
|
### Example Usage
|
|
34
34
|
|
|
35
35
|
```ts
|
|
36
36
|
import { PiletApi } from '<name-of-piral-instance>';
|
|
37
|
+
import { fromNg, defineNgModule } from 'piral-ng/convert';
|
|
37
38
|
import { AngularPage } from './AngularPage';
|
|
39
|
+
import { AngularModule } from './AngularModule';
|
|
38
40
|
|
|
39
41
|
export function setup(piral: PiletApi) {
|
|
40
|
-
|
|
42
|
+
defineNgModule(AngularModule);
|
|
43
|
+
|
|
44
|
+
piral.registerPage('/sample', fromNg(AngularPage));
|
|
41
45
|
}
|
|
42
46
|
```
|
|
43
47
|
|
|
@@ -58,34 +62,18 @@ import { AngularPage } from './AngularPage';
|
|
|
58
62
|
export class AppModule {}
|
|
59
63
|
```
|
|
60
64
|
|
|
61
|
-
Now the example above changes:
|
|
62
|
-
|
|
63
|
-
```ts
|
|
64
|
-
import { PiletApi } from '<name-of-piral-instance>';
|
|
65
|
-
import { AppModule } from './AppModule';
|
|
66
|
-
import { AngularPage } from './AngularPage';
|
|
67
|
-
|
|
68
|
-
export function setup(piral: PiletApi) {
|
|
69
|
-
// this "teaches" Piral about the given module
|
|
70
|
-
piral.defineNgModule(AppModule);
|
|
71
|
-
|
|
72
|
-
// since we export the AngularPage from the defined module
|
|
73
|
-
// Piral will use the AppModule for bootstrapping the Ng app
|
|
74
|
-
piral.registerPage('/sample', piral.fromNg(AngularPage));
|
|
75
|
-
}
|
|
76
|
-
```
|
|
77
|
-
|
|
78
65
|
### Lazy Loading
|
|
79
66
|
|
|
80
67
|
Even better, you can also lazy load the respective Angular module and components using the callback-based overload of `defineNgModule`:
|
|
81
68
|
|
|
82
69
|
```ts
|
|
83
70
|
import { PiletApi } from '<name-of-piral-instance>';
|
|
71
|
+
import { defineNgModule } from 'piral-ng/convert';
|
|
84
72
|
|
|
85
73
|
export function setup(piral: PiletApi) {
|
|
86
74
|
// this "teaches" Piral about the given module, which is lazy loaded
|
|
87
75
|
// important; in this case `./AppModule.ts` has a `default` export
|
|
88
|
-
const loadComponent =
|
|
76
|
+
const loadComponent = defineNgModule(() => import('./AppModule'));
|
|
89
77
|
|
|
90
78
|
// to fully lazy load we cannot reference the class anymore;
|
|
91
79
|
// instead we reference the selector of the component
|
|
@@ -118,10 +106,11 @@ Standalone components can also be used with lazy loading.
|
|
|
118
106
|
|
|
119
107
|
```ts
|
|
120
108
|
import { PiletApi } from '<name-of-piral-instance>';
|
|
109
|
+
import { fromNg } from 'piral-ng/convert';
|
|
121
110
|
|
|
122
111
|
export function setup(piral: PiletApi) {
|
|
123
112
|
// Just make sure that `AngularPage` exports the component as `default` export
|
|
124
|
-
piral.registerPage('/sample',
|
|
113
|
+
piral.registerPage('/sample', fromNg(() => import('./AngularPage')));
|
|
125
114
|
}
|
|
126
115
|
```
|
|
127
116
|
|
|
@@ -185,11 +174,12 @@ This is mainly used to allow an Angular Pilet to run without `zone.js` as descri
|
|
|
185
174
|
|
|
186
175
|
```ts
|
|
187
176
|
import { PiletApi } from '<name-of-piral-instance>';
|
|
177
|
+
import { defineNgModule } from 'piral-ng/convert';
|
|
188
178
|
import { AppModule } from './AppModule';
|
|
189
179
|
import { AngularPage } from './AngularPage';
|
|
190
180
|
|
|
191
181
|
export function setup(piral: PiletApi) {
|
|
192
|
-
|
|
182
|
+
defineNgModule(AppModule, { ngZone: 'noop' });
|
|
193
183
|
|
|
194
184
|
piral.registerPage('/sample', piral.fromNg(AngularPage));
|
|
195
185
|
}
|
|
@@ -215,33 +205,6 @@ The `ResourceUrlPipe` is there to get the correct paths for images that are just
|
|
|
215
205
|
|
|
216
206
|
In the example the relative path `images/coffee.jpg` will be expanded to a full URL rooted at the pilet's origin.
|
|
217
207
|
|
|
218
|
-
Alternatively, if `piral-ng` has not been added to the Piral instance you can install and use the package also from a pilet directly.
|
|
219
|
-
|
|
220
|
-
```ts
|
|
221
|
-
import { PiletApi } from '<name-of-piral-instance>';
|
|
222
|
-
import { fromNg } from 'piral-ng/convert';
|
|
223
|
-
import { AngularPage } from './AngularPage';
|
|
224
|
-
|
|
225
|
-
export function setup(piral: PiletApi) {
|
|
226
|
-
piral.registerPage('/sample', fromNg(AngularPage));
|
|
227
|
-
}
|
|
228
|
-
```
|
|
229
|
-
|
|
230
|
-
Also, here you can make use of the `defineNgModule` function:
|
|
231
|
-
|
|
232
|
-
```ts
|
|
233
|
-
import { PiletApi } from '<name-of-piral-instance>';
|
|
234
|
-
import { fromNg, defineNgModule } from 'piral-ng/convert';
|
|
235
|
-
import { AngularPage } from './AngularPage';
|
|
236
|
-
import { AngularModule } from './AngularModule';
|
|
237
|
-
|
|
238
|
-
export function setup(piral: PiletApi) {
|
|
239
|
-
defineNgModule(AngularModule);
|
|
240
|
-
|
|
241
|
-
piral.registerPage('/sample', fromNg(AngularPage));
|
|
242
|
-
}
|
|
243
|
-
```
|
|
244
|
-
|
|
245
208
|
For components, such as the `AngularPage` a `template` should be specified.
|
|
246
209
|
|
|
247
210
|
```ts
|
|
@@ -351,10 +314,11 @@ module.exports = (config) => {
|
|
|
351
314
|
```
|
|
352
315
|
|
|
353
316
|
**Note**: You must install these dependencies (also things like `copy-webpack-plugin`) yourself. `piral-ng` does not come with any dependencies for development.
|
|
354
|
-
|
|
355
317
|
:::
|
|
356
318
|
|
|
357
|
-
::: summary:
|
|
319
|
+
::: summary: Legacy Use
|
|
320
|
+
|
|
321
|
+
For backwards compatibility, you can also install `piral-ng` in your Piral instance.
|
|
358
322
|
|
|
359
323
|
The provided library only brings API extensions for pilets to a Piral instance. The Piral instance still needs to be configured properly to support Angular 2+.
|
|
360
324
|
|
|
@@ -412,7 +376,6 @@ The related packages should be shared with the pilets via the *package.json*:
|
|
|
412
376
|
```
|
|
413
377
|
|
|
414
378
|
Depending on your Angular needs you'd want to share more packages.
|
|
415
|
-
|
|
416
379
|
:::
|
|
417
380
|
|
|
418
381
|
## Injected Services
|
|
@@ -884,4 +847,4 @@ import '@angular/compiler';
|
|
|
884
847
|
|
|
885
848
|
## License
|
|
886
849
|
|
|
887
|
-
Piral is released using the MIT license. For more information see the [license file](./LICENSE).
|
|
850
|
+
Piral is released using the MIT license. For more information see the [license file](./LICENSE).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "piral-ng",
|
|
3
|
-
"version": "1.9.0-beta.
|
|
3
|
+
"version": "1.9.0-beta.8209",
|
|
4
4
|
"description": "Plugin for integrating Angular components in Piral.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"piral",
|
|
@@ -71,9 +71,9 @@
|
|
|
71
71
|
"@angular/platform-browser": "^16.0.0",
|
|
72
72
|
"@angular/platform-browser-dynamic": "^16.0.0",
|
|
73
73
|
"@angular/router": "^16.0.0",
|
|
74
|
-
"piral-core": "1.9.0-beta.
|
|
74
|
+
"piral-core": "1.9.0-beta.8209",
|
|
75
75
|
"piral-ng-common": "^16.0.0",
|
|
76
76
|
"rxjs": "^7.3.0"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "6ae23abba61e76479bc06b76454c38957bc0e79e"
|
|
79
79
|
}
|