Basic Angular 17 frontend deployment causes 404 with Amplify Hosting

[Khumain]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Not applicable

Amplify Categories

hosting

Environment information

# Put output below this line
System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 4.99 GB / 15.94 GB
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.16.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (118.0.2088.76)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @angular-devkit/build-angular: ^17.0.3 => 17.0.5
    @angular/animations: ^17.0.0 => 17.0.5
    @angular/cli: ^17.0.3 => 17.0.5
    @angular/common: ^17.0.0 => 17.0.5
    @angular/compiler: ^17.0.0 => 17.0.5
    @angular/compiler-cli: ^17.0.0 => 17.0.5
    @angular/core: ^17.0.0 => 17.0.5
    @angular/forms: ^17.0.0 => 17.0.5
    @angular/platform-browser: ^17.0.0 => 17.0.5
    @angular/platform-browser-dynamic: ^17.0.0 => 17.0.5
    @angular/router: ^17.0.0 => 17.0.5
    @types/jasmine: ~5.1.0 => 5.1.4
    aws-amplify: ^6.0.5 => 6.0.5
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    jasmine-core: ~5.1.0 => 5.1.1 (4.6.0)
    karma: ~6.4.0 => 6.4.2
    karma-chrome-launcher: ~3.2.0 => 3.2.0
    karma-coverage: ~2.2.0 => 2.2.1
    karma-coverage-coffee-example:  1.0.0
    karma-jasmine: ~5.1.0 => 5.1.0
    karma-jasmine-html-reporter: ~2.1.0 => 2.1.0
    rxjs: ~7.8.0 => 7.8.1
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    tslib: ^2.3.0 => 2.6.2 (1.14.1)
    typescript: ~5.2.2 => 5.2.2
    zone.js: ~0.14.2 => 0.14.2
  npmGlobalPackages:
    @angular/cli: 17.0.3
    @aws-amplify/cli: 12.8.2
    npm: 8.16.0
    prettier: 3.0.3
    sass: 1.69.4
    typescript: 4.7.4

Describe the bug

Hello wonderful team and community,

I am having an issue with my Angular app after upgrading everything to Angular 17 and Amplify 6. Previously, I was on Angular 16 and Amplify 5, and frontend deployment worked perfectly. However, it does not seem to work anymore.

To check if a basic Angular project would work, I created a brand new "amplify-app" project with ng new amplify-app with CSS and without SSR, and amplify init. I added the parameters in tsconfig.json for strict mode. Furthermore, I added the polyfills following the guide. Finally, I used amplify add hosting with manual deployment. After doing amplify publish, I was surprised that the hosted url brings me to an empty page with 404 errors in the console. Locally, the default Angular page opens but not with the deployed website.

As such, I am unable to use all the new functionalities of Angular 17 and Amplify 6 that are ready for production...

Can you help me out with this? Thank you very much!

Expected behavior

Basic Angular website deployed and running on Amplify Hosting.

Reproduction steps

1. ng new amplify-app with CSS and no SSR
2. cd amplify-app
3. amplify init
4. Set up tsconfig.json parameters and polyfills
5. amplify add hosting with manual deployment
6. amplify publish

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

const awsmobile = {
    "aws_project_region": "eu-west-3"
};
export default awsmobile;

Manual configuration

amplifyconfiguration.json:

{
  "aws_project_region": "eu-west-3"
}

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[nadetastic]

Hi @Khumain thanks for opening this issue. It sounds like the main problem is when deploying to hosting and some deployment config needs to be adjusted. I'm transferring this issue over to the Hosting repo for better assistance.

[Jisoonoo]

Had same issue!

Fixed it with using Angular 16 build config (angular.json)

Problem is you can't use "ng serve" with angular 16
So I created 2 different file named

[Khumain]

Thank you for your help! I managed to fix it on my side as well, gotta change the amplify.yml and use baseDirectory: dist/project/browser with Angular 17 instead of baseDirectory: dist/project.

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.

[github-actions]

This issue has been automatically locked.