Use router in angular2/4 running in webworker

Question

I used these topics Angular CLI generated app with Web Workers and https://github.com/kaikcreator/angular-cli-web-worker to running my entire angular4 application in web worker.

My final question is "How use angular router with angular4 application entirely running in webworker".

My problem is when I use

import { Routes, RouterModule } from '@angular/router';

in AppModule, I have this error :

zone.js:690 Unhandled Promise rejection: No provider for PlatformLocation! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for PlatformLocation!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9492)
at _callFactory (core.es5.js:9558)
at _createProviderInstance$1 (core.es5.js:9506)
at initNgModule (core.es5.js:9456) Error: No provider for PlatformLocation!
at injectionError (http://localhost:4200/webworker.bundle.js:35604:90)
at noProviderError (http://localhost:4200/webworker.bundle.js:35642:12)
at ReflectiveInjector_../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (http://localhost:4200/webworker.bundle.js:37084:19)
at ReflectiveInjector_../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (http://localhost:4200/webworker.bundle.js:37123:25)
at ReflectiveInjector_../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKey (http://localhost:4200/webworker.bundle.js:37055:25)
at ReflectiveInjector_../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_.get (http://localhost:4200/webworker.bundle.js:36924:21)
at resolveNgModuleDep (http://localhost:4200/webworker.bundle.js:43927:25)
at _callFactory (http://localhost:4200/webworker.bundle.js:43993:28)
at _createProviderInstance$1 (http://localhost:4200/webworker.bundle.js:43941:26)
at initNgModule (http://localhost:4200/webworker.bundle.js:43891:28)

Official angular4 webworker documentation doesnt exist ....

Thx for help !

EDIT :

main.ts :

import { enableProdMode } from '@angular/core';
import { bootstrapWorkerUi, WORKER_UI_LOCATION_PROVIDERS } from '@angular/platform-webworker';

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapWorkerUi('../webworker.bundle.js', WORKER_UI_LOCATION_PROVIDERS);

WORKER_UI_LOCATION_PROVIDERS is useless here. I saw (somewhere on the web) that is the good way.

app.module.ts

import { WorkerAppModule } from '@angular/platform-webworker';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './core/core.module';
import { APP_BASE_HREF } from '@angular/common';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    WorkerAppModule,
    CoreModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: environment.baseHref },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

my app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  // { path: '', redirectTo: 'pages', pathMatch: 'full'},
  // { path: '', loadChildren: './main-layout/main-layout.module#MainLayoutModule' },
  { path: '**', redirectTo: '', pathMatch: 'full'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

score 0 · Answer 1 · answered Nov 21 '17 at 14:21

0

Perhaps the problem is due missing NativeScriptRouterModule inside imports the in main.ts file.

Could be also platformBrowserDynamic

Hope it helps (paste your main.ts and app.module.ts files to be more specific please)

answered Nov 21 '17 at 14:21

Luca Taccagni

1,059
6
23

Great thanks to reply. I'm not use "NativeScript". I understood "NativeScript" is "only" for dev angular app on mobile, no ? For do it, I use Cordova (without Ionic cause no time to migrate my project on it). I will edit my question to past files. – dochosa Nov 21 '17 at 15:16

score 0 · Answer 2 · answered Nov 22 '17 at 13:05

0

here working example with routing in web worker. Example I try it with lazy, it works fine

answered Nov 22 '17 at 13:05

shanhaichik

2,436
2
11
12

Thx for your reply. I used other method for optimize my app (ChangeDetectorRef) with detach() and detectChanges(). I ll try your solution more later. – dochosa Nov 28 '17 at 12:54

Use router in angular2/4 running in webworker

2 Answers2