带路由器的 web worker 的工作示例
Working example for web worker with router
是否有带路由器的 angular2 BETA 6 web worker 的任何工作示例 (plunkr)?
更新:
我真正的问题是没有关于此测试版的最新文档...但正如建议...
我目前的问题是我可以加载 angular2,但应用程序本身没有启动。
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_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(.应用函数)
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 函数)
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)?
我在 angular 存储库中找到了这个示例:
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
]);
是否有带路由器的 angular2 BETA 6 web worker 的任何工作示例 (plunkr)?
更新:
我真正的问题是没有关于此测试版的最新文档...但正如建议...
我目前的问题是我可以加载 angular2,但应用程序本身没有启动。
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_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(.应用函数)
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 函数)
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)?
我在 angular 存储库中找到了这个示例: 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
]);