Add router without insertBefore in router-outlet

Author: irustm

package-lock.json

@@ -18,11 +18,13 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.2.11",
+    "@angular/animations": "^8.2.14",
+    "@angular/cdk": "^8.2.3",
     "@angular/common": "~8.2.11",
     "@angular/compiler": "~8.2.11",
-    "@angular/core": "~8.2.11",
+    "@angular/core": "^8.2.14",
     "@angular/forms": "~8.2.11",
+    "@angular/material": "^8.2.3",
     "@angular/platform-browser": "~8.2.11",
     "@angular/platform-browser-dynamic": "~8.2.11",
     "@angular/router": "~8.2.11",

package.json

@@ -9,6 +9,10 @@ import {
 import { NodeguiRendererFactory } from './renderer';
 import { QWindowService } from './window';
 import { ComponentsMap } from './components/components-map';
+import {
+  ViewportScroller,
+  ɵNullViewportScroller as NullViewportScroller
+} from '@angular/common';
 
 @Injectable()
 export class NodeguiErrorHandler implements ErrorHandler {
@@ -27,7 +31,8 @@ export class NodeguiErrorHandler implements ErrorHandler {
       useClass: NodeguiRendererFactory,
       deps: [QWindowService, ComponentsMap]
     },
-    { provide: ErrorHandler, useClass: NodeguiErrorHandler }
+    { provide: ErrorHandler, useClass: NodeguiErrorHandler },
+    { provide: ViewportScroller, useClass: NullViewportScroller }
   ]
 })
 export class NodeguiLibModule {}

projects/angular-nodegui/src/lib/nodegui-lib.module.ts

@@ -88,6 +88,10 @@ export class NodeguiRenderer implements Renderer2 {
   destroy(): void {}
 
   insertBefore(parent: NgComponent, newChild: any, refChild: any): void {
+    // TODO: insert before for router-outlet
+    console.log('insertBefore');
+    console.log(parent, newChild, refChild);
+
     parent.insertBefore(newChild, refChild);
   }
 

projects/angular-nodegui/src/lib/renderer.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { LocationStrategy, LocationChangeListener } from '@angular/common';
+import { UrlTree, DefaultUrlSerializer } from '@angular/router';
+
+@Injectable()
+export class NodeGuiLocationStrategy extends LocationStrategy {
+  private popStateCallbacks = new Array<(_: any) => any>();
+  private currentUrlTree: UrlTree;
+
+  path(includeHash?: boolean): string {
+    return '/';
+  }
+  prepareExternalUrl(internal: string): string {
+    return internal;
+  }
+  pushState(state: any, title: string, url: string, queryParams: string): void {
+    const urlSerializer = new DefaultUrlSerializer();
+    this.currentUrlTree = urlSerializer.parse(url);
+    const urlTreeRoot = this.currentUrlTree.root;
+  }
+  replaceState(
+    state: any,
+    title: string,
+    url: string,
+    queryParams: string
+  ): void {}
+  forward(): void {
+    throw new Error('Method not implemented.');
+  }
+  back(): void {
+    throw new Error('Method not implemented.');
+  }
+  onPopState(fn: LocationChangeListener): void {
+    this.popStateCallbacks.push(fn);
+  }
+  getBaseHref(): string {
+    return '';
+  }
+}

projects/angular-nodegui/src/lib/router/location-strategy.ts

@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import { PlatformLocation, LocationChangeListener } from '@angular/common';
+import { NodeGuiLocationStrategy } from './location-strategy';
+
+@Injectable()
+export class NodeguiPlatformLocation extends PlatformLocation {
+  constructor(private locationStrategy: NodeGuiLocationStrategy) {
+    super();
+  }
+
+  getState(): any {
+    return undefined;
+  }
+
+  // tslint:disable-next-line:member-ordering
+  readonly hostname: string;
+  // tslint:disable-next-line:member-ordering
+  readonly href: string;
+  // tslint:disable-next-line:member-ordering
+  readonly port: string;
+  // tslint:disable-next-line:member-ordering
+  readonly protocol: string;
+
+  getBaseHrefFromDOM(): string {
+    return '/';
+  }
+
+  onPopState(fn: LocationChangeListener): void {
+    this.locationStrategy.onPopState(fn);
+  }
+
+  onHashChange(fn: LocationChangeListener): void {}
+
+  get search(): string {
+    return '';
+  }
+  get hash(): string {
+    return '';
+  }
+  get pathname(): string {
+    return this.locationStrategy.path();
+  }
+  set pathname(newPath: string) {
+    throw new Error('NodeguiPlatformLocation set pathname - not implemented');
+  }
+
+  pushState(state: any, title: string, url: string): void {
+    this.locationStrategy.pushState(state, title, url, null);
+  }
+
+  replaceState(state: any, title: string, url: string): void {
+    this.locationStrategy.replaceState(state, title, url, null);
+  }
+
+  forward(): void {
+    throw new Error('NodeguiPlatformLocation.forward() - not implemented');
+  }
+
+  back(): void {
+    this.locationStrategy.back();
+  }
+}

projects/angular-nodegui/src/lib/router/platform-location.ts

@@ -0,0 +1,55 @@
+import {
+  NgModule,
+  Optional,
+  SkipSelf,
+  NO_ERRORS_SCHEMA,
+  ModuleWithProviders
+} from '@angular/core';
+import { NodeGuiLocationStrategy } from './location-strategy';
+import { LocationStrategy, PlatformLocation } from '@angular/common';
+import { NodeguiPlatformLocation } from './platform-location';
+import { RouterModule, Routes, ExtraOptions } from '@angular/router';
+
+const NS_ROUTER_PROVIDERS = [
+  {
+    provide: NodeGuiLocationStrategy,
+    useFactory: provideLocationStrategy,
+    deps: [[NodeGuiLocationStrategy, new Optional(), new SkipSelf()]]
+  },
+  { provide: LocationStrategy, useExisting: NodeGuiLocationStrategy },
+  NodeguiPlatformLocation,
+  { provide: PlatformLocation, useExisting: NodeguiPlatformLocation }
+];
+
+@NgModule({
+  imports: [RouterModule],
+  exports: [RouterModule],
+  schemas: [NO_ERRORS_SCHEMA]
+})
+export class NodeguiRouterModule {
+  static forRoot(
+    routes: Routes,
+    config?: ExtraOptions
+  ): ModuleWithProviders<NodeguiRouterModule> {
+    return {
+      ngModule: NodeguiRouterModule,
+      providers: [
+        ...RouterModule.forRoot(routes, config).providers,
+        ...NS_ROUTER_PROVIDERS
+      ]
+    };
+  }
+
+  static forChild(routes: Routes): ModuleWithProviders<NodeguiRouterModule> {
+    return {
+      ngModule: NodeguiRouterModule,
+      providers: RouterModule.forChild(routes).providers
+    };
+  }
+}
+
+export function provideLocationStrategy(
+  locationStrategy: NodeGuiLocationStrategy
+): NodeGuiLocationStrategy {
+  return locationStrategy ? locationStrategy : new NodeGuiLocationStrategy();
+}

projects/angular-nodegui/src/lib/router/router.module.ts

@@ -6,3 +6,4 @@ export * from './lib/platform-dynamic';
 export * from './lib/platform-static';
 export * from './lib/nodegui-lib.module';
 export * from './lib/http-fetch-backend';
+export * from './lib/router/router.module';

projects/angular-nodegui/src/public-api.ts

@@ -2,13 +2,17 @@
   <view id="app">
     <image id="image" [src]="'./src/assets/angular.png'" [aspectRatioMode]="aspectRatioMode"></image>
 
-    <app-hello [name]="name"></app-hello>
+    <!-- <app-hello [name]="name"></app-hello> -->
 
     <text>Github username</text>
     <linedit [text]="name" [placeholderText]="'Insert github username'" (textChanged)="textChanged($event)"></linedit>
 
+    <button (clicked)="setRoute()">
+      to home route
+    </button>
     <!-- <checkbox [checked]="true"></checkbox>
     <checkbox [checked]="true" [enabled]="false"></checkbox>
+
     <button [style.background-color]="'green'" (clicked)="setName()">
       Green button
     </button>
@@ -22,5 +26,6 @@
       [value]="20"
     >
     </spinbox> -->
+    <router-outlet></router-outlet>
   </view>
 </window>