Situation:
This app was created some time ago in ionic-v2.
Building this app with the following configuration works:
package.json
Summary
applepie@PoolmangersMini:~/work/ambassador$ cat package.json
{
“name”: “recruitapp”,
“version”: “6.0.0”,
“author”: “Rowan de Graaf”,
“homepage”: “http://poolmanager.nl/”,
“private”: true,
“config”: {
“ionic_copy”: “./config/copy.config.js”,
“ionic_webpack”: “./config/webpack.config.js”,
“ionic_sass”: “./config/sass.config.js”
},
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
“@angular-devkit/build-optimizer”: “^0.6.8”,
“@angular/common”: “4.1.2”,
“@angular/compiler”: “4.1.2”,
“@angular/compiler-cli”: “4.1.2”,
“@angular/core”: “4.1.2”,
“@angular/forms”: “4.1.2”,
“@angular/http”: “4.1.2”,
“@angular/platform-browser”: “4.1.2”,
“@angular/platform-browser-dynamic”: “4.1.2”,
“@ionic-native/camera”: “3.12.1”,
“@ionic-native/core”: “3.10.2”,
“@ionic-native/google-maps”: “3.12.1”,
“@ionic-native/splash-screen”: “3.10.2”,
“@ionic-native/status-bar”: “3.10.2”,
“@ionic/app-scripts”: “3.1.9”,
“@ionic/storage”: “2.0.1”,
“@ngx-translate/core”: “6.0.1”,
“@ngx-translate/http-loader”: “0.0.3”,
“angular2-cookie”: “^1.2.6”,
“chart.js”: “^2.6.0”,
“chartjs-color”: “^2.2.0”,
“chartjs-color-string”: “^0.5.0”,
“color-convert”: “^1.9.2”,
“color-name”: “^1.1.3”,
“cordova”: “^8.0.0”,
“cordova-android”: “6.4.0”,
“cordova-ios”: “4.5.4”,
“cordova-plugin-camera”: “^2.4.1”,
“cordova-plugin-compat”: “^1.2.0”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “^2.2.2”,
“cordova-plugin-whitelist”: “^1.3.1”,
“ionic”: “3.19.1”,
“ionic-angular”: “3.3.0”,
“ionic-gallery-modal”: “^0.2.7”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“localforage”: “^1.7.2”,
“localforage-cordovasqlitedriver”: “^1.7.0”,
“moment”: “^2.22.2”,
“ng2-charts”: “^1.6.0”,
“node-sass”: “^4.10.0”,
“prettier”: “^1.16.4”,
“rxjs”: “5.1.1”,
“sw-toolbox”: “3.6.0”,
“typescript”: “2.3.3”,
“webpack”: “^3.8.1”,
“zone.js”: “0.8.11”
},
“description”: “Hire New Talents with the use of this great app!”,
“cordova”: {
“platforms”: [
“android”,
“ios”
],
“plugins”: {
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“ionic-plugin-keyboard”: {},
“cordova-plugin-camera”: {
“CAMERA_USAGE_DESCRIPTION”: “We need the camera to make a picture of your new recruit!”,
“PHOTOLIBRARY_USAGE_DESCRIPTION”: “We need access to the gallery so we can add a picture of your new recruit!”
}
}
}
}
The current page structure is:
Summary
applepie@PoolmangersMini:~/work/ambassador/src$ tree pages/
pages/
├── README.md
├── activities
│ ├── activities.html
│ ├── activities.module.ts
│ ├── activities.scss
│ └── activities.ts
├── leaderboard
│ ├── leaderboard.html
│ ├── leaderboard.module.ts
│ ├── leaderboard.scss
│ └── leaderboard.ts
├── login
│ ├── README.md
│ ├── login.html
│ ├── login.scss
│ └── login.ts
├── pages.ts
├── profile
│ ├── profile.html
│ ├── profile.module.ts
│ ├── profile.scss
│ └── profile.ts
├── recruitform
│ ├── recruitform.html
│ ├── recruitform.module.ts
│ ├── recruitform.scss
│ └── recruitform.ts
├── recruitmodal
│ ├── recruitmodal.html
│ ├── recruitmodal.module.ts
│ ├── recruitmodal.scss
│ └── recruitmodal.ts
├── recruits
│ ├── recruits.html
│ ├── recruits.module.ts
│ ├── recruits.scss
│ └── recruits.ts
├── tabs
│ ├── README.md
│ ├── tabs.html
│ ├── tabs.scss
│ └── tabs.ts
└── tutorial
├── README.md
├── tutorial.html
├── tutorial.scss
└── tutorial.ts
9 directories, 38 files
the *.ts files have:
Summary
/**
- Generated class for the RecruitformPage page.
- See http://ionicframework.com/docs/components/#navigation for more info
- on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: “page-recruitform”,
templateUrl: “recruitform.html”
})
export class RecruitformPage {
When I am on node < node v12, ionic-app-scripts 3.1.9,
This configuration works.
New install new system, and we are rquired to work with nodev12 now. This triggers a couple of things,
The dependency node-sass 4.7 which is hard install by ionic-app-scripts does not work on node12. So in order to achieve compatibility I did the following.
Check ionic-app-scripts on github, to see when node-sass is increased to ^4.10, this is ionic-app-scripts 3.2.1.
now I can serve and build the application again, however my styles seem to have broken. I had theming in the theme folder, and on other locations but these themes don’t seem to work anymore.
Furthermore the font has changed. I’ve tried digging through the changelogs but I cant seem to find where something regarding my issue shave changed, and I am afraid the theming requires a different structure or scss inclusion. Adding styles to the component does not work in ionicv2, itll get a root error.
[Edit]
Most important changes seem to be,
var(–primary-color) does not seem to be respected, or “filled in” when I inspect element.
The font seems to have changed.