Hello guys,
I’m using live reload and every time the browser refreshes because of my code changes, my whole design is all weirdly broken. Does anyone know what could be the reason for this? There are no errors in the chrome console.
I attached two screenshots where you can see, how it looks normally and how it looks after a reload.
All components were broken after reload, not only on this page.
I’m using the newest ionic/angular version and I’m starting the dev environment with “ionic serve”.
When I restart the server with “ionic serve”, all components are okay again.
{
"name": "furfriend_frontend",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"@angular/service-worker": "^16.0.0",
"@capacitor/app": "5.0.6",
"@capacitor/core": "5.4.0",
"@capacitor/haptics": "5.0.6",
"@capacitor/keyboard": "5.0.6",
"@capacitor/status-bar": "5.0.6",
"@ionic/angular": "^7.0.0",
"@ionic/pwa-elements": "^3.2.2",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.0",
"@angular-eslint/builder": "^16.0.0",
"@angular-eslint/eslint-plugin": "^16.0.0",
"@angular-eslint/eslint-plugin-template": "^16.0.0",
"@angular-eslint/schematics": "^16.0.0",
"@angular-eslint/template-parser": "^16.0.0",
"@angular/cli": "^16.0.0",
"@angular/compiler-cli": "^16.0.0",
"@angular/language-service": "^16.0.0",
"@capacitor/cli": "5.4.0",
"@ionic/angular-toolkit": "^9.0.0",
"@types/jasmine": "~4.3.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"eslint": "^7.26.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~4.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"ts-node": "^8.3.0",
"typescript": "~5.0.2"
},
"description": "An Ionic project"
}
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
Require stack:
- /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
- /usr/local/lib/node_modules/@ionic/cli/lib/index.js
- /usr/local/lib/node_modules/@ionic/cli/index.js
- /usr/local/lib/node_modules/@ionic/cli/bin/ionic
Ionic:
Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.4.1
@angular-devkit/build-angular : 16.2.3
@angular-devkit/schematics : 16.2.3
@angular/cli : 16.2.3
@ionic/angular-toolkit : 9.0.0
Capacitor:
Capacitor CLI : 5.4.0
@capacitor/android : 5.4.0
@capacitor/core : 5.4.0
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.4
native-run : 1.7.3
System:
NodeJS : v18.12.1 (/usr/local/bin/node)
npm : 9.8.0
OS : macOS Unknown
