Develop Reference

What does angular scripts optimization do? Angular 14

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.

nativescript-firebase issue to get push token

I implemented the nativescript-firebase (https://github.com/EddyVerbruggen/nativescript-plugin-firebase) plugin in my mobile app. It used to work fine but since I updated to the 11.1.3 version I cannot get the push token. I tried to get back to the 10.6.3 version but it says it is not available anymore when I execute npm install.
Here is what I do in my main.js
import { messaging } from "#nativescript/firebase/messaging";
import { firebase } from "#nativescript/firebase"
firebase.init({
onMessageReceivedCallback: function(message) {
//do stuff
}
}).then(function () {
messaging.getCurrentPushToken().then(token => {
console.log(token)
}).catch(e => {
console.log(e);
})
},function (error) {
console.log("firebase.init error: " + error);
});
This does not log the token but goes into the catch and logs this
Uncomment firebase-messaging in the plugin's include.gradle first
Here is my package.json
{
"name": "*****",
"main": "./src/main.js",
"version": "4.4.0",
"description": "A native application built with NativeScript-Vue",
"author": "*****",
"license": "Propriétaire",
"dependencies": {
"#carployee/openapp": "^1.0.1",
"#nativescript-community/ui-material-bottomnavigationbar": "^6.2.4",
"#nativescript/appavailability": "^2.0.0",
"#nativescript/appversion": "^2.0.0",
"#nativescript/camera": "^5.0.10",
"#nativescript/core": "~8.1.5",
"#nativescript/datetimepicker": "^2.1.9",
"#nativescript/firebase": "^11.1.3",
"#nativescript/imagepicker": "^1.0.6",
"#nativescript/ios": "^8.1.0",
"#nativescript/iqkeyboardmanager": "^2.0.0",
"#nativescript/theme": "^3.0.2",
"#nstudio/nativescript-cardview": "^2.0.1",
"#nstudio/nativescript-loading-indicator": "^4.1.0",
"#nstudio/nativescript-pulltorefresh": "^3.0.1",
"#proplugins/nativescript-purchase": "git+https://gitlab.******",
"#vue/devtools": "^5.3.4",
"nativescript-dna-deviceinfo": "^3.7.3",
"nativescript-feedback": "^2.0.0",
"nativescript-google-maps-sdk": "^3.0.2",
"nativescript-inappbrowser": "^3.1.2",
"nativescript-open-app": "^0.3.0",
"nativescript-phone": "^3.0.2",
"nativescript-socketio": "^3.3.1",
"nativescript-toasty": "^3.0.0-alpha.2",
"nativescript-ui-dataform": "^8.0.1",
"nativescript-ui-listview": "^10.0.2",
"nativescript-ui-sidedrawer": "^10.0.2",
"nativescript-vue": "^2.9.0",
"nativescript-vue-devtools": "^1.5.1",
"nativescript-vue-fonticon": "^1.0.3",
"nativescript-websockets": "^2.0.0",
"npm-check": "^5.9.2",
"npm-check-updates": "^12.0.2"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/preset-env": "^7.16.4",
"#nativescript/android": "~8.1.1",
"#nativescript/webpack": "~5.0.1",
"babel-loader": "^8.2.3",
"nativescript-vue-template-compiler": "^2.9.0",
"nativescript-worker-loader": "~0.12.1",
"sass": "^1.44.0",
"vue-loader": "^15.9.8"
}
}

The message points you to the plugin's include.gradle file, or more specifically,
<app name>/node_modules/#nativescript/firebase/platforms/android/include.gradle
where you want to uncomment the line as shown below:
// Cloud Messaging (FCM)
implementation "com.google.firebase:firebase-messaging:20.1.0"
// implementation "me.leolin:ShortcutBadger:1.1.22#aar"
I expect if you reinstall the plugin you can answer the prompts so that this will get set for you.

How can I use aws-iot-device-sdk NPM module with Angular 11 ? (it throws fs, path, & tls errors on build)

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.

Running Angular 5 app inside webworker causes window object to be undefined

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.
}
]

Karma + Jasmine + Angular2 + Webpack: coreTesting.setBaseTestProviders is not a function

Trying to set up some test system via this article. It's all more or less understandable, but I've got an error which I currently can't resolve.
My karma.entry.js:
require('es6-shim');
require('reflect-metadata');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
const browserTesting = require('#angular/platform-browser-dynamic/testing');
const coreTesting = require('#angular/core/testing');
coreTesting.setBaseTestProviders(
browserTesting.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
browserTesting.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
);
const context = require.context('..\\srs\\', true, /\.spec\.ts$/);
context.keys().forEach(context);
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 2000;
Running "npm test" results in error:
Uncaught TypeError: coreTesting.setBaseTestProviders is not a function
at webpack:///karma/karma.entry.js:15:0 <- karma.entry.js:61
As far as I can guess, require('#angular/core/testing'); doesn't return an object I need. I've seen the similar topics here but so far nothing works.
I understand, that somewhere the dependency is missing but can't pinpoint where exactly.
My karma.conf.js:
'use strict';
module.exports = (config) => {
config.set({
autoWatch: true,
browsers: ['Chrome'],
files: [
'../node_modules/es6-shim/es6-shim.min.js',
'karma.entry.js'
],
frameworks: ['jasmine'],
logLevel: config.LOG_INFO,
phantomJsLauncher: {
exitOnResourceError: true
},
preprocessors: {
'karma.entry.js': ['webpack', 'sourcemap']
},
reporters: ['dots'],
singleRun: false,
webpack: require('..\\webpack\\webpack.test'),
webpackServer: {
noInfo: true
}
});
};
My package.json seems to have all necessary dependencies:
{
...
"dependencies": {
"#angular/common": "^2.2.4",
"#angular/compiler": "^2.2.4",
"#angular/core": "^2.2.4",
"#angular/forms": "^2.2.4",
"#angular/http": "^2.2.4",
"#angular/platform-browser": "^2.2.4",
"#angular/platform-browser-dynamic": "^2.2.4",
"#angular/router": "^3.2.4",
"es6-shim": "^0.35.1",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.0-beta.12",
"zone.js": "^0.6.12"
},
"devDependencies": {
"#types/core-js": "^0.9.35",
"html-webpack-plugin": "^2.24.1",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"phantomjs-prebuilt": "^2.1.13",
"raw-loader": "^0.5.1",
"ts-loader": "^1.2.2",
"tslint": "^4.0.2",
"tslint-loader": "^3.2.1",
"typescript": "^2.0.10",
"typings": "^2.0.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
Could someone please kindly inform me where exactly I have misconfigured the whole thing?

The testing API changed multiple times. The current version of the testing entry file is available in the repository linked from this article.
Basically, what you should now do is to use the exposed TestBed class from the core/testing module, rather than directly calling the now removed setBaseTestProviders method.
...
coreTesting.TestBed.resetTestEnvironment();
coreTesting.TestBed.initTestEnvironment(
browserTesting.BrowserDynamicTestingModule,
browserTesting.platformBrowserDynamicTesting()
);
The TestBed is a class that deals with requirements of the testing environment. You can learn more about it in the Angular's documentation.

Indeed, I have used a deprecated method.