I updated my project to angular v14 from v9. Until v12 there was no problem but now I can't build it anymore. It failes with an Error: Optimization error [default-src_app_main_collection_module_ts.js]: SyntaxError: Unexpected token: punc ({).
If in angular.json I disable scripts optimization ( { "configurations": { "production": { "optimization": { "scripts": false }}}} ), the error does not appear. I think it might has something to do with the transcription from ts to js files but I do not know whats causing the problem.
So there are two questions:
Do you know something about this error? (There may be an incompatibility of typescript transcription methode I use and the angular 14 optimizer but I could not find it.)
What does script optimization do? If the scripts optimization is not important I will just disable it.
Thanks for your help in advance!
"dependencies": {
"#angular/animations": "^14.2.7",
"#angular/cdk": "14.2.5",
"#angular/common": "^14.2.7",
"#angular/compiler": "^14.2.7",
"#angular/core": "^14.2.7",
"#angular/flex-layout": "^14.0.0-beta.41",
"#angular/forms": "^14.2.7",
"#angular/material": "^14.2.5",
"#angular/platform-browser": "^14.2.7",
"#angular/platform-browser-dynamic": "^14.2.7",
"#angular/router": "14.2.7",
"#auth0/angular-jwt": "^5.0.1",
"#editorjs/editorjs": "^2.25.0",
"#editorjs/paragraph": "^2.8.0",
"#flowjs/flow.js": "2.14.1",
"#nicky-lenaers/ngx-scroll-to": "^14.0.0",
"#stomp/stompjs": "^6.1.0",
"#types/jquery": "3.5.14",
"#types/resize-observer-browser": "^0.1.7",
"#types/sockjs-client": "^1.5.0",
"angular-resizable-element": "^3.4.0",
"angular-resize-event": "^2.1.0",
"angular-shepherd": "^14.0.0",
"angular-svg-round-progressbar": "^9.0.0",
"angular2-virtual-scroll": "0.4.16",
"copy-image-clipboard": "^2.1.2",
"core-js": "^3.26.0",
"dompurify": "^2.1.1",
"event-source-polyfill": "^1.0.21",
"fs-extra": "^10.1.0",
"git-describe": "^4.0.4",
"html2canvas": "^1.4.1",
"jquery": "^3.5.1",
"jquery.scrollto": "2.1.3",
"jstree": "^3.3.10",
"material-design-icons": "^3.0.1",
"material-icons": "^1.10.8",
"moment": "^2.29.3",
"ng-recaptcha": "^10.0.0",
"ngx-clipboard": "14.0.1",
"ngx-contextmenu": "^6.0.0",
"ngx-infinite-scroll": "^14.0.0",
"ngx-perfect-scrollbar": "^10.0.1",
"ngx-scrollbar": "^10.0.1",
"overlayscrollbars": "1.13.0",
"rxjs": "^6.6.7",
"shepherd.js": "^10.0.1",
"sockjs-client": "^1.5.1",
"tslib": "^2.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.2.6",
"#angular/cli": "14.2.6",
"#angular/compiler-cli": "^14.2.7",
"#angular/language-service": "^14.2.7",
"#types/jasmine": "^4.3.0",
"#types/node": "^16.11.7",
"codelyzer": "^6.0.0",
"hammerjs": "^2.0.8",
"husky": "^4.3.8",
"jasmine-core": "^4.4.0",
"jasmine-reporters": "^2.5.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"karma-junit-reporter": "2.0.1",
"lint-staged": "^13.0.3",
"ng-mocks": "^14.3.1",
"ng-packagr": "^14.2.2",
"prettier": "^1.19.1",
"protractor": "~7.0.0",
"puppeteer": "^19.2.0",
"sonar-scanner": "^3.1.0",
"ts-node": "^10.9.1",
"tslint": "~6.1.0",
"tslint-config-prettier": "^1.18.0",
"typescript": "^4.8.4"
},
so if you look at their source code, looks like only thing optimization do is just run the compile code against esbuild.transform to minify, and run the result agaisnt tersor to optimize bundle size. so it's likely you have syntax in the file that either of this plugin didn't like. maybe you could run it against --verbose mode to get more insight.
here's their javascript-optimizer-worker.ts for you to look at.
https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/webpack/plugins/javascript-optimizer-worker.ts
The problem was that I used esNext as target in tsconfig.json. This did not work together with the outdated tslint installation. The solution was to use es2020 as target in tsconfig and refactor tslint with eslint.
Related
I have a page written in tsx that keeps crashing on load with the error client.watchQuery cannot be called with fetchPolicy set to "standby", even though the query in question is useLazyQuery (so it hasn't run yet), and has the option fetchPolicy: 'no-cache'. It crashes for me, but not for my teammates, which makes me think it might have something to do with package versions of maybe my local typescript, but I've set and re-set it every way I can think of with no improvement. The relevant code and package.json are below. Any insight at all would be wonderful.
// myfile.tsx
const [getRoles] = useLazyQuery(GET_ALL_ACCOUNT_ROLES, {
fetchPolicy: 'no-cache',
onError: (e) => {
console.error(e.message);
showPrompt({ type: 'error', message: 400 });
},
onCompleted: async (data) => {
const {
getAllAccountRoles: { data: res }
} = data;
setAllRoles(res);
}
});
package.json
"dependencies": {
"#apollo/react-hooks": "^4.0.0",
"#aws-amplify/api": "^4.0.13",
"#aws-amplify/auth": "^4.1.3",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#loadable/component": "^5.15.0",
"#mui/icons-material": "^5.1.0",
"#mui/material": "^5.1.0",
"#mui/system": "^5.1.0",
"#reach/router": "^1.3.4",
"#rinxun/custom-questions": "^1.1.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-context": "^1.0.20",
"apollo-link-http": "^1.5.17",
"aws-appsync-auth-link": "^3.0.6",
"check-equal": "^1.0.7",
"clsx": "^1.1.1",
"dotenv": "^10.0.0",
"env-cmd": "^10.1.0",
"mockjs": "^1.1.0",
"qrcode.react": "^1.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-scripts": "4.0.3",
"store": "^2.0.12",
"uuid": "^8.3.2"
},
"devDependencies": {
"#storybook/addon-actions": "^6.3.2",
"#storybook/addon-essentials": "^6.3.2",
"#storybook/addon-links": "^6.3.2",
"#storybook/node-logger": "^6.3.2",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.3.2",
"#types/aws4": "^1.5.2",
"#types/jest": "^26.0.24",
"#types/loadable__component": "^5.13.4",
"#types/qrcode.react": "^1.0.2",
"#types/react": "^17.0.15",
"#types/react-dom": "^17.0.9",
"#types/uuid": "^8.3.1",
"#typescript-eslint/eslint-plugin": "^4.29.1",
"#typescript-eslint/parser": "^4.29.1",
"aws4": "^1.11.0",
"babel-eslint": "^10.1.0",
"babel-loader": "8.1.0",
"eslint": "^7.32.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"graphql": "^15.5.1",
"lint-staged": "^11.1.1",
"prettier": "2.3.2",
"typescript": "^4.3.5",
"web-vitals": "^1.0.1"
},
I was having a similar problem. Traced it back to the issue useQuery doesn't seem to use defaultOptions in 3.5 in #apollo/client (a dependency of #apollo/react-hooks).
Solution for me was to downgrade by setting "#apollo/client": "~3.4.0" in the package.json and run npm install. Check your package-lock.json to ensure you've replaced your 3.5.x version.
#apollo/react-hooks has a dependency of #apollo-client.
If you have imported useQuery from #apollo/react-hooks, then you need to import useQuery/useLazyQuery from #apollo-client instead of #apollo/react-hooks, along with the version lower than 3.5.
I scoured the internet for this error on a build with an existing react app that was using nwb before finally stumbling upon this. In my case, the apollo client version was 3.0.2. Updating my package.json "#apollo/client": "~3.4.0" and re running npm i finally did the trick. Thank you #GratefulGuest!
I maintain an browser-based Angular app that was at version 5.6. This app has two components that subscribe to an IOT topic and listen for updates (no pub, just sub).
We need to upgrade to Agnular 11.0.3. I have completed that work. But now the aws-iot-device-sdk NPM module caucuses these errors when I try to run the local web server or run a build:
Error: Can't resolve 'fs' in '[PATH_TO]/node_modules/aws-iot-device-sdk/common/lib'
Error: Can't resolve 'path' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device'
Error: Can't resolve 'fs' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device'
Error: Can't resolve 'tls' in '[PATH_TO]/node_modules/aws-iot-device-sdk/device/lib'
I have spent many hours pulling my hair out on this issue. Our front-end (browser) IOT code has been working perfectly for the last few years. But the upgrade to Angular 11.0.3 has to happen and this issue is a big blocker.
SAMPLE CODE FROM OUR APPLICATION:
(Our package.json is at the end)
The xxxx-app.component.ts file:
import { AwsIotService } from '../../shared/awsIot/awsIot.service';
this.awsIotService.getNewIotConnection(this.iotTopic, this.iotUrl, (iotClient) => {
//cache the iotClient
this.iotClient = iotClient;
//handle the iotClient's message event
iotClient.on('message', (topic, message) => {
// process the message here:
console.log('IOT Message received:');
console.dir(message);
});
});
awsIotService.ts:
In the code below, "iotUrl" points to a custom service we wrote that provides the details needed by the browser-based Angular app in order to connect and subscribe:
awsIot = require('aws-iot-device-sdk'); //simply requiring that NPM module causes the errors stated above
getNewIotConnection (topic, iotUrl, callback) {
this.httpClient.get(iotUrl).subscribe(responseData => {
const client = this.awsIot.device({
port: 443,
protocol: 'wss',
region: responseData.region,
host: responseData.iotEndpoint,
secretKey: responseData.secretKey,
accessKeyId: responseData.accessKey,
sessionToken: responseData.sessionToken,
});
// subscribe to the topic
client.on('connect', () => client.subscribe(topic));
// call the callback
callback(client);
});
}
UP-TO-DATE SUGGESTIONS THAT I HAVE TRIED:
1 - I have tried using https://www.npmjs.com/package/aws-iot-device-sdk-v2
....but have not found the documentation helpful... I hope I am missing something here.
2 I have tried AWS amplify and followed this tutorial:
https://docs.amplify.aws/start/getting-started/installation/q/integration/angular
...but using AWS amplify to solve this issue would require a re-work of the back-end we built and seems like getting a new transmission for a flat tire (i.e. just need to subscribe to an IOT topic).
OLDER WORKAROUNDS THAT I HAVE TRIED:
3 I tried adding this to package.json:
"browser": {
"fs": false,
"path": false,
"os": false
}
...that did not work.
4 I tried adding this to package.json:
"dependencies": {
...other packages
"mqtt": "2.15.1",
"minimist": "1.2.0",
"websocket-stream": "^5.0.1",
"crypto-js": "3.1.6"
}
...that did not work.
5 I tried the patch.js approach detailed here:
https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d
...that did not work.
6 I tried adding this to webpack.config.js :
resolve: {
fallback: {
fs: false
}
}
...that did not work.
7 I tried adding this to webpack.config.js :
node: {
fs: 'empty'
}
...that did not work (only works in older WebPack.)
Our package.json (just dependencies & devDependencies):
"dependencies": {
"#angular/animations": "^11.0.3",
"#angular/cdk": "^11.0.1",
"#angular/common": "^11.0.3",
"#angular/core": "^11.0.3",
"#angular/forms": "^11.0.3",
"#angular/platform-browser": "^11.0.3",
"#angular/platform-browser-dynamic": "^11.0.3",
"#angular/router": "^11.0.3",
"#mapbox/mapbox-gl-draw": "^1.2.0",
"#mapbox/mapbox-gl-geocoder": "^2.2.0",
"#ng-bootstrap/ng-bootstrap": "^8.0.0",
"#turf/helpers": "^6.0.0",
"#turf/inside": "^5.0.0",
"#turf/turf": "^5.1.6",
"#types/lodash": "^4.14.165",
"#types/unist": "^2.0.0",
"angular-calendar": "^0.28.22",
"aws-iot-device-sdk": "^2.2.6",
"core-js": "^3.6.4",
"date-fns": "^2.16.1",
"intl": "^1.2.4",
"jquery": "^3.1.1",
"lodash": "^4.17.20",
"mapbox-gl": "^2.0.0",
"moment": "^2.12.0",
"moment-timezone": "^0.5.27",
"ng2-datepicker": "^3.1.1",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.6.3",
"selenium-webdriver": "^3.6.0",
"tslib": "^2.0.0",
"zone.js": "^0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1100.3",
"#angular/cli": "^11.0.3",
"#angular/compiler": "^11.0.3",
"#angular/compiler-cli": "^11.0.3",
"#ngtools/webpack": "^11.0.3",
"#types/jasmine": "^3.6.2",
"#types/jquery": "^2.0.34",
"#types/node": "^14.14.10",
"#webpack-cli/serve": "^1.1.0",
"angular-router-loader": "^0.8.5",
"angular2-template-loader": "^0.6.2",
"codelyzer": "^6.0.0",
"copy-webpack-plugin": "^6.3.2",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"exports-loader": "^1.1.1",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"jasmine-core": "^3.6.0",
"jasmine-spec-reporter": "^5.0.0",
"karma": "^5.2.3",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^2.0.3",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"karma-mocha-reporter": "^2.2.5",
"mini-css-extract-plugin": "^1.0.0",
"postcss": "^8.1.13",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-nested": "^5.0.2",
"protractor": "^7.0.0",
"raw-loader": "^1.0.0",
"rimraf": "^3.0.2",
"retyped-stripe-tsd-ambient": "^0.0.0-0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"script-ext-html-webpack-plugin": "^2.1.5",
"style-loader": "^2.0.0",
"to-string-loader": "^1.1.6",
"ts-loader": "^8.0.11",
"ts-node": "^8.3.0",
"tslint": "^6.1.0",
"typescript": "4.0.3",
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
Does this help? The author seemed to have/avoid the same trouble as you. He mentions:
"browser": {
"fs": false,
"tls": false,
"path": false
},
I'm using the following environment:
Angular CLI: 12.2.13
Node: 16.13.0 (Unsupported)
Package Manager: npm 8.1.0
OS: linux x64
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1202.13
#angular-devkit/build-angular 12.2.13
#angular-devkit/core 12.2.13
#angular-devkit/schematics 12.2.13
#angular/cdk 12.2.12
#schematics/angular 12.2.13
ng-packagr 12.2.5
rxjs 6.6.7
typescript 4.3.5
And in order to complement the approach of #kackle123, the following worked for me in package.json:
"browser": {
"http": false,
"https": false,
"net": false,
"path": false,
"stream": false,
"tls": false,
"fs": false
}
But it only mute the error outputs, and the package will not work anyways.
Hello i'm trying setup an old code react native version>0.57. Whenever i'm trying to run i'm getting this error Can't find variable: ReactPropTypes. i checked the whole code everywhere even i checked the node module nothing is wrong present i don't known what to do now. This is
my package.json file.
"dependencies": {
"crypto-js": "^3.1.9-1",
"react": "16.6.3",
"react-native": "0.57.8",
"react-native-3d-model-view": "^1.2.0",
"react-native-camera": "^1.6.4",
"react-native-customisable-switch": "^0.1.0",
"react-native-datepicker": "^1.7.2",
"react-native-easy-grid": "^0.2.1",
"react-native-elements": "^0.19.1",
"react-native-facebook-login": "^1.6.1",
"react-native-fetch-blob": "^0.10.8",
"react-native-fs": "^2.13.3",
"react-native-gesture-handler": "^1.0.12",
"react-native-icon-badge": "^1.1.3",
"react-native-image-marker": "^0.3.9",
"react-native-image-picker": "^0.28.0",
"react-native-imagepicker": "^2.0.0",
"react-native-location": "^2.1.1",
"react-native-maps": "^0.22.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-modal-picker": "0.0.16",
"react-native-pdf": "^5.0.11",
"react-native-pdf-view": "^0.3.2",
"react-native-picker-dropdown": "^0.1.2",
"react-native-progress": "^3.5.0",
"react-native-push-notification": "^3.1.2",
"react-native-share": "^1.1.3",
"react-native-side-menu": "^1.1.3",
"react-native-size-matters": "^0.1.6",
"react-native-stripe": "^1.2.2",
"react-native-stripe-api": "^0.1.0",
"react-native-switch": "^1.5.0",
"react-native-table-component": "^1.2.0",
"react-native-vector-icons": "^4.6.0",
"react-native-view-shot": "^2.5.0",
"react-native-zip-archive": "^3.0.1",
"react-navigation": "^3.0.9",
"react-notification-badge": "^1.4.0",
"react-viro": "^2.7.3",
"rn-fetch-blob": "^0.10.15",
"three": "^0.100.0",
"tipsi-stripe": "^7.2.0",
"toggle-switch-react-native": "^2.0.2"
},
Any help will be appreciated. i'm running this in android.
That's probably because in your code somewhere you might have used React Proptypes.
This is particularly a type checking library where you can define about the type casted variables which you pass as props whether they need to be in string or a integer or a array or a function etc. Try importing it in the page where you used but before that install the library. Prop type is used for strict coding structure.
Try the steps here to install the library.
When running a unit test with Mocha we are getting the following token exception which points to Babel not transpiling.
node_modules/expo/src/Expo.js:2
import './environment/validate';
^^^^^^
SyntaxError: Unexpected token import
The mocha test points to a file that imports Constants from expo
import { Constants } from 'expo'
const config = Constants.manifest.extra
This is how the mocha opts and babel are configured
test/mocha.opts
--recursive
--require babel-register
.babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Dependencies
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^7.2.3",
"chai": "^4.1.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"jest-expo": "^24.0.0",
"mocha": "^5.0.0",
"react-native-scripts": "1.0.0",
"react-test-renderer": "16.0.0-alpha.6",
"rimraf": "^2.6.2",
"sinon": "^4.2.0"
},
"dependencies": {
"axios": "^0.16.2",
"dot-object": "^1.7.0",
"expo": "^24.0.0",
"google-libphonenumber": "^3.0.5",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"moment": "^2.19.3",
"prop-types": "^15.5.10",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
"react-native-google-places-autocomplete": "^1.3.6",
"react-native-modal": "^4.1.1",
"react-native-modal-datetime-picker": "^4.12.0",
"react-native-swipeable": "^0.6.0",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "^1.0.0-beta.21",
"react-redux": "^5.0.5",
"redux": "^3.6.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.15.3",
"redux-thunk": "^2.2.0",
"styled-components": "^2.0.1"
}
}
We are running
yarn mocha
I just faced a similar error - many of my suites would break after I used Expo.AuthSession in a single file.
I fixed my issue by adding
jest.mock('expo', () => ({
AuthSession: {
getRedirectUrl: jest.fn(),
},
}));
to my global mock file.
I am trying to upgrade this (ngx-admin) free Angular template to Angular 5 and then trying to run the whole app inside WebWorker as mentioned in this SO Post.
I successfully upgraded the app to Angular 5 and it is working fine but when I try to configure the app to run inside Webworker it gives me following error:
The complete code (modified to Angular 5 and webworker) can be found here
I tried to add DefinePlugin in my webpack config but no luck.
webpack.config.json:
new DefinePlugin({
window: undefined,
document: undefined
}),
I was able to run new empty angular-cli application inside webworker but I am unable to run this template inside webworker. I guess there is some node package which is creating issue.
Package.json:
{
"scripts": {
"ng": "ng",
"conventional-changelog": "conventional-changelog",
"e2e": "protractor ./protractor.conf.js",
"docs": "compodoc -p src/tsconfig.app.json -d docs",
"docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
"build": "webpack",
"start": "webpack-dev-server --port=4200",
"test": "karma start ./karma.conf.js",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
},
"dependencies": {
"#agm/core": "1.0.0-beta.2",
"#angular/animations": "5.1.2",
"#angular/common": "5.1.2",
"#angular/compiler": "5.1.2",
"#angular/core": "5.1.2",
"#angular/forms": "5.1.2",
"#angular/http": "5.1.2",
"#angular/platform-browser": "5.1.2",
"#angular/platform-browser-dynamic": "5.1.2",
"#angular/platform-server": "5.1.2",
"#angular/platform-webworker": "^5.1.2",
"#angular/platform-webworker-dynamic": "^5.1.2",
"#angular/router": "5.1.2",
"#asymmetrik/angular2-leaflet": "^2.2.1",
"#nebular/auth": "2.0.0-rc.3",
"#nebular/theme": "2.0.0-rc.3",
"#ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
"#swimlane/ngx-charts": "^7.0.1",
"angular2-chartjs": "0.3.0",
"angular2-leaflet": "^0.1.0",
"angular2-toaster": "4.0.0",
"bootstrap": "4.0.0-beta.2",
"chart.js": "2.5.0",
"ckeditor": "4.6.2",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"d3": "4.8.0",
"font-awesome": "4.7.0",
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "^1.2.0",
"nebular-icons": "1.0.6",
"ng2-ckeditor": "1.1.9",
"ng2-smart-table": "1.1.0",
"ng2-tree": "2.0.0-alpha.10",
"ngx-charts": "^3.0.2",
"ngx-echarts": "1.2.2",
"normalize.css": "6.0.0",
"pace-js": "1.0.2",
"roboto-fontface": "0.8.0",
"rxjs": "5.5.6",
"socicon": "3.0.5",
"tether": "1.4.0",
"tinymce": "4.5.7",
"typeface-exo": "0.0.22",
"web-animations-js": "2.2.5",
"zone.js": "0.8.19"
},
"devDependencies": {
"#angular/cli": "1.5.0",
"#angular/compiler-cli": "5.1.2",
"#angular/language-service": "5.1.2",
"#compodoc/compodoc": "1.0.5",
"#types/d3-color": "1.0.4",
"#types/jasmine": "2.5.54",
"#types/jasminewd2": "2.0.3",
"#types/leaflet": "^1.2.4",
"#types/node": "8.5.2",
"codelyzer": "3.2.1",
"conventional-changelog-cli": "1.3.4",
"husky": "0.13.3",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.1",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"npm-run-all": "4.1.2",
"protractor": "5.1.2",
"rimraf": "2.6.1",
"stylelint": "7.13.0",
"ts-node": "3.2.2",
"tslint": "5.7.0",
"tslint-language-service": "0.9.6",
"typescript": "2.6.2",
"webpack-dev-server": "~2.9.3",
"webpack": "~3.8.1",
"autoprefixer": "^6.5.3",
"css-loader": "^0.28.1",
"cssnano": "^3.10.0",
"exports-loader": "^0.6.3",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.29.0",
"less-loader": "^4.0.5",
"postcss-loader": "^1.3.3",
"postcss-url": "^5.1.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"source-map-loader": "^0.2.0",
"istanbul-instrumenter-loader": "^2.0.0",
"style-loader": "^0.13.1",
"stylus-loader": "^3.0.1",
"url-loader": "^0.6.2",
"circular-dependency-plugin": "^3.0.0",
"webpack-concat-plugin": "1.4.0",
"copy-webpack-plugin": "^4.1.1",
"uglifyjs-webpack-plugin": "1.0.0"
}
}
Web workers does not run in a window and does therefore not have the window object.
However, if you are using libraries that use the window object, you can assign it yourself using the self variable at the top of your code.
const window = self;
From MDN:
A worker is an object created using a constructor (e.g. Worker()) that
runs a named JavaScript file — this file contains the code that will
run in the worker thread; workers run in another global context that
is different from the current window. Thus, using the window shortcut
to get the current global scope (instead of self) within a Worker will
return an error.
The worker context is represented by a DedicatedWorkerGlobalScope
object in the case of dedicated workers (standard workers that are
utilized by a single script; shared workers use
SharedWorkerGlobalScope). A dedicated worker is only accessible from
the script that first spawned it, whereas shared workers can be
accessed from multiple scripts.
You have to add this to the webpack config file:
output: {
...
globalObject: "this"
}
Edit:
The previous solution is a little bit tricky. If you really make a webworker bundle, you'll have to use webpack multiple targets. (Webpack version >= 4.12.0)
export.module= [
{
target: 'web',
// Webpack config here for bundle that will work in UI thread.
},
{
target: 'webworker',
// Webpack config here for bundle that will work in the worker.
}
]