Update BookStore Tutorial (Angular-MongoDB) - Issue 7556 #306
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Upgraded Angular packages to version 20 and ABP packages to version 9.3.6. Updated related devDependencies and other libraries to ensure compatibility. Added 'packageManager' field for yarn.
Upgraded Angular dependencies and related packages from v18 to v20 in yarn.lock. Updated angular.json to use new Angular v20 builders and configuration options, aligning with the latest Angular build and serve targets.
Migrated from NgModule-based structure to Angular standalone components and providers. Removed app.module.ts and app-routing.module.ts, replacing them with app.config.ts and app.routes.ts for configuration and routing. Updated app.component.ts to use standalone imports, refactored main.ts to use bootstrapApplication, and deprecated route.provider.ts in favor of new route definitions.
Removed feature modules and routing modules for author, book, and home sections, converting components to use Angular's standalone API with inject(). Updated test setups to use imports instead of declarations. Refactored services to use inject() for dependency injection. Updated package.json and yarn.lock to align with Angular 20 and related dependency versions.
Updated author, book, and home components to use Angular's standalone component API and explicitly declare required module imports. Also updated angular.json to use 'browser' instead of 'main' for the entry point. This improves modularity and prepares the app for future Angular versions.
Moved route metadata and menu configuration to a new route.provider.ts using RoutesService and provideAppInitializer. Updated app.config.ts to include the new provider and simplified app.routes.ts to focus on route paths and lazy loading. This improves modularity and separation of concerns for route and menu management.
Replaced Angular template tags with self-closing syntax for <abp-loader-bar> and <abp-dynamic-layout> in app.component.ts to improve code consistency and readability.
Updated author, book, and home components to use Angular's signal and computed APIs for state management instead of plain properties and getters. This improves reactivity and aligns with modern Angular best practices.
Updated author and book component templates to use getter methods (e.g., author(), book(), selectedAuthor(), selectedBook(), isModalOpen()) instead of direct property access. Also updated abp-modal bindings to use [visible] and (visibleChange) for improved state management.
Contributor
There was a problem hiding this comment.
Hello @fahrigedik thank you for updating this book store sample. Here are my quick notes that we can consider:
-
We meant signal input migration by saying signal migration. That would be the best if we could rollback because we should not recommend over-using signals. If we cannot make it easily, then we can keep it as it is.
-
We need to apply self closing tag migration for these templates.
BookStore-Angular-MongoDb/angular/src/app/book/book.component.htmlBookStore-Angular-MongoDb/angular/src/app/author/author.component.html -
We can use the latest design for the home page
BookStore-Angular-MongoDb/angular/src/app/home/home.component.html
Replaces usage of Angular signals with standard class properties in author, book, and home components. Updates form handling and modal state management to use direct property access instead of signals. This simplifies the code and improves compatibility with standard Angular patterns.
Replaces usage of Angular signals with standard class properties in author, book, and home components. Updates form handling and modal state management to use direct property access instead of signals. This simplifies the code and improves compatibility with standard Angular patterns.
Major UI overhaul of the home page with new layout, cards, and social/media sections. Added new images and assets for the updated design. Refactored author component to remove signal-based code and resolve merge conflicts, restoring standard Angular state management. Updated SCSS for new home page styles.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves : https://github.com/volosoft/vs-internal/issues/7556