refactor: integrate Bootstrap and migrate to Angular 21 application b… by GustavoKoglin · Pull Request #19 · felipeAguiarCode/angular-psn-store-clone

GustavoKoglin · 2026-03-04T04:30:09Z

…uilder

Copilot

Pull request overview

This PR upgrades the Angular app configuration to Angular v21 (including the new application builder), integrates Bootstrap styling, and updates several component templates/styles to use Bootstrap layout and utility classes.

Changes:

Upgrade Angular dependencies to ^21.2.0, add bootstrap, and adjust TypeScript settings for the newer toolchain.
Migrate Angular CLI config from browser builder to application builder and wire Bootstrap CSS into build/test.
Refactor Home/Menu/Card component markup and CSS to use Bootstrap grid/navbar/card styling.

Reviewed changes

Copilot reviewed 24 out of 26 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`package.json`	Upgrades Angular/RxJS/Zone.js, adds Bootstrap, updates dev tooling versions.
`angular.json`	Switches to `@angular-devkit/build-angular:application`, updates option keys, adds Bootstrap CSS, modifies polyfills config.
`tsconfig.json`	Updates TS module resolution and ECMAScript target/module settings.
`src/app/pages/home/home.component.ts`	Adds component metadata change (`standalone: false`).
`src/app/pages/home/home.component.html`	Migrates Home page layout to Bootstrap grid.
`src/app/pages/home/home.component.css`	Removes custom layout CSS (replaced by Bootstrap classes).
`src/app/components/menu-bar/menu-bar.component.ts`	Adds component metadata change (`standalone: false`).
`src/app/components/menu-bar/menu-bar.component.html`	Replaces custom menu bar markup with Bootstrap navbar markup.
`src/app/components/menu-bar/menu-bar.component.css`	Removes custom menu styles; keeps minimal hover override.
`src/app/components/card/card.component.ts`	Adds component metadata change (`standalone: false`) and formatting tweaks.
`src/app/components/card/card.component.html`	Refactors card markup to Bootstrap card classes and fixes bindings.
`src/app/components/card/card.component.css`	Replaces card CSS with Bootstrap-compatible hover/image styles.
`src/app/components/card/card-pricing/card-pricing.component.ts`	Adds component metadata change (`standalone: false`) and formatting tweaks.
`src/app/components/card/card-pricing/card-pricing.component.html`	Refactors pricing overlay markup to Bootstrap utility classes.
`src/app/components/card/card-pricing/card-pricing.component.css`	Removes custom pricing CSS (replaced by Bootstrap classes).
`src/app/components/card/card-label/card-label.component.ts`	Adds component metadata change (`standalone: false`) and formatting tweaks.
`src/app/components/card/card-label/card-label.component.html`	Refactors label markup to Bootstrap badge styling.
`src/app/components/card/card-label/card-label.component.css`	Removes custom label CSS (replaced by Bootstrap classes).
`src/app/app.component.ts`	Adds component metadata change (`standalone: false`).
`tsc_output.txt`	Adds local TypeScript error output log.
`build_output.txt`	Adds local build output log snippet.
`build_ng.txt` / `build_ng2.txt` / `build_err.txt` / `build_app.txt`	Adds additional local build output transcripts.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-04T04:34:34Z

package.json

-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.7.2"
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "^5.9.1-rc"


The TypeScript version range is pinned to a prerelease tag (^5.9.1-rc). This can unexpectedly float to other prereleases and makes installs less reproducible across environments. Prefer a stable version range (e.g., ~5.9.x or ^5.9.0) unless there’s a specific reason to require an RC build.

Suggested change

"typescript": "^5.9.1-rc"

"typescript": "^5.9.0"

Copilot · 2026-03-04T04:34:35Z

angular.json

+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js",
+              "src/polyfills.ts"
+            ],


polyfills includes both zone.js and src/polyfills.ts, but src/polyfills.ts already imports zone.js. This results in loading ZoneJS twice (also in the test target), which is unnecessary and can cause subtle runtime issues. Keep only one source of ZoneJS (either remove zone.js from these arrays or remove the ZoneJS import from src/polyfills.ts).

Copilot · 2026-03-04T04:34:35Z

angular.json

+            "polyfills": [
+              "zone.js",
+              "zone.js/testing",
+              "src/polyfills.ts"
+            ],


Same issue for the test target: polyfills includes zone.js and src/polyfills.ts (which imports ZoneJS), so ZoneJS is loaded twice during tests. Remove one of them to avoid duplicate patching.

Copilot · 2026-03-04T04:34:35Z

src/app/components/menu-bar/menu-bar.component.html

+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">


The navbar uses Bootstrap’s collapse toggler (data-bs-toggle="collapse"), but the project only includes Bootstrap CSS (no Bootstrap JS bundle is referenced in angular.json scripts and there are no JS imports). The toggler won’t function without the JS. Add the Bootstrap JS bundle (or switch to an Angular-native collapse implementation such as ng-bootstrap).

Suggested change

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse justify-content-center" id="navbarNav">

<button class="navbar-toggler" type="button">

<span class="navbar-toggler-icon"></span>

</button>

<div class="navbar-collapse justify-content-center" id="navbarNav">

Copilot · 2026-03-04T04:34:36Z

tsc_output.txt

+node_modules/@angular/core/types/_discovery-chunk.d.ts(12,86): error TS2307: Cannot find module '@angular/core/primitives/di' or its corresponding type declarations.
+  There are types at 'C:/Users/kogli/OneDrive/├ürea de Trabalho/Projetos/angular-psn-store-clone/node_modules/@angular/core/types/primitives-di.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.
+node_modules/@angular/platform-browser/types/platform-browser.d.ts(10,42): error TS2307: Cannot find module '@angular/common/http' or its corresponding type declarations.
+  There are types at 'C:/Users/kogli/OneDrive/├ürea de Trabalho/Projetos/angular-psn-store-clone/node_modules/@angular/common/types/http.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.
+node_modules/@angular/router/types/router.d.ts(145,17): error TS2552: Cannot find name 'ViewTransition'. Did you mean 'ViewTransitionInfo'?


These build/tsc output log files look like local troubleshooting artifacts and include environment-specific details (e.g., absolute user paths). They tend to become stale quickly and add noise to the repo. Consider removing them from version control and capturing this information in the PR description or an issue instead.

Suggested change

node_modules/@angular/core/types/_discovery-chunk.d.ts(12,86): error TS2307: Cannot find module '@angular/core/primitives/di' or its corresponding type declarations.

There are types at 'C:/Users/kogli/OneDrive/├ürea de Trabalho/Projetos/angular-psn-store-clone/node_modules/@angular/core/types/primitives-di.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

node_modules/@angular/platform-browser/types/platform-browser.d.ts(10,42): error TS2307: Cannot find module '@angular/common/http' or its corresponding type declarations.

There are types at 'C:/Users/kogli/OneDrive/├ürea de Trabalho/Projetos/angular-psn-store-clone/node_modules/@angular/common/types/http.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

node_modules/@angular/router/types/router.d.ts(145,17): error TS2552: Cannot find name 'ViewTransition'. Did you mean 'ViewTransitionInfo'?

This file previously contained local TypeScript build output and has been cleared.

Build and tsc logs should not be committed to version control. Please capture any

relevant error output in pull request descriptions or issues instead.

(Intentionally left blank.)

Copilot · 2026-03-04T04:34:36Z

build_output.txt

+
+> store@0.0.0 build
+> ng build
+


This appears to be a local build transcript/checkpoint file rather than source/config needed by the application. Keeping build output logs in the repo increases churn and can quickly become inaccurate. Recommend removing this file (and similar build_*.txt artifacts) from the PR and adding them to .gitignore if they’re generated locally.

Suggested change

> store@0.0.0 build

> ng build

This file previously contained local build output logs (for example, the output of "npm run build").

Build artifacts and logs should not be committed to version control. If this file is being generated

by your local build or CI process, please remove it from the repository and add it to .gitignore.

refactor: integrate Bootstrap and migrate to Angular 21 application b…

29f8240

…uilder

Copilot AI review requested due to automatic review settings March 4, 2026 04:30

Copilot started reviewing on behalf of GustavoKoglin March 4, 2026 04:30 View session

Copilot AI reviewed Mar 4, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: integrate Bootstrap and migrate to Angular 21 application b…#19

refactor: integrate Bootstrap and migrate to Angular 21 application b…#19
GustavoKoglin wants to merge 1 commit intofelipeAguiarCode:mainfrom
GustavoKoglin:main

GustavoKoglin commented Mar 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-> store@0.0.0 build
-> ng build
+This file previously contained local build output logs (for example, the output of "npm run build").
+Build artifacts and logs should not be committed to version control. If this file is being generated
+by your local build or CI process, please remove it from the repository and add it to .gitignore.

Conversation

GustavoKoglin commented Mar 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants