After having tried just about everything, I thought I would reach out and see if anyone might have an idea as to what is taking place.
I have a single page Angular project that uses standalone components that renders correctly when I use ionic serve.
However, when I build the application using ionic build --prod and copy the application to IIS, the application does not render correctly. Buttons show as hyperlinks and other elements like cards and text boxes do not render at all.
I updated the baseHref in index.html to match the folder the application was placed in and created a rewrite rule in IIS.
I confirmed that nothing is wrong with the IIS configuration by taking another application that does render correctly and placed it in the folder.
On a side note, I used the VS extension to check for minor updates and nothing but errors were thrown. To see if that may be the cause, I deleted node_modules and reinstalled all packages. Unfortunately, the same problem.
Create a blank project and copy the files over? Something under the hood botched up?
Thanks.
Ionic:
Ionic CLI : 7.2.0
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v20.11.1
npm : 10.2.4
OS : Windows 10
{
“name”: “PayMyBill”,
“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”: “^18.0.0”,
“@angular/common”: “^18.0.0”,
“@angular/compiler”: “^18.0.0”,
“@angular/core”: “^18.0.0”,
“@angular/forms”: “^18.0.0”,
“@angular/platform-browser”: “^18.0.0”,
“@angular/platform-browser-dynamic”: “^18.0.0”,
“@angular/router”: “^18.0.0”,
“@capacitor/app”: “6.0.1”,
“@capacitor/core”: “6.1.2”,
“@capacitor/haptics”: “6.0.1”,
“@capacitor/keyboard”: “6.0.2”,
“@capacitor/network”: “^6.0.2”,
“@capacitor/preferences”: “^6.0.2”,
“@capacitor/status-bar”: “6.0.1”,
“@ionic/angular”: “^8.3.0”,
“ionicons”: “^7.2.1”,
“rxjs”: “~7.8.0”,
“swiper”: “^10.0.4”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.14.2”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^18.0.0”,
“@angular-eslint/builder”: “^18.0.0”,
“@angular-eslint/eslint-plugin”: “^18.0.0”,
“@angular-eslint/eslint-plugin-template”: “^18.0.0”,
“@angular-eslint/schematics”: “^18.0.0”,
“@angular-eslint/template-parser”: “^18.0.0”,
“@angular/cli”: “^18.0.0”,
“@angular/compiler-cli”: “^18.0.0”,
“@angular/language-service”: “^18.0.0”,
“@capacitor/cli”: “6.1.2”,
“@ionic/angular-toolkit”: “^11.0.1”,
“@types/jasmine”: “~5.1.0”,
“@typescript-eslint/eslint-plugin”: “^6.0.0”,
“@typescript-eslint/parser”: “^6.0.0”,
“eslint”: “^8.57.0”,
“eslint-plugin-import”: “^2.29.1”,
“eslint-plugin-jsdoc”: “^48.2.1”,
“eslint-plugin-prefer-arrow”: “1.2.2”,
“jasmine-core”: “~5.1.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~6.4.0”,
“karma-chrome-launcher”: “~3.2.0”,
“karma-coverage”: “~2.2.0”,
“karma-jasmine”: “~5.1.0”,
“karma-jasmine-html-reporter”: “~2.1.0”,
“typescript”: “~5.4.0”
},
“description”: “An Ionic project”
}
