Ionic build into wrong directory: www/browser?

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.

I figured out the problem:

In angular.json I needed this:

            "outputPath": {
              "base": "www",
              "browser": ""
            },
2 Likes