piral-ng 1.5.5-beta.7076 → 1.5.5-beta.7084

package/README.md

@@ -108,7 +108,11 @@ which defines the selector (`angular-page`) matching the specified selector in t
 
 ### Standalone Components
 
-The `piral-ng` plugin also supports Angular standalone components as rendering source.
+The `piral-ng` plugin also supports Angular standalone components as rendering source. For this we have two modes:
+
+#### Legacy Standalone Mode
+
+This mode works with `piral-ng` itself, i.e., integrated in the app shell. It also works in a mix with modules.
 
 Standalone components can also be used with lazy loading.
 
@@ -121,6 +125,20 @@ export function setup(piral: PiletApi) {
 }
 ```
 
+#### Isolated Standalone Mode
+
+This mode works only with `piral-ng/standalone`, which has to be used in a pilet directly (as a replacement for `piral-ng/convert`). It does not mix with modules - as components need to be proper standalone entry points.
+
+```ts
+import { createConverter } from 'piral-ng/standalone';
+import { PiletApi } from '<name-of-piral-instance>';
+
+export function setup(piral: PiletApi) {
+  // Just make sure that `AngularPage` exports the component as `default` export
+  piral.registerPage('/sample', piral.fromNg(() => import('./AngularPage')));
+}
+```
+
 ### Angular Options
 
 You can optionally provide Options to `defineNgModule`, which are identical to those given to `bootstrapModule` during the Angular boot process. See https://angular.io/api/core/PlatformRef#bootstrapModule for possible values.

package/esm/CoreRoutingService.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentContext } from 'piral-core';
+import { NgZone, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+export declare class CoreRoutingService implements OnDestroy {
+    context: ComponentContext;
+    private router;
+    private zone;
+    private dispose;
+    private subscription;
+    constructor(context: ComponentContext, router: Router, zone: NgZone);
+    ngOnDestroy(): void;
+}

package/esm/CoreRoutingService.js

@@ -0,0 +1,77 @@
+import { __decorate, __metadata, __param } from "tslib";
+import { Inject, Injectable, NgZone, Optional } from '@angular/core';
+import { Router } from '@angular/router';
+import { BrowserPlatformLocation as ɵBrowserPlatformLocation } from '@angular/common';
+const noop = function () { };
+// deactivates the usual platform behavior; all these operations are performed via the RoutingService
+// to avoid any conflict, e.g., double-booking URL changes in React and Angular
+ɵBrowserPlatformLocation.prototype.pushState = noop;
+ɵBrowserPlatformLocation.prototype.replaceState = noop;
+ɵBrowserPlatformLocation.prototype.forward = noop;
+ɵBrowserPlatformLocation.prototype.back = noop;
+ɵBrowserPlatformLocation.prototype.historyGo = noop;
+function normalize(url) {
+    const search = url.indexOf('?');
+    const hash = url.indexOf('#');
+    if (search !== -1 || hash !== -1) {
+        if (search === -1) {
+            return url.substring(0, hash);
+        }
+        else if (hash === -1) {
+            return url.substring(0, search);
+        }
+        else {
+            return url.substring(0, Math.min(search, hash));
+        }
+    }
+    return url;
+}
+let CoreRoutingService = class CoreRoutingService {
+    constructor(context, router, zone) {
+        this.context = context;
+        this.router = router;
+        this.zone = zone;
+        if (this.router) {
+            this.router.errorHandler = (error) => {
+                // Match in development and production
+                if (error.message.match('Cannot match any routes') || error.message.match('NG04002')) {
+                    // ignore this special error
+                    return undefined;
+                }
+                throw error;
+            };
+            const nav = this.context.navigation;
+            const queueNavigation = (url) => {
+                window.requestAnimationFrame(() => nav.push(url));
+            };
+            this.dispose = nav.listen(({ location }) => {
+                const path = location.pathname;
+                const url = `${path}${location.search}${location.hash}`;
+                this.zone.run(() => this.router.navigateByUrl(url));
+            });
+            this.subscription = this.router.events.subscribe((e) => {
+                if (e.type === 1) {
+                    const routerUrl = normalize(e.urlAfterRedirects);
+                    const locationUrl = nav.url;
+                    if (routerUrl !== locationUrl) {
+                        queueNavigation(routerUrl);
+                    }
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.dispose?.();
+        this.subscription?.unsubscribe();
+    }
+};
+CoreRoutingService = __decorate([
+    Injectable(),
+    __param(0, Inject('Context')),
+    __param(1, Optional()),
+    __param(2, Optional()),
+    __metadata("design:paramtypes", [Object, Router,
+        NgZone])
+], CoreRoutingService);
+export { CoreRoutingService };
+//# sourceMappingURL=CoreRoutingService.js.map

package/esm/CoreRoutingService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreRoutingService.js","sourceRoot":"","sources":["../src/CoreRoutingService.ts"],"names":[],"mappings":"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"}

package/esm/standalone.d.ts

@@ -0,0 +1,6 @@
+import { ApplicationConfig, Type } from '@angular/core';
+import type { BaseComponentProps, HtmlComponent } from 'piral-core';
+export interface NgStandaloneConverter {
+    <TProps extends BaseComponentProps>(component: Type<TProps>): HtmlComponent<TProps>;
+}
+export declare function createConverter(options: ApplicationConfig): NgStandaloneConverter;

package/esm/standalone.js

@@ -0,0 +1,61 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { createApplication } from '@angular/platform-browser';
+import { ɵresetCompiledComponents as reset, } from '@angular/core';
+import { CoreRoutingService } from './CoreRoutingService';
+export function createConverter(options) {
+    const update = (ref, props) => {
+        if (ref) {
+            const ct = ref.componentType;
+            if (ct?.ɵcmp?.inputs?.Props) {
+                ref.setInput('Props', props);
+            }
+        }
+    };
+    let app = undefined;
+    return (component) => ({
+        type: 'html',
+        component: {
+            mount(element, props, ctx, locals) {
+                if (!app) {
+                    const { piral } = props;
+                    app = createApplication({
+                        ...options,
+                        providers: [
+                            ...options.providers,
+                            CoreRoutingService,
+                            { provide: APP_BASE_HREF, useValue: ctx.publicPath },
+                            { provide: 'Context', useValue: ctx },
+                            { provide: 'piral', useValue: piral },
+                        ],
+                    });
+                    piral.on('unload-pilet', (ev) => {
+                        if (ev.name === piral.meta.name && typeof reset === 'function') {
+                            // pretty much a cleanup step for Angular.
+                            reset();
+                        }
+                    });
+                }
+                locals.active = true;
+                app.then((appRef) => {
+                    if (locals.active) {
+                        const ref = appRef.bootstrap(component, element);
+                        // Start the routing service.
+                        appRef.injector.get(CoreRoutingService);
+                        update(ref, props);
+                        locals.component = ref;
+                    }
+                });
+            },
+            update(_1, props, _2, locals) {
+                update(locals.component, props);
+            },
+            unmount(element, locals) {
+                locals.active = false;
+                locals.component?.destroy();
+                locals.component = undefined;
+                element.remove();
+            },
+        },
+    });
+}
+//# sourceMappingURL=standalone.js.map

package/esm/standalone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"standalone.js","sourceRoot":"","sources":["../src/standalone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAKL,wBAAwB,IAAI,KAAK,GAClC,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAM1D,MAAM,UAAU,eAAe,CAAC,OAA0B;IACxD,MAAM,MAAM,GAAG,CAAC,GAAsB,EAAE,KAAU,EAAE,EAAE;QACpD,IAAI,GAAG,EAAE;YACP,MAAM,EAAE,GAAG,GAAG,CAAC,aAAoB,CAAC;YAEpC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;gBAC3B,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;aAC9B;SACF;IACH,CAAC,CAAC;IAEF,IAAI,GAAG,GAAwC,SAAS,CAAC;IAEzD,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACrB,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE;YACT,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM;gBAC/B,IAAI,CAAC,GAAG,EAAE;oBACR,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;oBAExB,GAAG,GAAG,iBAAiB,CAAC;wBACtB,GAAG,OAAO;wBACV,SAAS,EAAE;4BACT,GAAG,OAAO,CAAC,SAAS;4BACpB,kBAAkB;4BAClB,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,CAAC,UAAU,EAAE;4BACpD,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE;4BACrC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE;yBACtC;qBACF,CAAC,CAAC;oBAEH,KAAK,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE;wBAC9B,IAAI,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE;4BAC9D,0CAA0C;4BAC1C,KAAK,EAAE,CAAC;yBACT;oBACH,CAAC,CAAC,CAAC;iBACJ;gBAED,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;gBAErB,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;oBAClB,IAAI,MAAM,CAAC,MAAM,EAAE;wBACjB,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;wBAEjD,6BAA6B;wBAC7B,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;wBAExC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;wBACnB,MAAM,CAAC,SAAS,GAAG,GAAG,CAAC;qBACxB;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM;gBAC1B,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAClC,CAAC;YACD,OAAO,CAAC,OAAO,EAAE,MAAM;gBACrB,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;gBACtB,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC;gBAC5B,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;gBAC7B,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,CAAC;SACF;KACF,CAAC,CAAC;AACL,CAAC"}

package/lib/CoreRoutingService.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentContext } from 'piral-core';
+import { NgZone, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+export declare class CoreRoutingService implements OnDestroy {
+    context: ComponentContext;
+    private router;
+    private zone;
+    private dispose;
+    private subscription;
+    constructor(context: ComponentContext, router: Router, zone: NgZone);
+    ngOnDestroy(): void;
+}

package/lib/CoreRoutingService.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoreRoutingService = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@angular/core");
+const router_1 = require("@angular/router");
+const common_1 = require("@angular/common");
+const noop = function () { };
+// deactivates the usual platform behavior; all these operations are performed via the RoutingService
+// to avoid any conflict, e.g., double-booking URL changes in React and Angular
+common_1.BrowserPlatformLocation.prototype.pushState = noop;
+common_1.BrowserPlatformLocation.prototype.replaceState = noop;
+common_1.BrowserPlatformLocation.prototype.forward = noop;
+common_1.BrowserPlatformLocation.prototype.back = noop;
+common_1.BrowserPlatformLocation.prototype.historyGo = noop;
+function normalize(url) {
+    const search = url.indexOf('?');
+    const hash = url.indexOf('#');
+    if (search !== -1 || hash !== -1) {
+        if (search === -1) {
+            return url.substring(0, hash);
+        }
+        else if (hash === -1) {
+            return url.substring(0, search);
+        }
+        else {
+            return url.substring(0, Math.min(search, hash));
+        }
+    }
+    return url;
+}
+let CoreRoutingService = class CoreRoutingService {
+    constructor(context, router, zone) {
+        this.context = context;
+        this.router = router;
+        this.zone = zone;
+        if (this.router) {
+            this.router.errorHandler = (error) => {
+                // Match in development and production
+                if (error.message.match('Cannot match any routes') || error.message.match('NG04002')) {
+                    // ignore this special error
+                    return undefined;
+                }
+                throw error;
+            };
+            const nav = this.context.navigation;
+            const queueNavigation = (url) => {
+                window.requestAnimationFrame(() => nav.push(url));
+            };
+            this.dispose = nav.listen(({ location }) => {
+                const path = location.pathname;
+                const url = `${path}${location.search}${location.hash}`;
+                this.zone.run(() => this.router.navigateByUrl(url));
+            });
+            this.subscription = this.router.events.subscribe((e) => {
+                if (e.type === 1) {
+                    const routerUrl = normalize(e.urlAfterRedirects);
+                    const locationUrl = nav.url;
+                    if (routerUrl !== locationUrl) {
+                        queueNavigation(routerUrl);
+                    }
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.dispose?.();
+        this.subscription?.unsubscribe();
+    }
+};
+exports.CoreRoutingService = CoreRoutingService;
+exports.CoreRoutingService = CoreRoutingService = tslib_1.__decorate([
+    (0, core_1.Injectable)(),
+    tslib_1.__param(0, (0, core_1.Inject)('Context')),
+    tslib_1.__param(1, (0, core_1.Optional)()),
+    tslib_1.__param(2, (0, core_1.Optional)()),
+    tslib_1.__metadata("design:paramtypes", [Object, router_1.Router,
+        core_1.NgZone])
+], CoreRoutingService);
+//# sourceMappingURL=CoreRoutingService.js.map

package/lib/CoreRoutingService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreRoutingService.js","sourceRoot":"","sources":["../src/CoreRoutingService.ts"],"names":[],"mappings":"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"}

package/lib/standalone.d.ts

@@ -0,0 +1,6 @@
+import { ApplicationConfig, Type } from '@angular/core';
+import type { BaseComponentProps, HtmlComponent } from 'piral-core';
+export interface NgStandaloneConverter {
+    <TProps extends BaseComponentProps>(component: Type<TProps>): HtmlComponent<TProps>;
+}
+export declare function createConverter(options: ApplicationConfig): NgStandaloneConverter;

package/lib/standalone.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConverter = void 0;
+const common_1 = require("@angular/common");
+const platform_browser_1 = require("@angular/platform-browser");
+const core_1 = require("@angular/core");
+const CoreRoutingService_1 = require("./CoreRoutingService");
+function createConverter(options) {
+    const update = (ref, props) => {
+        if (ref) {
+            const ct = ref.componentType;
+            if (ct?.ɵcmp?.inputs?.Props) {
+                ref.setInput('Props', props);
+            }
+        }
+    };
+    let app = undefined;
+    return (component) => ({
+        type: 'html',
+        component: {
+            mount(element, props, ctx, locals) {
+                if (!app) {
+                    const { piral } = props;
+                    app = (0, platform_browser_1.createApplication)({
+                        ...options,
+                        providers: [
+                            ...options.providers,
+                            CoreRoutingService_1.CoreRoutingService,
+                            { provide: common_1.APP_BASE_HREF, useValue: ctx.publicPath },
+                            { provide: 'Context', useValue: ctx },
+                            { provide: 'piral', useValue: piral },
+                        ],
+                    });
+                    piral.on('unload-pilet', (ev) => {
+                        if (ev.name === piral.meta.name && typeof core_1.ɵresetCompiledComponents === 'function') {
+                            // pretty much a cleanup step for Angular.
+                            (0, core_1.ɵresetCompiledComponents)();
+                        }
+                    });
+                }
+                locals.active = true;
+                app.then((appRef) => {
+                    if (locals.active) {
+                        const ref = appRef.bootstrap(component, element);
+                        // Start the routing service.
+                        appRef.injector.get(CoreRoutingService_1.CoreRoutingService);
+                        update(ref, props);
+                        locals.component = ref;
+                    }
+                });
+            },
+            update(_1, props, _2, locals) {
+                update(locals.component, props);
+            },
+            unmount(element, locals) {
+                locals.active = false;
+                locals.component?.destroy();
+                locals.component = undefined;
+                element.remove();
+            },
+        },
+    });
+}
+exports.createConverter = createConverter;
+//# sourceMappingURL=standalone.js.map

package/lib/standalone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"standalone.js","sourceRoot":"","sources":["../src/standalone.ts"],"names":[],"mappings":";;;AAAA,4CAAgD;AAChD,gEAA8D;AAC9D,wCAMuB;AAEvB,6DAA0D;AAM1D,SAAgB,eAAe,CAAC,OAA0B;IACxD,MAAM,MAAM,GAAG,CAAC,GAAsB,EAAE,KAAU,EAAE,EAAE;QACpD,IAAI,GAAG,EAAE;YACP,MAAM,EAAE,GAAG,GAAG,CAAC,aAAoB,CAAC;YAEpC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;gBAC3B,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;aAC9B;SACF;IACH,CAAC,CAAC;IAEF,IAAI,GAAG,GAAwC,SAAS,CAAC;IAEzD,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACrB,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE;YACT,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM;gBAC/B,IAAI,CAAC,GAAG,EAAE;oBACR,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;oBAExB,GAAG,GAAG,IAAA,oCAAiB,EAAC;wBACtB,GAAG,OAAO;wBACV,SAAS,EAAE;4BACT,GAAG,OAAO,CAAC,SAAS;4BACpB,uCAAkB;4BAClB,EAAE,OAAO,EAAE,sBAAa,EAAE,QAAQ,EAAE,GAAG,CAAC,UAAU,EAAE;4BACpD,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE;4BACrC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE;yBACtC;qBACF,CAAC,CAAC;oBAEH,KAAK,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE;wBAC9B,IAAI,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,OAAO,+BAAK,KAAK,UAAU,EAAE;4BAC9D,0CAA0C;4BAC1C,IAAA,+BAAK,GAAE,CAAC;yBACT;oBACH,CAAC,CAAC,CAAC;iBACJ;gBAED,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;gBAErB,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;oBAClB,IAAI,MAAM,CAAC,MAAM,EAAE;wBACjB,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;wBAEjD,6BAA6B;wBAC7B,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,uCAAkB,CAAC,CAAC;wBAExC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;wBACnB,MAAM,CAAC,SAAS,GAAG,GAAG,CAAC;qBACxB;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM;gBAC1B,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAClC,CAAC;YACD,OAAO,CAAC,OAAO,EAAE,MAAM;gBACrB,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;gBACtB,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC;gBAC5B,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;gBAC7B,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,CAAC;SACF;KACF,CAAC,CAAC;AACL,CAAC;AAhED,0CAgEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-ng",
-  "version": "1.5.5-beta.7076",
+  "version": "1.5.5-beta.7084",
   "description": "Plugin for integrating Angular components in Piral.",
   "keywords": [
     "piral",
@@ -36,6 +36,9 @@
     "./extend-webpack": {
       "require": "./extend-webpack.js"
     },
+    "./standalone": {
+      "import": "./esm/standalone.js"
+    },
     "./esm/*": {
       "import": "./esm/*"
     },
@@ -87,9 +90,9 @@
     "@angular/platform-browser": "^16.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
-    "piral-core": "1.5.5-beta.7076",
+    "piral-core": "1.5.5-beta.7084",
     "piral-ng-common": "^16.0.0",
     "rxjs": "^7.3.0"
   },
-  "gitHead": "a7df8af1f51c271dd51e16ae04048cae64ef001e"
+  "gitHead": "59ab59543def8bb327fc5b0a588bea2486f190a4"
 }

package/src/CoreRoutingService.ts

@@ -0,0 +1,85 @@
+import type { Subscription } from 'rxjs';
+import type { ComponentContext, Disposable } from 'piral-core';
+import { Inject, Injectable, NgZone, OnDestroy, Optional } from '@angular/core';
+import { NavigationEnd, NavigationError, NavigationStart, Router, Scroll } from '@angular/router';
+import { BrowserPlatformLocation as ɵBrowserPlatformLocation } from '@angular/common';
+
+const noop = function () {};
+
+// deactivates the usual platform behavior; all these operations are performed via the RoutingService
+// to avoid any conflict, e.g., double-booking URL changes in React and Angular
+ɵBrowserPlatformLocation.prototype.pushState = noop;
+ɵBrowserPlatformLocation.prototype.replaceState = noop;
+ɵBrowserPlatformLocation.prototype.forward = noop;
+ɵBrowserPlatformLocation.prototype.back = noop;
+ɵBrowserPlatformLocation.prototype.historyGo = noop;
+
+function normalize(url: string) {
+  const search = url.indexOf('?');
+  const hash = url.indexOf('#');
+
+  if (search !== -1 || hash !== -1) {
+    if (search === -1) {
+      return url.substring(0, hash);
+    } else if (hash === -1) {
+      return url.substring(0, search);
+    } else {
+      return url.substring(0, Math.min(search, hash));
+    }
+  }
+
+  return url;
+}
+
+@Injectable()
+export class CoreRoutingService implements OnDestroy {
+  private dispose: Disposable | undefined;
+  private subscription: Subscription | undefined;
+
+  constructor(
+    @Inject('Context') public context: ComponentContext,
+    @Optional() private router: Router,
+    @Optional() private zone: NgZone,
+  ) {
+    if (this.router) {
+      this.router.errorHandler = (error: Error) => {
+        // Match in development and production
+        if (error.message.match('Cannot match any routes') || error.message.match('NG04002')) {
+          // ignore this special error
+          return undefined;
+        }
+        throw error;
+      };
+
+      const nav = this.context.navigation;
+
+      const queueNavigation = (url: string) => {
+        window.requestAnimationFrame(() => nav.push(url));
+      };
+
+      this.dispose = nav.listen(({ location }) => {
+        const path = location.pathname;
+        const url = `${path}${location.search}${location.hash}`;
+        this.zone.run(() => this.router.navigateByUrl(url));
+      });
+
+      this.subscription = this.router.events.subscribe(
+        (e: NavigationError | NavigationStart | NavigationEnd | Scroll) => {
+          if (e.type === 1) {
+            const routerUrl = normalize(e.urlAfterRedirects);
+            const locationUrl = nav.url;
+
+            if (routerUrl !== locationUrl) {
+              queueNavigation(routerUrl);
+            }
+          }
+        },
+      );
+    }
+  }
+
+  ngOnDestroy() {
+    this.dispose?.();
+    this.subscription?.unsubscribe();
+  }
+}

package/src/standalone.ts

@@ -0,0 +1,81 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { createApplication } from '@angular/platform-browser';
+import {
+  ApplicationConfig,
+  ApplicationRef,
+  ComponentRef,
+  Type,
+  ɵresetCompiledComponents as reset,
+} from '@angular/core';
+import type { BaseComponentProps, HtmlComponent } from 'piral-core';
+import { CoreRoutingService } from './CoreRoutingService';
+
+export interface NgStandaloneConverter {
+  <TProps extends BaseComponentProps>(component: Type<TProps>): HtmlComponent<TProps>;
+}
+
+export function createConverter(options: ApplicationConfig): NgStandaloneConverter {
+  const update = (ref: ComponentRef<any>, props: any) => {
+    if (ref) {
+      const ct = ref.componentType as any;
+
+      if (ct?.ɵcmp?.inputs?.Props) {
+        ref.setInput('Props', props);
+      }
+    }
+  };
+
+  let app: undefined | Promise<ApplicationRef> = undefined;
+
+  return (component) => ({
+    type: 'html',
+    component: {
+      mount(element, props, ctx, locals) {
+        if (!app) {
+          const { piral } = props;
+
+          app = createApplication({
+            ...options,
+            providers: [
+              ...options.providers,
+              CoreRoutingService,
+              { provide: APP_BASE_HREF, useValue: ctx.publicPath },
+              { provide: 'Context', useValue: ctx },
+              { provide: 'piral', useValue: piral },
+            ],
+          });
+
+          piral.on('unload-pilet', (ev) => {
+            if (ev.name === piral.meta.name && typeof reset === 'function') {
+              // pretty much a cleanup step for Angular.
+              reset();
+            }
+          });
+        }
+
+        locals.active = true;
+
+        app.then((appRef) => {
+          if (locals.active) {
+            const ref = appRef.bootstrap(component, element);
+
+            // Start the routing service.
+            appRef.injector.get(CoreRoutingService);
+
+            update(ref, props);
+            locals.component = ref;
+          }
+        });
+      },
+      update(_1, props, _2, locals) {
+        update(locals.component, props);
+      },
+      unmount(element, locals) {
+        locals.active = false;
+        locals.component?.destroy();
+        locals.component = undefined;
+        element.remove();
+      },
+    },
+  });
+}