Question

对于带路由器的angular2 BETA 6网络工作者，是否有任何工作示例（plunkr）？

更新：

我真正的问题是没有关于此问题的最新文档...但正如所建议的......

我目前的问题是我能够加载angular2，但应用程序本身并未启动。

应用程序/ main.ts

import 'es6-shim';
import 'zone.js/dist/zone.min.js';
import 'reflect-metadata';
import 'rxjs/add/operator/map';
import {platform, Provider} from 'angular2/core';
import {
  WORKER_RENDER_APPLICATION,
  WORKER_RENDER_PLATFORM,
  WORKER_SCRIPT
} from 'angular2/platform/worker_render';

platform([WORKER_RENDER_PLATFORM])
  .application([
    WORKER_RENDER_APPLICATION,
    new Provider(WORKER_SCRIPT, {useValue: 'loader.js'})
  ]);

loader.js

importScripts('jspm_packages/system.src.js', 'config.js');
System.import('./app/worker')
    .catch(function (error) {
    console.error('ERROR @ loader :', error);
});

如果我使用.application函数，我会收到错误：

Error: Cannot use asyncronous app initializers with application. Use asyncApplication instead

worker.ts（.application function）

import {Provider, provide, platform, PLATFORM_DIRECTIVES} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {App} from './app';

import {WORKER_APP_APPLICATION, WORKER_APP_PLATFORM, WORKER_APP_ROUTER} from 'angular2/platform/worker_app';

platform([WORKER_APP_PLATFORM])
    .application([
        WORKER_APP_APPLICATION,
        ROUTER_PROVIDERS,
        HTTP_PROVIDERS,
        WORKER_APP_ROUTER
    ])
     .then((ref) => {
         console.log('bootstrapping', ref);
         ref.bootstrap(App)
     });

如果我使用asyncApplication，则会写出第一个控制台日志，但是在bootstrap函数中第二个不是...

main.ts（.asyncApplication function）

import {Provider, provide, platform, PLATFORM_DIRECTIVES} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {App} from './app';

import {WORKER_APP_APPLICATION, WORKER_APP_PLATFORM, WORKER_APP_ROUTER} from 'angular2/platform/worker_app';

platform([WORKER_APP_PLATFORM])
    .asyncApplication(() => {
        console.log('async app load');
        return Promise.resolve([
            ROUTER_PROVIDERS,
            WORKER_APP_ROUTER,
            WORKER_APP_APPLICATION,
            HTTP_PROVIDERS
        ]);
    })
     .then((ref) => {
         console.log('bootstrapping', ref);
         ref.bootstrap(App)
     });

如何启动Web worker部件以加载主要组件（App）？

Answer 1

我在角度存储库中找到了这个示例： https://github.com/angular/angular/tree/master/modules/playground/src/web_workers/router

实际问题是我没有在main.ts（UI部分）中包含：WORKER_RENDER_ROUTER

也没有添加到W_W部分：

new Provider(LocationStrategy, {useClass: HashLocationStrategy})

如果有人感兴趣，那么完整的代码：

worker.ts：

import 'es6-shim';
import 'zone.js/dist/zone.min.js';
import 'reflect-metadata';
import 'rxjs/add/operator/map';
import {Provider, provide, platform, PLATFORM_DIRECTIVES} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HashLocationStrategy, LocationStrategy} from "angular2/router";
import {HTTP_PROVIDERS} from 'angular2/http';
import {App} from './app';

import {
    WORKER_APP_APPLICATION,
    WORKER_APP_PLATFORM,
    WORKER_APP_ROUTER
} from 'angular2/platform/worker_app';

let platformRef = platform([WORKER_APP_PLATFORM])
    .asyncApplication(null,[
        WORKER_APP_APPLICATION,
        WORKER_APP_ROUTER,
        HTTP_PROVIDERS,
        new Provider(LocationStrategy, {useClass: HashLocationStrategy})
    ]);
platformRef.then((ref) => {
    ref.bootstrap(App)
});

main.ts：

import 'es6-shim';
import 'zone.js/dist/zone.min.js';
import 'reflect-metadata';
import 'rxjs/add/operator/map';
import {platform, Provider} from 'angular2/core';
import {
  WORKER_RENDER_APP,
  WORKER_RENDER_PLATFORM,
  WORKER_SCRIPT,
  WORKER_RENDER_ROUTER
} from 'angular2/platform/worker_render';
import {BrowserPlatformLocation} from "angular2/src/router/browser_platform_location";
import {MessageBasedPlatformLocation} from "angular2/src/web_workers/ui/platform_location";

platform([WORKER_RENDER_PLATFORM])
  .application([
    WORKER_RENDER_APP,
    new Provider(WORKER_SCRIPT, {useValue: 'loader.js'}),
    WORKER_RENDER_ROUTER
  ]);

Web工作者与路由器的工作示例

1 个答案: