在 webworker 中运行的 angular2/4 中使用路由器

Question

我使用这些主题 Angular CLI generated app with Web Workers 和 https://github.com/kaikcreator/angular-cli-web-worker 在 web worker 中运行我的整个 angular4 应用程序。

我的最后一个问题是“如何将 angular 路由器与完全在 webworker 中运行的 angular4 应用程序一起使用”。

我的问题是当我使用时

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

在 AppModule 中，我有这个错误：

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)

官方 angular4 webworker 文档不存在....

谢谢帮助！

编辑：

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 在这里没用。我看到（在网络上的某个地方）这是个好方法。

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 { }

我的 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 {}

Answer 1

这里是在 web Worker 中使用路由的工作示例。 Example 我偷懒试了一下，效果很好

Answer 2

也许问题是由于缺少 NativeScriptRouterModule 在 main.ts 文件中导入。

也可以是platformBrowserDynamic

希望对您有所帮助（请粘贴您的 main.ts 和 app.module.ts 文件以使其更具体）