Deploying SSR enabled Angular 17 application is not supported

[misomarcell]

Version info

Angular: 17.0.2

Firebase:

AngularFire: 17.0.0-next.0

How to reproduce these conditions

1. Create a new Angular 17 application using ng new
2. Make sure you have the latest firebase-tools installed. For me it's 12.8.1
3. Run firebase experiments:enable webframeworks to enable webframeworks
4. Deploy the application using firebase deploy command

Expected behavior

After the application is deployed, you should be able to access it on the generated URL

Actual behavior

Page Not Found error on the generated URL.

Additional notes

• If there already is a "hosting" property in firebase.json, rather than extending that, it just appends a new object below it with "source" and "frameworksBackend"
• Seems like angularfire's deploy builder is currently not compatible with the new Angular 17 way of building SSR applications. Although upon adding the package, angular.json is updated with a deploy builder, it only has a "browserTarget" property, but neither a "serverTarget" nor "ssr", but even after adding them manually, the deployed application displays a Page Not Found error, probably because no function or cloud run instance were created for the frontend server.

I couldn't find information on this being simply a bug, or the needed feature is under development, and will eventually be available in the next stable release. In any case, for tracking the progress and to inform other developers who might end up in the same situation as me, I'm opening this issue.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[misomarcell]

Found the solution

1. You need to separate the browser and the server builders in angular.json. Replace @angular-devkit/build-angular:application with @angular-devkit/build-angular:browser. You'll need to adjust the properties, but if you have Angular Language Services extension installed in VSCode, it'll show exactly which ones.
2. Add a new builder with @angular-devkit/build-angular:server. Here is an example:

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.app.json"
          },
          "configurations": {
            "development": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false
            }
          }
        },

3. set the serverTarget property under the deploy builder's options, like:

"deploy": {
  "builder": "@angular/fire:deploy",
  "options": {
    "version": 2,
    "browserTarget": "your-app:build:production",
    "serverTarget": "your-app:server:production"
  }
}

That should be it. If you deploy your application now, it should create a new firebase function for rendering your frontend.

[SiebeDom]

Thanks for the hints. I had the same problem.
The change I did to make it work ("non SSR application"):

[hittten]

@misomarcell Is not a solution is the old way to use the builder. Angular v17 came with the new builder (see https://angular.dev/tools/cli/build):

@angular-devkit/build-angular:application Builds an application with a client-side bundle, a Node server, and build-time prerendered routes with esbuild.

That's why you don't need to separate de browser & server builders.

[ersimont]

May I request re-opening this issue? The tooling should work out of the box, without having to search for solutions in closed issue comments :).

I don't know if the problem lies here in this repo, or in firebase/firebase-tools#6505 (comment). But if we leave this open the maintainers may tell us.

Copying my comment from that linked issue for reference here, too:

This problem also occurs with non-SSR angular apps starting in v17. I suspect the reason is that in v17, a newly scaffolded app puts its build output in a different path.

Old : dist/project-name/
New: dist/project-name/browser

This is because, as hinted in the linked issueabove, a newly scaffolded app uses a new builder in angular.json:

Old: @angular-devkit/build-angular:browser
New: @angular-devkit/build-angular:application

A commenter on the linked issueabove shows they were able to fix it by reverting back to the old builder. The tooling needs to update to support the new builder.

[hittten]

There are two problems here:

1. Not found page: This is because the firebase-tools don't know the route of the browser folder. In the previous version of angular.json, we had something like this:

{
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/myApp/browser",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": [
        "zone.js"
      ],
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      "styles": [
        "src/styles.scss"
      ],
      "scripts": []
    }
  },
  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/myApp/server",
      "main": "server.ts",
      "tsConfig": "tsconfig.server.json",
      "inlineStyleLanguage": "scss"
    },
    "configurations": {
      "production": {
        "outputHashing": "media"
      },
      "development": {
        "buildOptimizer": false,
        "optimization": false,
        "sourceMap": true,
        "extractLicenses": false,
        "vendorChunk": true,
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.development.ts"
          }
        ]
      }
    },
    "defaultConfiguration": "production"
  },
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "guessRoutes": false,
      "routes": [
        "/"
      ]
    },
    "configurations": {
      "production": {
        "browserTarget": "myApp:build:production",
        "serverTarget": "myApp:server:production"
      },
      "development": {
        "browserTarget": "myApp:build:development",
        "serverTarget": "myApp:server:development"
      }
    },
    "defaultConfiguration": "production"
  }
}

As you can see, we have 3 builders here:

  {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/myApp/browser"
    }
  },
  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/myApp/server"
    }
  },
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "guessRoutes": false,
      "routes": [
        "/"
      ]
    }
  }
}

The "output path" determines where the correct folder is for each build: "browser" and "server". If you visit your hosting URL, "/browser", you will see the files, but with errors.

Now in angular 17 with the "@angular-devkit/build-angular:application" builder, the "angular.json" file should be simplified, but firebase-tools doesn't know how to handle it.

2. The SSR Cloud Function: There is no evidence of implementation in the "firebase deploy" log, I see only hosting logs.

[hittten]

@ersimont is open in this URL: firebase/firebase-tools#6505

[ersimont]

A workaround for me is to change firebase.json to deploy the new /browser subfolder that the new Angular builders use

{
  "hosting": [
    {
      "target": "pass-gen",
      // old line, that doesn't work at v17.0.0-next.0
      // "source": ".",
      // new line, where you must replace "pass-gen" with the name of your project
      "public": "dist/pass-gen/browser",
      "frameworksBackend": {}
    }
  ]
}

[misomarcell]

@ersimont that just skipping SSR entirely, but if you don't need it anyway, it's a way to go for sure.

[lla105]

Thanks for the hints. I had the same problem. The change I did to make it work ("non SSR application"):

This worked for me