Angular Project Init

[akilisosa]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] 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 Version

v6

Amplify Categories

No response

Backend

None

Environment information

``` # Put output below this line I tried going through the quickstart guide twice. https://github.com/akilisosa/amplify-nom-kitties https://github.com/akilisosa/amplify-nom-kitties-v2 I thought I followed the instructions to get it all working but it says build failure one the 2/3rd step deploying to amazon. When i run the project locally after npm install i get an error saying there isn't the amplify.outputs file or something to that effect. I am familiar with amplify v1 and haven't had issues there but now I am using this and it is extremely frustrating. ```

Describe the bug

I cannot get through the quickstart guide.

Expected behavior

I follow the quickstart guide and it runs in the browser.

Reproduction steps

follow the amplify angular quickstart guide, and let me know if its a problem with me or the guide.

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line 389 npm WARN EBADENGINE } 390 npm WARN EBADENGINE Unsupported engine { 391 npm WARN EBADENGINE package: '@angular-devkit/core@18.2.11', 392 npm WARN EBADENGINE required: { 393 npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6 || >=8.0.0', 394 npm WARN EBADENGINE node: '^18.19.1 || ^20.11.1 || >=22.0.0', 395 npm WARN EBADENGINE yarn: '>= 1.13.0' 396 npm WARN EBADENGINE }, 397 npm WARN EBADENGINE current: { node: 'v18.18.2', npm: '9.8.1' } 398 npm WARN EBADENGINE } 399 npm WARN EBADENGINE Unsupported engine { 400 npm WARN EBADENGINE package: '@angular-devkit/schematics@18.2.11', 401 npm WARN EBADENGINE required: { 402 npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6 || >=8.0.0', 403 npm WARN EBADENGINE node: '^18.19.1 || ^20.11.1 || >=22.0.0', 404 npm WARN EBADENGINE yarn: '>= 1.13.0' 405 npm WARN EBADENGINE }, 406 npm WARN EBADENGINE current: { node: 'v18.18.2', npm: '9.8.1' } 407 npm WARN EBADENGINE } 408 npm WARN EBADENGINE Unsupported engine { 409 npm WARN EBADENGINE package: '@schematics/angular@18.2.11', 410 npm WARN EBADENGINE required: { 411 npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6 || >=8.0.0', 412 npm WARN EBADENGINE node: '^18.19.1 || ^20.11.1 || >=22.0.0', 413 npm WARN EBADENGINE yarn: '>= 1.13.0' 414 npm WARN EBADENGINE }, 415 npm WARN EBADENGINE current: { node: 'v18.18.2', npm: '9.8.1' } 416 npm WARN EBADENGINE } 417 2024-11-10T16:18:50.431Z [INFO]: added 266 packages in 10s 418 2024-11-10T16:18:50.432Z [INFO]: 49 packages are looking for funding 419 run `npm fund` for details 420 2024-11-10T16:18:50.448Z [INFO]: # Executing command: ng version 421 2024-11-10T16:18:50.479Z [WARNING]: Node.js version v18.18.2 detected. 422 The Angular CLI requires a minimum Node.js version of v18.19. 423 Please update your Node.js version or visit https://nodejs.org/ for additional instructions. 424 2024-11-10T16:18:50.483Z [ERROR]: !!! Build failed 425 2024-11-10T16:18:50.483Z [ERROR]: !!! Error: Command failed with exit code 3 426 2024-11-10T16:18:50.483Z [INFO]: # Starting environment caching... 427 2024-11-10T16:18:50.484Z [INFO]: # Environment caching completed 428 ```

aws-exports.js

No response

Manual configuration

No response

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

I even redeployed it, it failed after 2 minutes and I am frustrated.

[cwomack]

Hello, @akilisosa 👋 and thanks for opening this. I'm able to reproduce this on my side as well when running through the Angular Getting Started Guide. It looks like the Node version being used isn't compatible with the build process, and we'll update the dependencies/docs for this.

[akilisosa]

@cwomack Thanks so much. I was looking forward to exploring the gen2 for the hackathon thing but got frustrated.

I also noticed that the generated files that are output - auth/schema thing, the defaultAuthorizationMode is iam but shouldn't it be api key?

const schema = a.schema({
  Todo: a
    .model({
      content: a.string(),
    })
    .authorization((allow) => [allow.guest()]),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'iam',
  },
});

[cwomack]

@akilisosa when going through the Quickstart guide for Angular, the cloned template should be api key until you follow the steps to update it to userPool (as seen here). Can you clarify where you saw instructions to change the defaultAuthorizationMode to iam or a step that caused this change to happen?

[akilisosa]

@cwomack going through the quickstart guide again, i guess i don't really know how that happened. On one of the attempts I have it as iam for some reason, i guess you can disregard that part.

[akilisosa]

These are the build settings I changed my other project too:

version: 1
backend:
  phases:
    build:
      commands:
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 20.11.1
        - nvm use 20.11.1
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: www
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

• is this all i had to do to get gen2 working?

• and then there are other configuration steps that I do, however I was unsure if they are that different because the docs just has React TSX for the angular documentation - which is not helpful.

[akilisosa]

The other important thing was that you guys rolled out this feature: https://docs.amplify.aws/angular/build-a-backend/data/connect-event-api/

which is great, but I thought all these configuration settings came from amplify, and its weird to declare them inside the component like this.

Amplify.configure({
  API: {
    Events: {
      endpoint:
        'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-east-1.amazonaws.com/event',
      region: 'us-east-1',
      defaultAuthMode: 'apiKey',
      apiKey: 'da2-abcdefghijklmnopqrstuvwxyz'
    }
  }
});

because all the other configuration stuff are in files that are being .gitignored.

[akilisosa]

I tried cloning the repo, i ran npm install, and then tried running the project wtih ng serve but got this error:

    src/app/app.component.ts:5:20:
      5 │ import outputs from '../../amplify_outputs.json';

in gen1 there is no file named this.

[akilisosa]

@cwomack lol sorry for all the other notes.... but anyway! IF you instead choose manual installation, the other option:

• you will get the missmatch:

  
  const schema = a.schema({
  Todo: a
  .model({
    content: a.string(),
  })
  .authorization((allow) => [allow.guest()]),
  });

export type Schema = ClientSchema;

export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'iam', }, });

at least in angular idk if there is a difference between this and the other front end frameworks:

https://github.com/akilisosa/gen2-practice/blob/main/amplify/data/resource.ts

[cwomack]

@akilisosa, thanks for all the additional context on this. We are going to transfer this to the amplify-backend repo to get a PR to update the Node version used and resolve the Quickstart build failures in Angular docs.

[akilisosa]

I have tried changing the build settings so many times and it still keeps coming in as node.18.18. according to amazon Q recomendations:

version: 1
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 20.11.1
        - nvm use 20.11.1
        - node -v
        - npm -v
        - npm cache clean --force
        - rm -rf node_modules
        - npm ci
    build:
      commands:
        - node -v
        - npm install -g @angular/cli@latest
        - ng version
        - ng build --configuration=production
  artifacts:
    baseDirectory: dist/amplify-angular-template/browser
    files:
      - '**/*'
  cache:
    paths:
      - .npm/**/*
      - node_modules/**/*

and a different one:

frontend:
  phases:
    preBuild:
      runtime: nodejs20.x
      commands:
        - npm ci
    build:
      runtime: nodejs20.x
      commands:
        - npm install -g @angular/cli
        - ng version
        - ng build --configuration=production

[akilisosa]

So sorry i was just so excited to try out gen 2, and know that if someone else encountered this problem you guys might loose a potential customer.

Anyway I was finally able to get it to work by changing the build image settings, and adding in the node.js version of 20.

It is weird that the build settings i changed didn't do anything.