piral-ng 0.15.0-beta.4813 → 0.15.0-beta.4816

package/README.md

@@ -30,7 +30,7 @@ The extension slot module to be used in Angular components. This is not really n
 
 You can use the `fromNg` function from the Pilet API to convert your Angular components to components usable by your Piral instance.
 
-Example use:
+### Example Usage
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
@@ -75,7 +75,53 @@ export function setup(piral: PiletApi) {
 }
 ```
 
-Angular Options:
+### Lazy Loading
+
+Even better, you can also lazy load the respective Angular module and components using the callback-based overload of `defineNgModule`:
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+
+export function setup(piral: PiletApi) {
+  // this "teaches" Piral about the given module, which is lazy loaded
+  // important; in this case `./AppModule.ts` has a `default` export
+  const loadComponent = piral.defineNgModule(() => import('./AppModule'));
+
+  // to fully lazy load we cannot reference the class anymore;
+  // instead we reference the selector of the component
+  piral.registerPage('/sample', loadComponent('angular-page'));
+}
+```
+
+In the example above, the `AngularPage` would have been defined to look like
+
+```js
+// ...
+@Component({
+  // ...
+  selector: 'angular-page',
+})
+export class AngularPage { /* ... */ }
+```
+
+which defines the selector (`angular-page`) matching the specified selector in the `setup` function.
+
+### Standalone Components
+
+The `piral-ng` plugin also supports Angular standalone components as rendering source.
+
+Standalone components can also be used with lazy loading.
+
+```ts
+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/types.d.ts

@@ -38,6 +38,17 @@ export interface NgLazyType {
     opts: NgOptions;
     state: any;
 }
+/**
+ * The lazy loading interface for retrieving Angular components.
+ */
+export interface LazyType<T> {
+    /**
+     * Callback to be invoked for lazy loading an Angular module or component.
+     */
+    (): Promise<{
+        default: Type<T>;
+    }>;
+}
 /**
  * Represents the interface implemented by a module definer function.
  */
@@ -54,9 +65,7 @@ export interface NgModuleDefiner {
      * @param opts The options to pass when bootstrapping.
      * @returns The module ID to be used to reference components.
      */
-    <T>(getModule: () => Promise<{
-        default: Type<T>;
-    }>, opts?: NgOptions): NgComponentLoader;
+    <T>(getModule: LazyType<T>, opts?: NgOptions): NgComponentLoader;
 }
 export interface NgComponent {
     /**

package/lib/types.d.ts

@@ -38,6 +38,17 @@ export interface NgLazyType {
     opts: NgOptions;
     state: any;
 }
+/**
+ * The lazy loading interface for retrieving Angular components.
+ */
+export interface LazyType<T> {
+    /**
+     * Callback to be invoked for lazy loading an Angular module or component.
+     */
+    (): Promise<{
+        default: Type<T>;
+    }>;
+}
 /**
  * Represents the interface implemented by a module definer function.
  */
@@ -54,9 +65,7 @@ export interface NgModuleDefiner {
      * @param opts The options to pass when bootstrapping.
      * @returns The module ID to be used to reference components.
      */
-    <T>(getModule: () => Promise<{
-        default: Type<T>;
-    }>, opts?: NgOptions): NgComponentLoader;
+    <T>(getModule: LazyType<T>, opts?: NgOptions): NgComponentLoader;
 }
 export interface NgComponent {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-ng",
-  "version": "0.15.0-beta.4813",
+  "version": "0.15.0-beta.4816",
   "description": "Plugin for integrating Angular components in Piral.",
   "keywords": [
     "piral",
@@ -79,7 +79,7 @@
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
-    "piral-core": "0.15.0-beta.4813",
+    "piral-core": "0.15.0-beta.4816",
     "rxjs": "^7.3.0"
   },
   "peerDependencies": {
@@ -90,5 +90,5 @@
     "@angular/router": "^2.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
     "rxjs": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },
-  "gitHead": "2790199e9c9e3792899f3325f0584d97af77e795"
+  "gitHead": "f6af0640e919d26b25a5dc51d6559c9201728ccd"
 }

package/src/types.ts

@@ -42,6 +42,16 @@ export interface NgLazyType {
   state: any;
 }
 
+/**
+ * The lazy loading interface for retrieving Angular components.
+ */
+export interface LazyType<T> {
+  /**
+   * Callback to be invoked for lazy loading an Angular module or component.
+   */
+  (): Promise<{ default: Type<T> }>;
+}
+
 /**
  * Represents the interface implemented by a module definer function.
  */
@@ -58,7 +68,7 @@ export interface NgModuleDefiner {
    * @param opts The options to pass when bootstrapping.
    * @returns The module ID to be used to reference components.
    */
-  <T>(getModule: () => Promise<{ default: Type<T> }>, opts?: NgOptions): NgComponentLoader;
+  <T>(getModule: LazyType<T>, opts?: NgOptions): NgComponentLoader;
 }
 
 export interface NgComponent {