I am reimplementing my Ionic+Angular+PWA app using updated versions of “everything”.
I’ve ported everything over to Ionic + Angular v.19 and worked out all the bugs.
When I do an ionic build --prod
it seems to produce everything in www/browser
(except for the files 3rdpartylicenses.txt
and prerendered-routes.json
).
When I do firebase deploy to host on firebase, it assumes everything is in www
– at least that’s where my build put everything previously.
Here is my current config:
Ionic:
Ionic CLI : 7.2.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.1
@angular-devkit/build-angular : 19.0.6
@angular-devkit/schematics : 19.0.6
@angular/cli : 19.0.6
@ionic/angular-toolkit : 12.1.1
Capacitor:
Capacitor CLI : 6.2.0
@capacitor/android : not installed
@capacitor/core : 6.2.0
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v20.9.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/bin/node)
npm : 10.1.0
OS : macOS Unknown
Here is my old config:
Ionic:
Ionic CLI : 7.2.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.5.3
@angular-devkit/build-angular : 14.2.10
@angular-devkit/schematics : 14.2.10
@angular/cli : 14.2.10
@ionic/angular-toolkit : 7.0.0
Capacitor:
Capacitor CLI : 4.6.3
@capacitor/android : 4.6.3
@capacitor/core : 4.6.3
@capacitor/ios : 4.6.3
Utility:
cordova-res : not installed globally
native-run (update available: 2.0.1) : 1.7.1
System:
NodeJS : v20.9.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/bin/node)
npm : 10.1.0
OS : macOS Unknown
Here is my new angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"projectType": "application",
"schematics": {
"@ionic/angular-toolkit:page": {
"styleext": "scss",
"standalone": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "www",
"index": "src/index.html",
"polyfills": ["src/polyfills.ts"],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": [],
"browser": "src/main.ts"
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all",
"serviceWorker": "ngsw-config.json"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "app:build:production"
},
"development": {
"buildTarget": "app:build:development"
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": []
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
},
"cli": {
"schematicCollections": ["@ionic/angular-toolkit"]
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
},
"@angular-eslint/schematics:application": {
"setParserOptionsProject": true
},
"@angular-eslint/schematics:library": {
"setParserOptionsProject": true
}
}
}
and my firebase.json:
{
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log",
"*.local"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
],
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I’ve been looking at the old versions of these files and they seem basically the same as the new versions.
Does anyone have any idea why my stuff is being built into www/browsers, if that is correct, and if it is correct, how I get the firebase deploy to work correctly?
Thanks.