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

时间:2017-11-21 14:06:14

标签: angular web-worker

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

我的最后一个问题是"如何使用角度路由器和angular4应用程序完全在webworker中运行"。

我的问题是当我使用

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

2 个答案:

答案 0 :(得分:0)

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

也可以是platformBrowserDynamic

希望它有所帮助(请将您的main.ts和app.module.ts文件粘贴到更具体的位置)

答案 1 :(得分:0)

这里是web worker中路由的工作示例。 Example 我试试懒惰,它工作正常