kaikcreator / angular-cli-web-worker Goto Github PK

View Code? Open in Web Editor NEW

42.0 42.0 14.0 878 KB

example on how to configure web workers in angular CLI

TypeScript 42.13% JavaScript 49.98% CSS 3.52% HTML 4.37%

angular-cli-web-worker's People

Contributors

Stargazers

Watchers

Forkers

arupalan glenngr sifawm wiltonlazary sankarseran gogistics johnny333 legacy-account k7daniel nikbabchenko maximsagan sundaravadivel1980 acaceresssit agouriou

angular-cli-web-worker's Issues

Installing packages that have access to document/window breaks the app

Installing such packages as ng2-dragula (that don't support universal) will break the app because they have access to document object or the window object.

Are there any work arounds for this?

npm test broken

Hi,

When I try to run npm test, I get errors.

Here is some output from my local setup following the steps from your stackoverflow post:

$npm test
 
> [email protected] test /Users/kabir/sourcecontrol/overbaard-incubator/webapp
> karma start ./karma.conf.js
 
 
/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/@ngtools/webpack/src/entry_resolver.js:118
        throw new Error('Tried to find bootstrap code, but could not. Specify either '
              ^
Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
    at Object.resolveEntryModuleFromMain (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/@ngtools/webpack/src/entry_resolver.js:118:15)
    at AotPlugin._setupOptions (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/@ngtools/webpack/src/plugin.js:143:50)
    at new AotPlugin (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/@ngtools/webpack/src/plugin.js:26:14)
    at _createAotPlugin (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/@angular/cli/models/webpack-configs/typescript.js:55:12)
    at Object.exports.getNonAotTestConfig (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/@angular/cli/models/webpack-configs/typescript.js:103:19)
    at WebpackTestConfig.buildConfig (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/@angular/cli/models/webpack-test-config.js:17:31)
    at init (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/@angular/cli/plugins/karma.js:79:94)
    at Array.invoke (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/di/lib/injector.js:75:15)
    at Injector.get (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/di/lib/injector.js:48:43)
    at /Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/karma/lib/server.js:143:20
    at Array.forEach (native)
    at Server._start (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/karma/lib/server.js:142:21)
    at Injector.invoke (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/di/lib/injector.js:75:15)
    at Server.start (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/karma/lib/server.js:103:18)
    at Object.exports.run (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/karma/lib/cli.js:280:26)
    at requireCliAndRun (/Users/kabir/sourcecontrol/overbaard-incubator/webapp/node_modules/karma-cli/bin/karma:44:16)
npm ERR! Test failed.  See above for more details.

I got the same problem trying to do the same with a clone of this repository as well.

I will dig into this myself (eventually!) and post back with any fix I come up with.

Found some issues when using router

start with Universal starter app -- https://github.com/angular/universal-starter.git
Use the webpack version
-- This has routing and lazy loaded route by default
Replace BrowserModule with WorkerAppModule -- I followed all the steps listed.

First issue is that lazy loaded routes require importScripts vs JSONP webpack loader - so the target in webpack had to be changed to webworker vs the default web. This appears to have a side affect of causing issues with the CommonChunkPlugin because in order to support 2 different target types in webpack you have to have separate webpack configs.
Second issue once I have changed the target to webpack and removed the common chunk plugin as a work around (not ideal) - I then ran into an issue where I received an error

Attempt to get base href from DOM from WebWorker. You must either provide a value for the APP_BASE_HREF token through DI or use the hash location strategy. ; Zone: ; Task: Promise.then ; Value: Error: Attempt to get base href from DOM from WebWorker. You must either provide a value for the APP_BASE_HREF token through DI or use the hash location strategy.

I tried providing the APP_BASE_HREF like this in my main.ts

bootstrapWorkerUi('webworker.js', [{provide: APP_BASE_HREF, useValue: location.pathname}])

but this did not work. Can you provide any pointers? Have you tried WorkerAppModule with

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

angular 7 version

Any chance of an angular 7 version?

what the error info means?

as the above picture show, when npm start, the console panel will show an error info "TypeError: Argument 2 of DedicatedWorkerGlobalScope.postMessage can't be converted to a sequence.“

what does it means?

thanks

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.