piral-ng 0.14.0-beta.3157 → 0.14.0-beta.3187

package/README.md

@@ -4,7 +4,7 @@
 
 This is a plugin that only has a peer dependency to `piral-core`. What `piral-ng` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
-The set includes an Angular converter for any component registration, as well as a `fromNg` shortcut and a `NgExtension` component.
+The set includes an Angular converter for any component registration, as well as a `fromNg` shortcut, a `defineNgModule` function, and a `NgExtension` component.
 
 By default, these API extensions are not integrated in `piral`, so you'd need to add them to your Piral instance.
 
@@ -12,6 +12,10 @@ By default, these API extensions are not integrated in `piral`, so you'd need to
 
 The following functions are brought to the Pilet API.
 
+### `defineNgModule()`
+
+Communicates the usage of a pre-defined Angular module to Piral. Components declared / exported in the module will be bootstrapped within this module.
+
 ### `fromNg()`
 
 Transforms a standard Angular component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.
@@ -37,18 +41,55 @@ export function setup(piral: PiletApi) {
 }
 ```
 
+We recommend that you still put these components into modules as you would normally do. In order for Piral to use that module you need to define it first. This also allows you to use special Piral declarations such as the `NgExtension` or the `ResourceUrlPipe`. All these declarations come with the `SharedModule` available via import from `piral-ng/common`.
+
+Example (app) module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { SharedModule } from 'piral-ng/common';
+import { AngularPage } from './AngularPage';
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [AngularPage],
+  exports: [AngularPage]
+})
+export class AppModule {}
+```
+
+Now the example above changes:
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { AppModule } from './AppModule';
+import { AngularPage } from './AngularPage';
+
+export function setup(piral: PiletApi) {
+  // this "teaches" Piral about the given module
+  piral.defineNgModule(AppModule);
+
+  // since we export the AngularPage from the defined module
+  // Piral will use the AppModule for bootstrapping the Ng app
+  piral.registerPage('/sample', piral.fromNg(AngularPage));
+}
+```
+
 Angular Options:
 
-You can optionally provide Options to `fromNg`, which are identical to those given to `bootstrapModule` during the Angular boot process. See https://angular.io/api/core/PlatformRef#bootstrapModule for possible values.
+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.
 
 This is mainly used to allow an Angular Pilet to run without `zone.js` as described [here](https://angular.io/guide/zone#noopzone).
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
+import { AppModule } from './AppModule';
 import { AngularPage } from './AngularPage';
 
 export function setup(piral: PiletApi) {
-  piral.registerPage('/sample', piral.fromNg(AngularPage, { ngZone: 'noop' }));
+  piral.defineNgModule(AppModule, { ngZone: 'noop' });
+
+  piral.registerPage('/sample', piral.fromNg(AngularPage));
 }
 ```
 
@@ -64,6 +105,14 @@ For specifying `params` you may use data binding. Example:
 <extension-component name="foo" [params]="{ foo: 2, bar: 'hello' }"></extension-component>
 ```
 
+The `ResourceUrlPipe` is there to get the correct paths for images that are just copied to the output directory. The pipe can be used in HTML like this:
+
+```html
+<img width="250" [src]="'images/coffee.jpg' | resourceUrl" alt="Coffee" />
+```
+
+In the example the relative path `images/coffee.jpg` will be expanded to a full URL rooted at the pilet's origin.
+
 Alternatively, if `piral-ng` has not been added to the Piral instance you can install and use the package also from a pilet directly.
 
 ```ts
@@ -75,7 +124,21 @@ export function setup(piral: PiletApi) {
   piral.registerPage('/sample', fromNg(AngularPage));
 }
 ```
-:::
+
+Also, here you can make use of the `defineNgModule` function:
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { fromNg, defineNgModule } from 'piral-ng/convert';
+import { AngularPage } from './AngularPage';
+import { AngularModule } from './AngularModule';
+
+export function setup(piral: PiletApi) {
+  defineNgModule(AngularModule);
+
+  piral.registerPage('/sample', fromNg(AngularPage));
+}
+```
 
 For components, such as the `AngularPage` a `template` should be specified.
 
@@ -111,7 +174,7 @@ In many Angular projects you still find `templateUrl`, which would be transforme
 
 The same issue applies to `styleUrls`, which should be replaced by `styles`.
 
-If you still need to use `templateUrl` then take a look below at the Webpack config file.
+If you still need to use `templateUrl` (or `styleUrls`) then take a look below at the Webpack config file.
 :::
 
 If you don't want to inline the `template` then just `require` the contents, e.g.,
@@ -175,6 +238,8 @@ module.exports = (config) => {
 };
 ```
 
+:::
+
 ::: summary: For Piral instance developers
 
 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+.
@@ -255,6 +320,79 @@ export class SampleTileComponent {
 }
 ```
 
+## Converting an Angular Application to a Pilet
+
+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.
+
+First, you'll need to get rid of the Angular CLI. In most cases adding a Webpack configuration should be sufficient. The Webpack configuration can be similar to the one presented above. In many cases you can use the convenience `extend-webpack` module.
+
+This is how your *webpack.config.js* can look like:
+
+```js
+const extendWebpack = require('piral-ng/extend-webpack');
+
+module.exports = extendWebpack({
+  ngOptions: {
+    jitMode: false,
+  },
+});
+```
+
+The available options are:
+
+- `ngOptions` (providing input to the `AngularWebpackPlugin` class)
+- `patterns` (providing input to the Webpack `copy-webpack-plugin`)
+- `compilerOptions` (providing input to the `angularCompilerOptions` section of the *tsconfig.json*)
+
+For AoT (i.e. `jitMode: false`) to work correctly the `compilationMode: 'partial'` has to be set. If you use the `piral-ng/extend-webpack` helper as shown above this will be configured correctly for you.
+
+If you have set up the build process then you need to make sure that your application has an entry point (*index.ts*). That entry point has to be a valid pilet entry module. It may look as follows:
+
+```ts
+import { PiletApi } from '<your-app-shell>';
+
+export function setup(api: PiletApi) {
+
+}
+```
+
+You can remove your *main.ts* (or similar) containing
+
+```ts
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.error(err));
+```
+
+as the bootstrapping is done by Piral. Instead, you now need to define your `AppModule` in the pilet:
+
+```ts
+import { PiletApi } from '<your-app-shell>';
+import { AppModule } from './app/AppModule.ts';
+
+export function setup(api: PiletApi) {
+  api.defineNgModule(AppModule);
+}
+```
+
+Now you can register the exported components from the `AppModule` in the various parts. Example:
+
+```ts
+import { PiletApi } from '<your-app-shell>';
+import { AppModule } from './app/AppModule.ts';
+import { AppComponent } from './app/AppComponent.ts';
+
+export function setup(api: PiletApi) {
+  api.defineNgModule(AppModule);
+
+  api.registerPage('/foo/*', api.fromNg(AppComponent));
+}
+```
+
+In the given example we register a single page, however, with all subpages resolving to the same page. Within the page we may use the Angular Router to determine what content to show.
+
+The content may remain pretty much unchanged. Routing should be done either via the Angular Router (internal) or via the React Router (across components) automatically. The thing you'll need to pay attention to is the usage of resources. Since the resource will be available available to the location of the pilet (e.g., if the pilet's main bundle is located at `https://yourcdn.com/your-pilet/1.0.0/index.js` then resources need to be relative to `https://yourcdn.com/your-pilet/1.0.0/`).
+
 ## Angular Versions
 
 This plugin works with all versions of Angular (right now 2 - 12). Support for Angular.js (also known as Angular 1) is given via `piral-ngjs`.
@@ -270,6 +408,7 @@ The basic dependencies look as follows:
   "@angular/common": "^2",
   "@angular/compiler": "^2",
   "@angular/core": "^2",
+  "@angular/router": "^2",
   "@angular/platform-browser": "^2",
   "@angular/platform-browser-dynamic": "^2",
   "core-js": "^3.15.2",
@@ -293,6 +432,7 @@ The basic dependencies look as follows:
   "@angular/common": "^4",
   "@angular/compiler": "^4",
   "@angular/core": "^4",
+  "@angular/router": "^4",
   "@angular/platform-browser": "^4",
   "@angular/platform-browser-dynamic": "^4",
   "core-js": "^3.15.2",
@@ -309,11 +449,12 @@ The basic dependencies look as follows:
 
 ```json
 {
-  "@angular/common": "^4",
-  "@angular/compiler": "^4",
-  "@angular/core": "^4",
-  "@angular/platform-browser": "^4",
-  "@angular/platform-browser-dynamic": "^4",
+  "@angular/common": "^5",
+  "@angular/compiler": "^5",
+  "@angular/core": "^5",
+  "@angular/router": "^5",
+  "@angular/platform-browser": "^5",
+  "@angular/platform-browser-dynamic": "^5",
   "core-js": "^3.15.2",
   "rxjs": "^5.0.0",
   "zone.js": "~0.9"
@@ -331,6 +472,7 @@ The basic dependencies look as follows:
   "@angular/common": "^6",
   "@angular/compiler": "^6",
   "@angular/core": "^6",
+  "@angular/router": "^6",
   "@angular/platform-browser": "^6",
   "@angular/platform-browser-dynamic": "^6",
   "core-js": "^3.15.2",
@@ -347,11 +489,12 @@ The basic dependencies look as follows:
 
 ```json
 {
-  "@angular/common": "^6",
-  "@angular/compiler": "^6",
-  "@angular/core": "^6",
-  "@angular/platform-browser": "^6",
-  "@angular/platform-browser-dynamic": "^6",
+  "@angular/common": "^7",
+  "@angular/compiler": "^7",
+  "@angular/core": "^7",
+  "@angular/router": "^7",
+  "@angular/platform-browser": "^7",
+  "@angular/platform-browser-dynamic": "^7",
   "core-js": "^3.15.2",
   "rxjs": "^6.0.0",
   "zone.js": "~0.9"
@@ -369,6 +512,7 @@ The basic dependencies look as follows:
   "@angular/common": "^8",
   "@angular/compiler": "^8",
   "@angular/core": "^8",
+  "@angular/router": "^8",
   "@angular/platform-browser": "^8",
   "@angular/platform-browser-dynamic": "^8",
   "core-js": "^3.15.2",
@@ -388,6 +532,7 @@ The basic dependencies look as follows:
   "@angular/common": "^9",
   "@angular/compiler": "^9",
   "@angular/core": "^9",
+  "@angular/router": "^9",
   "@angular/platform-browser": "^9",
   "@angular/platform-browser-dynamic": "^9",
   "core-js": "^3.15.2",
@@ -407,6 +552,7 @@ The basic dependencies look as follows:
   "@angular/common": "^10",
   "@angular/compiler": "^10",
   "@angular/core": "^10",
+  "@angular/router": "^10",
   "@angular/platform-browser": "^10",
   "@angular/platform-browser-dynamic": "^10",
   "core-js": "^3.15.2",
@@ -426,6 +572,7 @@ The basic dependencies look as follows:
   "@angular/common": "^11",
   "@angular/compiler": "^11",
   "@angular/core": "^11",
+  "@angular/router": "^11",
   "@angular/platform-browser": "^11",
   "@angular/platform-browser-dynamic": "^11",
   "core-js": "^3.15.2",
@@ -445,6 +592,7 @@ The basic dependencies look as follows:
   "@angular/common": "^12",
   "@angular/compiler": "^12",
   "@angular/core": "^12",
+  "@angular/router": "^12",
   "@angular/platform-browser": "^12",
   "@angular/platform-browser-dynamic": "^12",
   "core-js": "^3.15.2",

package/common.d.ts

@@ -1 +1,3 @@
 export * from './esm/SharedModule';
+export * from './esm/NgExtension';
+export * from './esm/ResourceUrlPipe';

package/common.js

@@ -1 +1,3 @@
 export * from './esm/SharedModule';
+export * from './esm/NgExtension';
+export * from './esm/ResourceUrlPipe';

package/esm/NgExtension.d.ts

@@ -0,0 +1,16 @@
+import type { PiletApi } from 'piral-core';
+import * as ngCore from '@angular/core';
+import { ElementRef } from '@angular/core';
+export declare class NgExtension {
+    private elRef;
+    private piral;
+    name: string | undefined;
+    params: object | undefined;
+    constructor(elRef: ElementRef<HTMLElement>, piral: PiletApi);
+    ngAfterContentInit(): void;
+    static ɵfac: ngCore.ɵɵFactoryDeclaration<NgExtension, never>;
+    static ɵcmp: ngCore.ɵɵComponentDeclaration<NgExtension, 'extension-component', never, {
+        name: 'name';
+        params: 'params';
+    }, {}, never, never>;
+}

package/esm/NgExtension.js

@@ -0,0 +1,60 @@
+var NgExtension_1;
+import { __decorate, __metadata, __param } from "tslib";
+import * as ngCore from '@angular/core';
+import { Component, ElementRef, Input, Inject } from '@angular/core';
+const ngc = ngCore;
+const selector = 'extension-component';
+let NgExtension = NgExtension_1 = class NgExtension {
+    constructor(elRef, piral) {
+        this.elRef = elRef;
+        this.piral = piral;
+    }
+    ngAfterContentInit() {
+        this.piral.renderHtmlExtension(this.elRef.nativeElement, {
+            name: this.name,
+            params: this.params,
+        });
+    }
+};
+// @ts-ignore
+NgExtension.ɵfac = 'ɵɵdirectiveInject' in ngc
+    ? (t) => new (t || NgExtension_1)(ngc.ɵɵdirectiveInject(ElementRef), ngc.ɵɵdirectiveInject('piral'))
+    : undefined;
+// @ts-ignore
+NgExtension.ɵcmp = 'ɵɵdefineComponent' in ngc
+    ? ngc.ɵɵdefineComponent({
+        type: NgExtension_1,
+        selectors: [selector],
+        inputs: { name: 'name', params: 'params' },
+        decls: 0,
+        vars: 0,
+        template: () => { },
+        encapsulation: 2,
+    })
+    : undefined;
+__decorate([
+    Input('name'),
+    __metadata("design:type", String)
+], NgExtension.prototype, "name", void 0);
+__decorate([
+    Input('params'),
+    __metadata("design:type", Object)
+], NgExtension.prototype, "params", void 0);
+NgExtension = NgExtension_1 = __decorate([
+    Component({
+        selector,
+        template: '',
+    }),
+    __param(1, Inject('piral')),
+    __metadata("design:paramtypes", [ElementRef, Object])
+], NgExtension);
+export { NgExtension };
+if ('ɵsetClassMetadata' in ngc) {
+    ngc.ɵsetClassMetadata(NgExtension, [
+        {
+            type: Component,
+            args: [{ selector, template: '' }],
+        },
+    ]);
+}
+//# sourceMappingURL=NgExtension.js.map

package/esm/NgExtension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NgExtension.js","sourceRoot":"","sources":["../src/NgExtension.ts"],"names":[],"mappings":";;AACA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAErE,MAAM,GAAG,GAAG,MAAa,CAAC;AAC1B,MAAM,QAAQ,GAAG,qBAAqB,CAAC;AAMvC,IAAa,WAAW,mBAAxB,MAAa,WAAW;IAItB,YAAoB,KAA8B,EAA2B,KAAe;QAAxE,UAAK,GAAL,KAAK,CAAyB;QAA2B,UAAK,GAAL,KAAK,CAAU;IAAG,CAAC;IAEhG,kBAAkB;QAChB,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;YACvD,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAC;IACL,CAAC;CA6BF,CAAA;AA3BC,aAAa;AACN,gBAAI,GACT,mBAAmB,IAAI,GAAG;IACxB,CAAC,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,aAAW,CAAC,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACvG,CAAC,CAAC,SAAU,CAAA;AAEhB,aAAa;AACN,gBAAI,GAST,mBAAmB,IAAI,GAAG;IACxB,CAAC,CAAC,GAAG,CAAC,iBAAiB,CAAC;QACpB,IAAI,EAAE,aAAW;QACjB,SAAS,EAAE,CAAC,QAAQ,CAAC;QACrB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE;QAC1C,KAAK,EAAE,CAAC;QACR,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;QAClB,aAAa,EAAE,CAAC;KACjB,CAAC;IACJ,CAAC,CAAC,SAAU,CAAA;AAtCD;IAAd,KAAK,CAAC,MAAM,CAAC;;yCAAiC;AAC9B;IAAhB,KAAK,CAAC,QAAQ,CAAC;;2CAAmC;AAFxC,WAAW;IAJvB,SAAS,CAAC;QACT,QAAQ;QACR,QAAQ,EAAE,EAAE;KACb,CAAC;IAKqD,WAAA,MAAM,CAAC,OAAO,CAAC,CAAA;qCAAzC,UAAU;GAJ1B,WAAW,CAwCvB;SAxCY,WAAW;AA0CxB,IAAI,mBAAmB,IAAI,GAAG,EAAE;IAC9B,GAAG,CAAC,iBAAiB,CAAC,WAAW,EAAE;QACjC;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;SACnC;KACF,CAAC,CAAC;CACJ"}

package/esm/ResourceUrlPipe.d.ts

@@ -1,7 +1,10 @@
 import type { PiletApi } from 'piral-core';
+import * as ngCore from '@angular/core';
 import { PipeTransform } from '@angular/core';
 export declare class ResourceUrlPipe implements PipeTransform {
     private piral;
     constructor(piral: PiletApi);
     transform(value: string): string;
+    static ɵfac: ngCore.ɵɵFactoryDeclaration<ResourceUrlPipe, never>;
+    static ɵpipe: ngCore.ɵɵPipeDeclaration<ResourceUrlPipe, 'resourceUrl'>;
 }

package/esm/ResourceUrlPipe.js

@@ -1,6 +1,9 @@
+var ResourceUrlPipe_1;
 import { __decorate, __metadata, __param } from "tslib";
+import * as ngCore from '@angular/core';
 import { Inject, Pipe } from '@angular/core';
-let ResourceUrlPipe = class ResourceUrlPipe {
+const ngc = ngCore;
+let ResourceUrlPipe = ResourceUrlPipe_1 = class ResourceUrlPipe {
     constructor(piral) {
         this.piral = piral;
     }
@@ -9,10 +12,32 @@ let ResourceUrlPipe = class ResourceUrlPipe {
         return basePath + value;
     }
 };
-ResourceUrlPipe = __decorate([
+// @ts-ignore
+ResourceUrlPipe.ɵfac = 'ɵɵdirectiveInject' in ngc ? (t) => new (t || ResourceUrlPipe_1)(ngc.ɵɵdirectiveInject('piral', 16)) : undefined;
+// @ts-ignore
+ResourceUrlPipe.ɵpipe = 'ɵɵdefinePipe' in ngc ? ngc.ɵɵdefinePipe({ name: 'resourceUrl', type: ResourceUrlPipe_1, pure: true }) : undefined;
+ResourceUrlPipe = ResourceUrlPipe_1 = __decorate([
     Pipe({ name: 'resourceUrl' }),
     __param(0, Inject('piral')),
     __metadata("design:paramtypes", [Object])
 ], ResourceUrlPipe);
 export { ResourceUrlPipe };
+if ('ɵsetClassMetadata' in ngc) {
+    ngc.ɵsetClassMetadata(ResourceUrlPipe, [
+        {
+            type: Pipe,
+            args: [{ name: 'resourceUrl' }],
+        },
+    ], () => [
+        {
+            type: undefined,
+            decorators: [
+                {
+                    type: Inject,
+                    args: ['piral'],
+                },
+            ],
+        },
+    ]);
+}
 //# sourceMappingURL=ResourceUrlPipe.js.map

package/esm/ResourceUrlPipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceUrlPipe.js","sourceRoot":"","sources":["../src/ResourceUrlPipe.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAiB,MAAM,eAAe,CAAC;AAG5D,IAAa,eAAe,GAA5B,MAAa,eAAe;IAC1B,YAAqC,KAAe;QAAf,UAAK,GAAL,KAAK,CAAU;IAAG,CAAC;IAExD,SAAS,CAAC,KAAa;QACrB,MAAM,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAC3C,OAAO,QAAQ,GAAG,KAAK,CAAC;IAC1B,CAAC;CACF,CAAA;AAPY,eAAe;IAD3B,IAAI,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;IAEf,WAAA,MAAM,CAAC,OAAO,CAAC,CAAA;;GADjB,eAAe,CAO3B;SAPY,eAAe"}
+{"version":3,"file":"ResourceUrlPipe.js","sourceRoot":"","sources":["../src/ResourceUrlPipe.ts"],"names":[],"mappings":";;AACA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAiB,MAAM,eAAe,CAAC;AAE5D,MAAM,GAAG,GAAG,MAAa,CAAC;AAG1B,IAAa,eAAe,uBAA5B,MAAa,eAAe;IAC1B,YAAqC,KAAe;QAAf,UAAK,GAAL,KAAK,CAAU;IAAG,CAAC;IAExD,SAAS,CAAC,KAAa;QACrB,MAAM,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAC3C,OAAO,QAAQ,GAAG,KAAK,CAAC;IAC1B,CAAC;CASF,CAAA;AAPC,aAAa;AACN,oBAAI,GACT,mBAAmB,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,iBAAe,CAAC,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,SAAU,CAAA;AAEtH,aAAa;AACN,qBAAK,GACV,cAAc,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,iBAAe,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,SAAU,CAAA;AAdxG,eAAe;IAD3B,IAAI,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;IAEf,WAAA,MAAM,CAAC,OAAO,CAAC,CAAA;;GADjB,eAAe,CAe3B;SAfY,eAAe;AAiB5B,IAAI,mBAAmB,IAAI,GAAG,EAAE;IAC9B,GAAG,CAAC,iBAAiB,CACnB,eAAe,EACf;QACE;YACE,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;SAChC;KACF,EACD,GAAG,EAAE,CAAC;QACJ;YACE,IAAI,EAAE,SAAS;YACf,UAAU,EAAE;gBACV;oBACE,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,CAAC,OAAO,CAAC;iBAChB;aACF;SACF;KACF,CACF,CAAC;CACH"}

package/esm/RoutingService.d.ts

@@ -10,4 +10,6 @@ export declare class RoutingService implements OnDestroy {
     private invalidRoutes;
     constructor(context: ComponentContext, router: Router, zone: NgZone);
     ngOnDestroy(): void;
+    static ɵfac: (t: any) => any;
+    static ɵprov: any;
 }

package/esm/RoutingService.js

@@ -1,8 +1,11 @@
+var RoutingService_1;
 import { __decorate, __metadata, __param } from "tslib";
+import * as ngCore from '@angular/core';
 import { Inject, Injectable, NgZone, Optional } from '@angular/core';
 import { NavigationError, Router } from '@angular/router';
 import { filter } from 'rxjs/operators';
-let RoutingService = class RoutingService {
+const ngc = ngCore;
+let RoutingService = RoutingService_1 = class RoutingService {
     constructor(context, router, zone) {
         this.context = context;
         this.router = router;
@@ -22,9 +25,7 @@ let RoutingService = class RoutingService {
                     this.zone.run(() => this.router.navigateByUrl(path));
                 }
             });
-            this.subscription = this.router.events
-                .pipe(filter((e) => e instanceof NavigationError))
-                .subscribe((e) => {
+            this.subscription = this.router.events.pipe(filter((e) => e instanceof NavigationError)).subscribe((e) => {
                 const path = e.url;
                 if (!this.invalidRoutes.includes(path)) {
                     this.invalidRoutes.push(path);
@@ -39,7 +40,13 @@ let RoutingService = class RoutingService {
         (_b = this.subscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
     }
 };
-RoutingService = __decorate([
+RoutingService.ɵfac = 'ɵɵinject' in ngc
+    ? (t) => new (t || RoutingService_1)(ngc.ɵɵinject('Context'), ngc.ɵɵinject(Router, 8), ngc.ɵɵinject(NgZone, 8))
+    : undefined;
+RoutingService.ɵprov = 'ɵɵngDeclareInjectable' in ngc
+    ? ngc.ɵɵdefineInjectable({ token: RoutingService_1, factory: RoutingService_1.ɵfac })
+    : undefined;
+RoutingService = RoutingService_1 = __decorate([
     Injectable(),
     __param(0, Inject('Context')),
     __param(1, Optional()),
@@ -48,4 +55,38 @@ RoutingService = __decorate([
         NgZone])
 ], RoutingService);
 export { RoutingService };
+if ('ɵsetClassMetadata' in ngc) {
+    ngc.ɵsetClassMetadata(RoutingService, [
+        {
+            type: Injectable,
+            args: [{ name: 'resourceUrl' }],
+        },
+    ], () => [
+        {
+            type: undefined,
+            decorators: [
+                {
+                    type: Inject,
+                    args: ['Context'],
+                },
+            ],
+        },
+        {
+            type: Router,
+            decorators: [
+                {
+                    type: Optional,
+                },
+            ],
+        },
+        {
+            type: NgZone,
+            decorators: [
+                {
+                    type: Optional,
+                },
+            ],
+        },
+    ]);
+}
 //# sourceMappingURL=RoutingService.js.map

package/esm/RoutingService.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoutingService.js","sourceRoot":"","sources":["../src/RoutingService.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAa,QAAQ,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAGxC,IAAa,cAAc,GAA3B,MAAa,cAAc;IAKzB,YAC4B,OAAyB,EAC/B,MAAc,EACd,IAAY;QAFN,YAAO,GAAP,OAAO,CAAkB;QAC/B,WAAM,GAAN,MAAM,CAAQ;QACd,SAAI,GAAJ,IAAI,CAAQ;QAL1B,kBAAa,GAAG,EAAE,CAAC;QAOzB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE;gBACxC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,EAAE;oBAChD,4BAA4B;oBAC5B,OAAO,SAAS,CAAC;iBACpB;gBACD,MAAM,KAAK,CAAC;YAChB,CAAC,CAAC;YAEF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;gBACtD,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC;gBAExB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;oBACtC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;iBACtD;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM;iBACnC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,eAAe,CAAC,CAAC;iBACjD,SAAS,CAAC,CAAC,CAAkB,EAAE,EAAE;gBAChC,MAAM,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC;gBAEnB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;oBACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC/B;gBAED,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;SACN;IACH,CAAC;IAED,WAAW;;QACT,MAAA,IAAI,CAAC,OAAO,+CAAZ,IAAI,CAAY,CAAC;QACjB,MAAA,IAAI,CAAC,YAAY,0CAAE,WAAW,EAAE,CAAC;IACnC,CAAC;CACF,CAAA;AA7CY,cAAc;IAD1B,UAAU,EAAE;IAOR,WAAA,MAAM,CAAC,SAAS,CAAC,CAAA;IACjB,WAAA,QAAQ,EAAE,CAAA;IACV,WAAA,QAAQ,EAAE,CAAA;6CADiB,MAAM;QACR,MAAM;GARvB,cAAc,CA6C1B;SA7CY,cAAc"}
+{"version":3,"file":"RoutingService.js","sourceRoot":"","sources":["../src/RoutingService.ts"],"names":[],"mappings":"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"}

package/esm/SharedModule.d.ts

@@ -1,3 +1,18 @@
+import * as ngCore from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgExtension } from './NgExtension';
+import { ResourceUrlPipe } from './ResourceUrlPipe';
 export declare class SharedModule {
     static props: {};
+    static ɵfac: ngCore.ɵɵFactoryDeclaration<SharedModule, never>;
+    static ɵmod: ngCore.ɵɵNgModuleDeclaration<SharedModule, [
+        typeof NgExtension,
+        typeof ResourceUrlPipe
+    ], [
+        typeof CommonModule
+    ], [
+        typeof NgExtension,
+        typeof ResourceUrlPipe
+    ]>;
+    static ɵinj: ngCore.ɵɵInjectorDeclaration<SharedModule>;
 }

package/esm/SharedModule.js

@@ -1,18 +1,54 @@
+var SharedModule_1;
 import { __decorate } from "tslib";
+import * as ngCore from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NgExtension } from './extension';
+import { NgExtension } from './NgExtension';
 import { ResourceUrlPipe } from './ResourceUrlPipe';
-let SharedModule = class SharedModule {
+const ngc = ngCore;
+const declarationsDef = [NgExtension, ResourceUrlPipe];
+const exportsDef = [NgExtension, ResourceUrlPipe];
+const importsDef = [CommonModule];
+let SharedModule = SharedModule_1 = class SharedModule {
 };
 SharedModule.props = {};
-SharedModule = __decorate([
+// @ts-ignore
+SharedModule.ɵfac = 'ɵɵinject' in ngc ? (t) => new (t || SharedModule_1)() : undefined;
+// @ts-ignore
+SharedModule.ɵmod = 'ɵɵdefineNgModule' in ngc
+    ? ngc.ɵɵdefineNgModule({
+        type: SharedModule_1,
+    })
+    : undefined;
+// @ts-ignore
+SharedModule.ɵinj = 'ɵɵdefineInjector' in ngc
+    ? ngc.ɵɵdefineInjector({
+        providers: [],
+        imports: [importsDef],
+    })
+    : undefined;
+SharedModule = SharedModule_1 = __decorate([
     NgModule({
-        declarations: [NgExtension, ResourceUrlPipe],
+        declarations: declarationsDef,
         providers: [],
-        imports: [CommonModule],
-        exports: [NgExtension, ResourceUrlPipe],
+        imports: importsDef,
+        exports: exportsDef,
     })
 ], SharedModule);
 export { SharedModule };
+if ('ɵsetClassMetadata' in ngc) {
+    ngc.ɵsetClassMetadata(SharedModule, [
+        {
+            type: NgModule,
+            args: [
+                {
+                    declarations: declarationsDef,
+                    providers: [],
+                    imports: importsDef,
+                    exports: exportsDef,
+                },
+            ],
+        },
+    ]);
+}
 //# sourceMappingURL=SharedModule.js.map

package/esm/SharedModule.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharedModule.js","sourceRoot":"","sources":["../src/SharedModule.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD,IAAa,YAAY,GAAzB,MAAa,YAAY;CAExB,CAAA;AADQ,kBAAK,GAAG,EAAE,CAAC;AADP,YAAY;IANxB,QAAQ,CAAC;QACR,YAAY,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;QAC5C,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC,YAAY,CAAC;QACvB,OAAO,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;KACxC,CAAC;GACW,YAAY,CAExB;SAFY,YAAY"}
+{"version":3,"file":"SharedModule.js","sourceRoot":"","sources":["../src/SharedModule.ts"],"names":[],"mappings":";;AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,GAAG,GAAG,MAAa,CAAC;AAC1B,MAAM,eAAe,GAAG,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AACvD,MAAM,UAAU,GAAG,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAClD,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC,CAAC;AAQlC,IAAa,YAAY,oBAAzB,MAAa,YAAY;CA4BxB,CAAA;AA3BQ,kBAAK,GAAG,EAAE,CAAC;AAElB,aAAa;AACN,iBAAI,GACT,UAAU,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,cAAY,CAAC,EAAE,CAAC,CAAC,CAAC,SAAU,CAAA;AAExE,aAAa;AACN,iBAAI,GAMT,kBAAkB,IAAI,GAAG;IACvB,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC;QACnB,IAAI,EAAE,cAAY;KACnB,CAAC;IACJ,CAAC,CAAC,SAAU,CAAA;AAEhB,aAAa;AACN,iBAAI,GACT,kBAAkB,IAAI,GAAG;IACvB,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC;QACnB,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC,UAAU,CAAC;KACtB,CAAC;IACJ,CAAC,CAAC,SAAU,CAAA;AA3BL,YAAY;IANxB,QAAQ,CAAC;QACR,YAAY,EAAE,eAAe;QAC7B,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,UAAU;KACpB,CAAC;GACW,YAAY,CA4BxB;SA5BY,YAAY;AA8BzB,IAAI,mBAAmB,IAAI,GAAG,EAAE;IAC9B,GAAG,CAAC,iBAAiB,CAAC,YAAY,EAAE;QAClC;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE;gBACJ;oBACE,YAAY,EAAE,eAAe;oBAC7B,SAAS,EAAE,EAAE;oBACb,OAAO,EAAE,UAAU;oBACnB,OAAO,EAAE,UAAU;iBACpB;aACF;SACF;KACF,CAAC,CAAC;CACJ"}

package/esm/bootstrap.js

@@ -13,7 +13,8 @@ export function prepareBootstrap(moduleOrComponent) {
     }
     else {
         // usually contains things like selector, template or templateUrl, changeDetection, ...
-        return [...(getModuleInstance(moduleOrComponent) || createModuleInstance(moduleOrComponent)), moduleOrComponent];
+        const result = getModuleInstance(moduleOrComponent) || createModuleInstance(moduleOrComponent);
+        return [...result, moduleOrComponent];
     }
 }
 export function bootstrap(result, node, props, context) {