Main.js, vendor.js gone after Karma, Jasmine installation and webpack update

Ionic Framework ionic-v3
1

I added the unit testing framework based on Karma and Jasmine to my ionic 3 project as described here and the refered link. Along the way I had to update webpack to v4 or more because the current Karma or Jasmine version depend on it.

Unit tests now work well but now my whole project fails to run because www/build does not contain main.js, vendor.js and main.css files. The app builds but fails with a blank screen, debugger 404s about the mentioned files.

How can I recreate the files? I can fall back to a previous version before karma and jasmine install and get things back up running, but I would like unit testing run parallel with a working app develop environment…

ionic info

Ionic:

   ionic (Ionic CLI)  : 4.5.0 (/Users/me/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.1.1, (and 9 other plugins)

System:

   NodeJS : v11.4.0 (/Users/me/.nvm/versions/node/v11.4.0/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave
   Xcode  : Xcode 10.1 Build version 10B61

package.json: ...

"scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "test": "karma start ./test-config/karma.conf.js",
    "test-ci": "karma start ./test-config/karma.conf.js --single-run",
    "test-coverage": "karma start ./test-config/karma.conf.js --coverage",
    "e2e": "npm run e2e-update && npm run e2e-test",
    "e2e-test": "protractor ./test-config/protractor.conf.js",
    "e2e-update": "webdriver-manager update --standalone false --gecko false"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "^4.11.0",
    "@ionic-native/geolocation": "^4.10.0",
    "@ionic-native/google-analytics": "^4.17.0",
    "@ionic-native/google-maps": "^4.9.1",
    "@ionic-native/social-sharing": "^4.12.0",
    "@ionic-native/splash-screen": "~4.10.0",
    "@ionic-native/status-bar": "^4.10.1",
    "@ionic/storage": "^2.1.3",
    "chart.js": "^2.7.2",
    "cordova-android": "7.1.4",
    "cordova-ios": "4.5.5",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-google-analytics": "^1.8.3",
    "cordova-plugin-googlemaps": "^2.3.8",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.7.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "~5.4.0",
    "cordova-sqlite-storage": "^2.3.3",
    "es6-promise-plugin": "^4.2.2",
    "gulp": "^3.9.1",
    "ion2-calendar": "^2.2.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "minimist": "^1.2.0",
    "moment": "^2.22.2",
    "ng2-charts": "^1.6.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "webpack": "^4.1.0",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "@types/jasmine": "^3.3.1",
    "@types/node": "^10.12.12",
    "angular2-template-loader": "^0.6.2",
    "html-loader": "^0.5.5",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jasmine": "^3.3.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.1.3",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^3.0.5",
    "null-loader": "^0.1.1",
    "protractor": "^5.4.1",
    "ts-loader": "^5.3.1",
    "ts-node": "^7.0.1",
    "typescript": "^2.8.1"
  },
2

I think here is where you went off the rails. Use versions of Karma/Jasmine that are compatible with the Webpack 3.x that Ionic needs.

3

Ionic 3 isn’t up to date with the new versions of their dependencies and it doesn’t support versions 4.x of webpack. I had the exact same problem and after a while what I did was change from Karma to Jest (also because Karma is slow. Karma with an old version of webpack is slow as hell).

1 Like
4

Incidentally, Ionic 4 does work with Webpack 4.

5

I haven’t tried it, I am waiting until the first stable release. For what I understand it let’s angular do their thing without wrap (and cut) functionalities.

So theoretically you can chance angular versions or your complete framework to another thing and it should work. Am I correct? :thinking:

6

I haven’t tried anything except Angular, but yes I have had luck with Angular 7.1.3, Karma, 3.1.3, Jasmine 3.3 with Ionic 4.

1 Like
7

@rapropos Given the fact that ionic4 is not stable it is not a valid alternative… :slight_smile:

I’ll look to setup Jest, since it seems to be more lightweight than Karma & Jasmine, but I also see it fails to work with ionic4 beta :frowning: Not sure which setup to maintain for the future.

8

@distante Thanks for the tip to use Jest. Works great and much lighter system than Karma with having to start the whole browser every time for testing.