[Draft] - [AI example] Update GSA to Angular 19

[tcorral]

Tooling used:

• Anthropic Claude API: https://www.anthropic.com/claude
• Visual Studio Code: https://code.visualstudio.com/
• Cline (VSCode plugin): https://github.com/cline/cline

System Prompt used:

You are an expert Angular and NX developer with a strong understanding of best practices, tools, and architectures. Your goal is to provide clear, precise, and actionable guidance to an experienced developer looking to improve their Angular and NX skills.

In your responses, focus on the following key areas:

<topics>
- Angular best practices
- NX monorepos
- State management (NgRx, RxJS)
- Performance optimization
- Testing (Jest)
- CI/CD automation (GitHub Actions)
- REST/GraphQL APIs
- Security
- Micro frontend architecture
</topics>

For each topic, provide a concise, technical, and solution-oriented response that includes:

<thinking>
- A brief introduction to the topic and its importance
- 2-3 key best practices or recommendations
- Relevant examples, code snippets, or references to documentation
- Insights on how to apply the concepts in the context of the developer's experience level and any additional context provided
</thinking>

<answer>
Based on the topics, developer experience level, and additional context provided, here is my response:

[Provide a comprehensive response covering the key topics, incorporating the best practices and tailoring the content to the developer's needs.]
</answer>

Remember to keep your responses clear, concise, and focused on providing actionable guidance to the experienced developer. Avoid unnecessary jargon or vague explanations, and instead aim to deliver practical solutions and insights.

User prompt used:

Migrate the `golden-sample-app` to use Angular 19.

Steps:
1. In the application's project directory, run ng update @angular/core@19 @angular/cli@19 to update your application to Angular v19.
2. Angular directives, components and pipes are now standalone by default. Specify "standalone: false" for declarations that are currently declared in an NgModule. The Angular CLI will automatically update your code to reflect that.
3. Remove this. prefix when accessing template reference variables. For example, refactor <div #foo></div>{{ this.foo }} to <div #foo></div>{{ foo }}
4. Replace usages of BrowserModule.withServerTransition() with injection of the APP_ID token to set the application id instead.
5. The factories property in KeyValueDiffers has been removed.
6. In angular.json, replace the "name" option with "project" for the @angular/localize builder.
7. Rename ExperimentalPendingTasks to PendingTasks.
8. Update tests that relied on the Promise timing of effects to use await whenStable() or call .detectChanges() to trigger effects. For effects triggered during change detection, ensure they don't depend on the application being fully rendered or consider using afterRenderEffect(). Tests using faked clocks may need to fast-forward/flush the clock.
9. Upgrade to TypeScript version 5.5 or later.
10. Update tests using fakeAsync that rely on specific timing of zone coalescing and scheduling when a change happens outside the Angular zone (hybrid mode scheduling) as these timers are now affected by tick and flush.
11. When using createComponent API and not passing content for the first ng-content, provide document.createTextNode('') as a projectableNode to prevent rendering the default fallback content.
12. Update tests that rely on specific timing or ordering of change detection around custom elements, as the timing may have changed due to the switch to the hybrid scheduler.
13. Migrate from using Router.errorHandler to withNavigationErrorHandler from provideRouter or errorHandler from RouterModule.forRoot.
14. Update tests to handle errors thrown during ApplicationRef.tick by either triggering change detection synchronously or rejecting outstanding ComponentFixture.whenStable promises.
15. Update usages of Resolve interface to include RedirectCommand in its return type.
16. fakeAsync will flush pending timers by default. For tests that require the previous behavior, explicitly pass {flush: false} in the options parameter.

ℹ️ These steps are taken from the official Angular upgrade page: https://angular.dev/update-guide?v=18.0-19.0&l=1

Tokens: ⬆️ 57 ⬇️ 17.1k
Cache: : +596.7k ➡️ 4.8m
Context Window: 147.1k =================------ 200.0k
API Cost: $3.9376
Time it took to complete the task: 25 minutes (8:57 am - 9:22 am)

[tcorral]

Issues found after the automated migration:

• EsLint rules configuration required to manually update them to do not get errors on using "standalone": false for those components, directives, pipes or services provided on an @NgModule. (Solved)
• Expected install using npm ci --ignore-scripts doesn't work because there are @backbase/... dependencies that need to be updated to use Angular 19 for the command to work. (Solved but with reservations) It required to change the installation command from npm ci --ignore-scripts to npm ci --ignore-scripts --force.
• It changed the references from @backbase/initiate-payment-journey-ang to @backbase/internal-payments-shared-util because the same item is returned in different npm packages. (Solved)

[tcorral]

Log of the chat (thinking process, commands, outcome) - cline_task_feb-6-2025_10-17-47-am.md

[tcorral]

Process:

1. Checking that everything works as expected before doing anything.
   • I have run npm run test
   • I have r npm run format
   • I have rnpm run lint
   • I have r npm run build
   • I have r npm run e2e
   • I have r npm run start:mocks to run the mock server and to serve the application.
2. Figure out a good system prompt explaining the AI:
   • What is his role:
     • We need the AI to have a good knowledge about a project using Angular and NX with a good understanding of best practices, tools, and architectures.
   • Topics on which we will need his advice:
     • Angular best practices.
     • NX monorepos
     • Performance optimization
     • Testing using Jest
     • CI/CD automation using Github Actions
     • REST APIs
     • Security
   • Type of response:
     • It should provide a concise, technical and solution oriented response that includes:
       • Thinking:
         • A brief introduction about the topic.
         • 2-3 key best practices or recommendations
         • Relevant examples, code snippets or references to documentation.
         • Insights on how to apply the concepts in the context.
     • Answer:
       • Provide a comprehensive response covering the key topics, incorporating the best practices and tailoring the content to the developer needs.
     • The response should be clear, concise and focused on providing actionable guidance, avoiding unnecessary jargon or vague explanations and focused on delivering practical solutions and insights.
3. Use ChatGPT and Claude AI to get a system prompt ready to use it on any LLM model. (Result is the system prompt used on Cline)
4. Go to the Angular migration guide and get the steps that Angular recommends to migrate from Angular 18 to Angular 19.
5. Create the user prompt using the information from previous step (Result the user prompt used on Cline)
6. Configuring Cline to:
   • Use Claude API
   • Use System Prompt
7. Start a new chat on Cline passing the user prompt.
8. Cline then starts working and starts by executing some commands then it starts reading and modifying files, on each request it expects the approval of the developer.
9. During the process Cline:
   • It tries to install the dependencies.
   • It asks for credentials if they are not provided on the .npmrc in your system.
   • It installs the dependencies.
   • ... more information in this log: cline_task_feb-6-2025_10-17-47-am.md
10. Cline during the process executes some commands to check that everything works as expected:
    • It runs npm run test
    • It runs npm run build
11. When everything is passing it finishes the response allowing the user to see the changes and why it has been changed and completes the response and waits for more requests.
12. I reviewed the code that was changed by the AI and I noticed some issues:
    1. It doesn't executes npm run format -f to make sure the code follows our formatting standards (This is something that could be addeed to the instructions on the system or user prompt)
    2. It doesn't executes npm run lint -f to make sure the code follows our lint standards (This is something that could be addeed to the instructions on the system or user prompt)
    3. During the process there were two things needed, to upgrade to Angular 19 and to upgrade @angular-eslint and because of this there is a new rule executed on which it checks that we do not use standalone:false in our code but in the Golden Sample app we needed to use it for those items that are provided on a @NgModule.
    4. On one of my tests, I removed the node_modules and executed the command that is executed during the build on the Github Actions, npm ci --ignore-scripts and it was failing because there were a lot of peer dependencies that were not resolved. This is caused because the @backbase/... npm packages are not compatible yet with Angular 19.
    5. It changed some references from @backbase/initiate-payment-journey-ang to @backbase/internal-payments-shared-util what in fact makes it to be a breaking change. I have noticed that the same items are exported in both packages and that is what confused the AI. (This is something that could be addeed to the instructions on the system or user prompt - we could just say do not import dependencies from internal packages.)
13. I resolved the issues:
    1. I have executed npm run format -f
    2. I have executed npm run lint -f
    3. I have added EsLint rules configuration to allow using standalone:false in those items that are provided on a @NgModule
    4. I have changed the way we install the dependencies on the CI/CD because on updating the Golden Sample App to Angular 19 it expects all its dependencies to be compatible with Angular 19 but that's not the case with @backbase/... dependencies and that required to change the installation command from npm ci --ignore-scripts to npm ci --ignore-scripts --force to allow peer-dependencies resolution. (That's not ideal and we should revert it back asap the dependencies have migrated to Angular 19)
    5. I have changed the references to point to the right dependency reverting the imports to use them from the original npm package @backbase/initiate-payment-journey-ang
14. I executed the following commands to ensure everything was working as expected:
    • I have run npm run format
    • I have run npm run lint
    • I have run npm run build
    • I have runnpm run e2e
    • I have run npm run start:mocks and then I navigated through the different pages and performed the actions I user could do
15. Everything was passing then I created this PR.