piral-ng 1.9.1 → 1.9.2-beta.8388
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 +80 -3
- package/lib/startup.d.ts +1 -1
- package/lib/startup.js +37 -26
- package/lib/startup.js.map +1 -1
- package/package.json +5 -5
- package/src/startup.ts +43 -35
package/README.md
CHANGED
|
@@ -390,6 +390,54 @@ export class SampleTileComponent {
|
|
|
390
390
|
}
|
|
391
391
|
```
|
|
392
392
|
|
|
393
|
+
## Setting Up Routing
|
|
394
|
+
|
|
395
|
+
You can use the Angular router for (sub)pages that you register in your pilet's root module. In general the idea is that your page that includes a `<router-outlet>` will be registered in the global routing, but with a wildcard indicating that requests to paths below the main route are also handled by this page:
|
|
396
|
+
|
|
397
|
+
```ts
|
|
398
|
+
export function setup(app: PiletApi) {
|
|
399
|
+
const fromNg = createConverter(() => import('./app/app.module.ts'));
|
|
400
|
+
|
|
401
|
+
app.registerPage(`/app/*`, fromNg('app-page'));
|
|
402
|
+
}
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
In your `app.module` include a routing module, e.g.:
|
|
406
|
+
|
|
407
|
+
```ts
|
|
408
|
+
import { NgModule } from "@angular/core";
|
|
409
|
+
import { RouterModule, Routes } from "@angular/router";
|
|
410
|
+
|
|
411
|
+
import { FirstPageComponent } from "./first.component";
|
|
412
|
+
import { SecondPageComponent } from "./second.component";
|
|
413
|
+
|
|
414
|
+
const routes: Routes = [
|
|
415
|
+
{ path: "", redirectTo: "one", pathMatch: "full" },
|
|
416
|
+
{ path: "one", component: FirstPageComponent },
|
|
417
|
+
{ path: "two", component: SecondPageComponent },
|
|
418
|
+
];
|
|
419
|
+
|
|
420
|
+
@NgModule({
|
|
421
|
+
imports: [RouterModule.forRoot(routes, { resolveNavigationPromiseOnError: true })],
|
|
422
|
+
exports: [RouterModule],
|
|
423
|
+
})
|
|
424
|
+
export class AppRoutingModule {}
|
|
425
|
+
```
|
|
426
|
+
|
|
427
|
+
The `resolveNavigationPromiseOnError` option makes sure to hide navigation errors that will occur when you navigate globally, e.g., from a route defined in one micro frontend to some route from another micro frontend.
|
|
428
|
+
|
|
429
|
+
As mentioned the linked `app-page` may be as simple as:
|
|
430
|
+
|
|
431
|
+
```ts
|
|
432
|
+
import { Component } from "@angular/core";
|
|
433
|
+
|
|
434
|
+
@Component({
|
|
435
|
+
selector: 'app-page',
|
|
436
|
+
template: '<router-outlet></router-outlet>',
|
|
437
|
+
})
|
|
438
|
+
export class AppComponent {}
|
|
439
|
+
```
|
|
440
|
+
|
|
393
441
|
## Converting an Angular Application to a Pilet
|
|
394
442
|
|
|
395
443
|
Depending on the kind of Angular application this may be rather straight forward or very difficult. Since we cannot discuss all possible edge cases we will assume the standard scenario. If you need more help then don't hesitate to contact us.
|
|
@@ -493,7 +541,7 @@ If you still need to use `templateUrl` (or `styleUrls`) then take a look below a
|
|
|
493
541
|
|
|
494
542
|
## Angular Versions
|
|
495
543
|
|
|
496
|
-
This plugin works with recent versions of Angular (right now
|
|
544
|
+
This plugin works with recent versions of Angular (right now 16 - 20) and (previously, i.e., not continuously tested) legacy versions starting with Angular 9. Support for Angular.js (also known as Angular 1) is given via `piral-ngjs`.
|
|
497
545
|
|
|
498
546
|
### Angular 9
|
|
499
547
|
|
|
@@ -740,7 +788,7 @@ The basic dependencies look as follows:
|
|
|
740
788
|
}
|
|
741
789
|
```
|
|
742
790
|
|
|
743
|
-
Besides the usual imports, the explicit import of the `@angular/compiler` package may be necessary. TypeScript has to be higher or equal to 5.
|
|
791
|
+
Besides the usual imports, the explicit import of the `@angular/compiler` package may be necessary. TypeScript has to be higher or equal to 5.5 (and less than 5.6).
|
|
744
792
|
|
|
745
793
|
So include in your app shell as preamble:
|
|
746
794
|
|
|
@@ -769,7 +817,36 @@ The basic dependencies look as follows:
|
|
|
769
817
|
}
|
|
770
818
|
```
|
|
771
819
|
|
|
772
|
-
Besides the usual imports, the explicit import of the `@angular/compiler` package may be necessary. TypeScript has to be higher or equal to 5.
|
|
820
|
+
Besides the usual imports, the explicit import of the `@angular/compiler` package may be necessary. TypeScript has to be higher or equal to 5.7 (and less than 5.9).
|
|
821
|
+
|
|
822
|
+
So include in your app shell as preamble:
|
|
823
|
+
|
|
824
|
+
```js
|
|
825
|
+
import 'core-js/proposals/reflect-metadata';
|
|
826
|
+
import '@angular/compiler';
|
|
827
|
+
```
|
|
828
|
+
|
|
829
|
+
### Angular 20
|
|
830
|
+
|
|
831
|
+
In general, Angular 20 seems to work and is **supported**.
|
|
832
|
+
|
|
833
|
+
The basic dependencies look as follows:
|
|
834
|
+
|
|
835
|
+
```json
|
|
836
|
+
{
|
|
837
|
+
"@angular/common": "^20",
|
|
838
|
+
"@angular/compiler": "^20",
|
|
839
|
+
"@angular/core": "^20",
|
|
840
|
+
"@angular/router": "^20",
|
|
841
|
+
"@angular/platform-browser": "^20",
|
|
842
|
+
"@angular/platform-browser-dynamic": "^20",
|
|
843
|
+
"core-js": "^3",
|
|
844
|
+
"rxjs": "^7.4",
|
|
845
|
+
"zone.js": "~0.15"
|
|
846
|
+
}
|
|
847
|
+
```
|
|
848
|
+
|
|
849
|
+
Besides the usual imports, the explicit import of the `@angular/compiler` package may be necessary. TypeScript has to be higher or equal to 5.8 (and less than 5.9).
|
|
773
850
|
|
|
774
851
|
So include in your app shell as preamble:
|
|
775
852
|
|
package/lib/startup.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComponentContext } from 'piral-core';
|
|
2
|
-
import { NgModuleRef } from '@angular/core';
|
|
2
|
+
import type { NgModuleRef } from '@angular/core';
|
|
3
3
|
import type { NgModuleFlags, NgOptions } from './types';
|
|
4
4
|
export type NgModuleInt = NgModuleRef<any> & {
|
|
5
5
|
_destroyed: boolean;
|
package/lib/startup.js
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as angularBrowserDynamic from '@angular/platform-browser-dynamic';
|
|
2
|
+
import * as angularCore from '@angular/core';
|
|
2
3
|
import { APP_BASE_HREF } from '@angular/common';
|
|
3
|
-
import { enableProdMode, NgZone, ɵALLOW_MULTIPLE_PLATFORMS as ALLOW_MULTIPLE_PLATFORMS, VERSION, } from '@angular/core';
|
|
4
4
|
import { contextName } from './constants';
|
|
5
5
|
import { CONTEXT } from './injection';
|
|
6
6
|
import { getNgVersion } from './utils';
|
|
7
|
-
const normalCall = 'platformBrowserDynamic';
|
|
8
|
-
const legacyCall = 'ɵplatformCoreDynamic';
|
|
9
|
-
const platformCoreDynamic = normalCall in browserDynamic ? browserDynamic[normalCall] : browserDynamic[legacyCall];
|
|
10
7
|
function getVersionHandler(versions) {
|
|
11
8
|
const major = getNgVersion();
|
|
12
9
|
const version = `v${major}`;
|
|
@@ -14,38 +11,50 @@ function getVersionHandler(versions) {
|
|
|
14
11
|
}
|
|
15
12
|
const runningModules = [];
|
|
16
13
|
function startNew(BootstrapModule, context, ngOptions, ngFlags) {
|
|
14
|
+
const normalCall = 'platformBrowserDynamic';
|
|
15
|
+
const legacyCall = 'ɵplatformCoreDynamic';
|
|
16
|
+
const multiplePlatforms = 'ɵALLOW_MULTIPLE_PLATFORMS';
|
|
17
|
+
const platformCoreDynamic = normalCall in angularBrowserDynamic ? angularBrowserDynamic[normalCall] : angularBrowserDynamic[legacyCall];
|
|
17
18
|
const path = context.publicPath || '/';
|
|
19
|
+
const extraDefinitions = multiplePlatforms in angularCore ? [{ provide: angularCore[multiplePlatforms], useValue: true }] : [];
|
|
18
20
|
const platform = platformCoreDynamic([
|
|
19
|
-
|
|
21
|
+
...extraDefinitions,
|
|
20
22
|
{ provide: contextName, useValue: context },
|
|
21
23
|
{ provide: CONTEXT, useValue: context },
|
|
22
24
|
{ provide: APP_BASE_HREF, useValue: path },
|
|
23
25
|
{ provide: 'NgFlags', useValue: ngFlags },
|
|
24
26
|
]);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
27
|
+
let zoneIdentifier = '';
|
|
28
|
+
if ('NgZone' in angularCore) {
|
|
29
|
+
const zone = angularCore.NgZone;
|
|
30
|
+
const version = angularCore.VERSION.full;
|
|
31
|
+
// We need to bind the version-specific NgZone to its ID
|
|
32
|
+
// this will not be MF-dependent, but Angular dependent
|
|
33
|
+
// i.e., to allow using Zone.js with multiple versions of Angular
|
|
34
|
+
zoneIdentifier = `piral-ng:${version}`;
|
|
35
|
+
// This is a hack, since NgZone doesn't allow you to configure the property that identifies your zone.
|
|
36
|
+
// See:
|
|
37
|
+
// - https://github.com/PlaceMe-SAS/single-spa-angular-cli/issues/33
|
|
38
|
+
// - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L144
|
|
39
|
+
// - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L257
|
|
40
|
+
// @ts-ignore
|
|
41
|
+
zone.isInAngularZone = () => window.Zone.current._properties[zoneIdentifier] === true;
|
|
42
|
+
// We disable those checks as they are misleading and might cause trouble
|
|
43
|
+
zone.assertInAngularZone = () => { };
|
|
44
|
+
zone.assertNotInAngularZone = () => { };
|
|
45
|
+
}
|
|
39
46
|
return platform
|
|
40
47
|
.bootstrapModule(BootstrapModule, ngOptions)
|
|
41
48
|
.catch((err) => console.error(err))
|
|
42
49
|
.then((instance) => {
|
|
43
50
|
if (instance) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
z
|
|
51
|
+
if (zoneIdentifier) {
|
|
52
|
+
const zone = instance.injector.get(angularCore.NgZone);
|
|
53
|
+
// @ts-ignore
|
|
54
|
+
const z = zone?._inner ?? zone?.inner;
|
|
55
|
+
if (z && '_properties' in z) {
|
|
56
|
+
z._properties[zoneIdentifier] = true;
|
|
57
|
+
}
|
|
49
58
|
}
|
|
50
59
|
runningModules.push([BootstrapModule, instance, platform]);
|
|
51
60
|
}
|
|
@@ -122,6 +131,8 @@ if (process.env.NODE_ENV === 'development') {
|
|
|
122
131
|
handler();
|
|
123
132
|
}
|
|
124
133
|
if (process.env.NODE_ENV === 'production') {
|
|
125
|
-
enableProdMode
|
|
134
|
+
if ('enableProdMode' in angularCore) {
|
|
135
|
+
angularCore.enableProdMode();
|
|
136
|
+
}
|
|
126
137
|
}
|
|
127
138
|
//# sourceMappingURL=startup.js.map
|
package/lib/startup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"startup.js","sourceRoot":"","sources":["../src/startup.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"startup.js","sourceRoot":"","sources":["../src/startup.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "piral-ng",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.2-beta.8388",
|
|
4
4
|
"description": "Plugin for integrating Angular components in Piral.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"piral",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"./extend-webpack": "./extend-webpack.js",
|
|
29
29
|
"./standalone": "./lib/standalone.js",
|
|
30
30
|
"./lib/*": {
|
|
31
|
-
"
|
|
32
|
-
"
|
|
31
|
+
"types": "./lib/*.d.ts",
|
|
32
|
+
"import": "./lib/*"
|
|
33
33
|
},
|
|
34
34
|
"./package.json": "./package.json"
|
|
35
35
|
},
|
|
@@ -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": "
|
|
74
|
+
"piral-core": "1.9.2-beta.8388",
|
|
75
75
|
"piral-ng-common": "^16.0.0",
|
|
76
76
|
"rxjs": "^7.3.0"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "25023f913ae9423c9cecd23e44d70e959ff58c8a"
|
|
79
79
|
}
|
package/src/startup.ts
CHANGED
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
import type { ComponentContext } from 'piral-core';
|
|
2
|
-
import
|
|
2
|
+
import type { NgModuleRef, PlatformRef } from '@angular/core';
|
|
3
|
+
import * as angularBrowserDynamic from '@angular/platform-browser-dynamic';
|
|
4
|
+
import * as angularCore from '@angular/core';
|
|
3
5
|
import { APP_BASE_HREF } from '@angular/common';
|
|
4
|
-
import {
|
|
5
|
-
enableProdMode,
|
|
6
|
-
NgModuleRef,
|
|
7
|
-
NgZone,
|
|
8
|
-
PlatformRef,
|
|
9
|
-
ɵALLOW_MULTIPLE_PLATFORMS as ALLOW_MULTIPLE_PLATFORMS,
|
|
10
|
-
VERSION,
|
|
11
|
-
} from '@angular/core';
|
|
12
6
|
|
|
13
7
|
import { contextName } from './constants';
|
|
14
8
|
import { CONTEXT } from './injection';
|
|
15
9
|
import { getNgVersion } from './utils';
|
|
16
10
|
import type { NgModuleFlags, NgOptions } from './types';
|
|
17
11
|
|
|
18
|
-
const normalCall = 'platformBrowserDynamic';
|
|
19
|
-
const legacyCall = 'ɵplatformCoreDynamic';
|
|
20
|
-
const platformCoreDynamic = normalCall in browserDynamic ? browserDynamic[normalCall] : browserDynamic[legacyCall];
|
|
21
|
-
|
|
22
12
|
function getVersionHandler(versions: Record<string, () => void>) {
|
|
23
13
|
const major = getNgVersion();
|
|
24
14
|
const version = `v${major}`;
|
|
@@ -28,43 +18,59 @@ function getVersionHandler(versions: Record<string, () => void>) {
|
|
|
28
18
|
const runningModules: Array<[any, NgModuleInt, PlatformRef]> = [];
|
|
29
19
|
|
|
30
20
|
function startNew(BootstrapModule: any, context: ComponentContext, ngOptions?: NgOptions, ngFlags?: NgModuleFlags) {
|
|
21
|
+
const normalCall = 'platformBrowserDynamic';
|
|
22
|
+
const legacyCall = 'ɵplatformCoreDynamic';
|
|
23
|
+
const multiplePlatforms = 'ɵALLOW_MULTIPLE_PLATFORMS';
|
|
24
|
+
const platformCoreDynamic =
|
|
25
|
+
normalCall in angularBrowserDynamic ? angularBrowserDynamic[normalCall] : angularBrowserDynamic[legacyCall];
|
|
31
26
|
const path = context.publicPath || '/';
|
|
27
|
+
const extraDefinitions =
|
|
28
|
+
multiplePlatforms in angularCore ? [{ provide: angularCore[multiplePlatforms], useValue: true }] : [];
|
|
32
29
|
const platform = platformCoreDynamic([
|
|
33
|
-
|
|
30
|
+
...extraDefinitions,
|
|
34
31
|
{ provide: contextName, useValue: context },
|
|
35
32
|
{ provide: CONTEXT, useValue: context },
|
|
36
33
|
{ provide: APP_BASE_HREF, useValue: path },
|
|
37
34
|
{ provide: 'NgFlags', useValue: ngFlags },
|
|
38
35
|
]);
|
|
39
36
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
let zoneIdentifier = '';
|
|
38
|
+
|
|
39
|
+
if ('NgZone' in angularCore) {
|
|
40
|
+
const zone = angularCore.NgZone;
|
|
41
|
+
const version = angularCore.VERSION.full;
|
|
42
|
+
|
|
43
|
+
// We need to bind the version-specific NgZone to its ID
|
|
44
|
+
// this will not be MF-dependent, but Angular dependent
|
|
45
|
+
// i.e., to allow using Zone.js with multiple versions of Angular
|
|
46
|
+
zoneIdentifier = `piral-ng:${version}`;
|
|
44
47
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
// This is a hack, since NgZone doesn't allow you to configure the property that identifies your zone.
|
|
49
|
+
// See:
|
|
50
|
+
// - https://github.com/PlaceMe-SAS/single-spa-angular-cli/issues/33
|
|
51
|
+
// - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L144
|
|
52
|
+
// - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L257
|
|
53
|
+
// @ts-ignore
|
|
54
|
+
zone.isInAngularZone = () => window.Zone.current._properties[zoneIdentifier] === true;
|
|
52
55
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
+
// We disable those checks as they are misleading and might cause trouble
|
|
57
|
+
zone.assertInAngularZone = () => {};
|
|
58
|
+
zone.assertNotInAngularZone = () => {};
|
|
59
|
+
}
|
|
56
60
|
|
|
57
61
|
return platform
|
|
58
62
|
.bootstrapModule(BootstrapModule, ngOptions)
|
|
59
63
|
.catch((err) => console.error(err))
|
|
60
64
|
.then((instance: NgModuleInt) => {
|
|
61
65
|
if (instance) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
z
|
|
66
|
+
if (zoneIdentifier) {
|
|
67
|
+
const zone = instance.injector.get(angularCore.NgZone);
|
|
68
|
+
// @ts-ignore
|
|
69
|
+
const z = zone?._inner ?? zone?.inner;
|
|
70
|
+
|
|
71
|
+
if (z && '_properties' in z) {
|
|
72
|
+
z._properties[zoneIdentifier] = true;
|
|
73
|
+
}
|
|
68
74
|
}
|
|
69
75
|
|
|
70
76
|
runningModules.push([BootstrapModule, instance, platform]);
|
|
@@ -157,5 +163,7 @@ if (process.env.NODE_ENV === 'development') {
|
|
|
157
163
|
}
|
|
158
164
|
|
|
159
165
|
if (process.env.NODE_ENV === 'production') {
|
|
160
|
-
enableProdMode
|
|
166
|
+
if ('enableProdMode' in angularCore) {
|
|
167
|
+
angularCore.enableProdMode();
|
|
168
|
+
}
|
|
161
169
|
}
|