Do you feel like you’re stuck in the web development dark ages? It’s time to bring your applications into the 21st century with Angular and Angular Material 15! These powerful technologies can help you build sleek, responsive, and dynamic applications that will leave your users in awe. But, we get it – transitioning to new technology can be a daunting task. That’s why we’ve put together this blog to help you make a smooth transition to Angular and Angular Material 15. So, put on your superhero cape and let’s get started on this web development adventure!
Features of Angular and Angular 15
Angular and Angular Material 15 are like the Batman and Robin of web development – a dynamic duo that pack a serious punch! Here are some of their coolest features that make them the superheroes of the web development world:
Angular Features
- TypeScript-Based
With TypeScript, Angular is like a ninja with a sharp sword that can easily cut through any obstacles in its path.
- Modular Architecture
Angular’s modular architecture is like the Swiss Army Knife of web development – it can handle any job, no matter how big or small.
- Two-way Data Binding
Angular’s two-way data binding is like having a secret telepathic connection between the model and the view, making it a powerful tool for building dynamic and responsive applications.
- Dependency Injection
Dependency injection is like having a team of superheroes backing you up – it provides all the support you need to take on any challenge.
- Reactive Programming
Angular’s reactive programming is like having superhuman reflexes – it allows you to build applications that can handle even the most demanding tasks.
- CLI
Angular’s CLI is like having a trusty sidekick that takes care of all the grunt work, so you can focus on building awesome applications.
Angular Material 15 Features
- Material Design Components
Angular Material 15 is like having a wardrobe full of designer clothes – it provides a set of sleek and stylish components that make your application look and feel amazing.
- Custom Theming
With Angular Material 15’s theming system, you can easily customize the look and feel of your application to match your brand or personal style.
- Accessibility
It is like a superhero that fights for justice and inclusivity – it provides support for screen readers and keyboard navigation, making your application accessible to everyone.
- Responsive Design
Angular Material 15 is like a chameleon that can adapt to any environment – it provides a responsive design system that allows your application to look great on any device.
- Compatibility
Compatibility of Angular Material 15 is like a universal translator that can communicate with anyone, anywhere – it’s compatible with a wide range of browsers and platforms, ensuring that your application works seamlessly across different devices and environments.
How to Implement a Smooth Transition from Angular to Angular Material 15?
- Get to Know Angular Material 15
Before diving into the transition process, it’s important to have a good understanding of Angular Material 15. Take some time to explore the Angular Material documentation, familiarize yourself with its components and features, and get a feel for the overall design system. This will help you make informed decisions about how to incorporate Angular Material into your application.
- Identify the Key Areas to Update
Take a close look at your existing application and identify the areas that need updating. This may include updating styles to align with the Angular Material design system, replacing existing components with Angular Material components, and modifying any custom directives or services that rely on Angular-specific features.
- Plan your Migration Strategy
Based on your evaluation of your technology stack, pain points, and areas for improvement, create a plan for how you will migrate your application to Angular Material. This may involve breaking the transition down into smaller steps, such as updating styles first, then replacing components, and finally updating custom directives & services.
- Set Realistic Goals and Create a Timeline
With your migration strategy in place, set realistic goals for each stage of the transition and create a timeline. This will help you stay on track and ensure that the transition is completed in a timely manner. Make sure to account for any potential roadblocks or setbacks that may arise during the process.
- Identify the Necessary Resources
Identify the resources needed to complete the transition, including developers, designers, and any necessary tools or software. Make sure that everyone involved in the transition is aware of their responsibilities and has the necessary resources to complete their tasks.
- Test and Refine
As you begin implementing the transition, continuously test and refine your application to ensure that everything is working as expected. This may involve fixing bugs, optimizing performance, and tweaking the user experience to align with Angular Material’s design principles.
Steps for Migrating your Code to Angular and Angular Material 15
Step 1: Verify Your Node.js Version
To ensure compatibility with the latest Angular release, verify that your machine has the appropriate Node.js version installed by running the command “node –version”. The supported versions are 14.20.x, 16.13.x, and 18.10.x.
Step 2: Upgrade Your TypeScript Dependency to Version 4.8.4 Using npm
To check for any available package updates, use the command “npm outdated”. If you want to update only the typescript dependency to version 4.8.4, execute “npm install typescript@4.8.4”. This command will modify the version of TypeScript in both package.json and package-lock.json files.
Step 3: Upgrade Your eslint Version
Get your engines revved up, it’s time to execute:
ng update @angular/core@15 @angular/cli@15
However, hold your horses as the console might spit out an error message if your repository isn’t clean due to modifications in package.json and package-lock.json files. See the example below:
the result of our lint-pre-commit task as defined in the pre-commit hook in package.json:
If you’re facing some uncritical errors, you can try using the –no-verify flag while committing, but it’s not the ideal solution.
A better alternative is to update the eslint packages in the package.json file. In our project, we updated the angular-eslint dependencies from version 14 to version 15.1.0, typescript-eslint/eslint-plugin and typescript-eslint/parser from version 5.29.0 to version 5.46.1, and eslint from version 8.18.0 to 8.29.0, and it did the trick!
"devDependencies": {
"@angular-eslint/builder": "15.1.0",
"@angular-eslint/eslint-plugin": "15.1.0",
"@angular-eslint/eslint-plugin-template": "15.1.0",
"@angular-eslint/schematics": "15.1.0",
"@angular-eslint/template-parser": "15.1.0",
"@typescript-eslint/eslint-plugin": "5.46.1",
"@typescript-eslint/parser": "5.46.1",
"eslint": "8.29.0",Step 4: Update Core and CLI to Version 15
After successfully resolving the linting problems, you must reran the command:
ng update @angular/core@15 @angular/cli@15
However, this time you now encounter peer dependency warnings:
To overcome these peer dependency warnings,you must add the –legacy-peer-deps flag to the command:
ng update @angular/core@15 @angular/cli@15 –legacy-peer-deps
This command not only upgraded Angular dependencies to version 15.0.3, but also made modifications to the tsconfig.json, package-lock.json files and deleted the .browserslistrc file.
Commit the change with the following command
git commit -m “Step 3 upgrade to Angular 15: running ng update @angular/core@15”
Step 5: Upgrade Angular Material
Alrighty, it’s time to update the Material components by running:
ng update @angular/material@15
However, you will encounter some pesky peer dependency errors. To overcome them, you must use the –force flag:
ng update @angular/material@15 –force
Executing the command has updated the Angular Material import statements throughout the project. Now, all the Angular Material components are being imported from the Legacy packages. But fret not, we will fix this soon.
In addition to updating the import statements, the command has also updated the Angular Material version in the package.json file.
Once the Angular Material update was complete, you may try to install the dependencies using the npm install command. Unfortunately, it may fail due to conflicting peerDependencies.
Now, we’re using the latest version (14.1.0) of angular-builders/jest, which has a peer dependency on angular-devkit/build-angular version 14.0.0. upgradation causes a conflict.
To force the installation and overcome the peer dependency errors, you must use the –legacy-peer-deps flag with the npm install command, as is done in npm version 7. Alternatively, you can use the –force flag.
The –legacy-peer-deps flag allows npm to ignore peer dependencies, similar to how it worked in versions prior to npm 7. The –force flag allows npm to fetch remote resources, even if a local copy already exists on the disk.
To perform installation follow the below steps:
- Delete the node_modules folder
- Delete package-lock.json
- Clear your npm cache: npm cache clean –force
- Install all dependencies again: npm install
Step 6: Delete polyfills.ts
You must delete the src/polyfills.ts file and changed its references in angular.json from to zone.js to match the structure:
"architect": {
"build": {
"options": {
"polyfills": "src/polyfills.ts",
..
With Angular 15:
"architect": {
"build": {
"options": {
"polyfills": [ "zone.js" ],
..
Also, remove src/polyfills.ts in tsconfig.app.json and tsconfig.spec.json
"files": ["src/main.ts", "src/polyfills.ts"],
In tsconfig.spec.json, I deleted this line:
"files": ["src/polyfills.ts"],Step 7: Update ng
Before proceeding to the next step, you must check for other packages that could be upgraded.
Run the ng update command and then adjust the version numbers in the package.json file accordingly.
Step 8: Migrating to Material Design Components in Angular 15
Angular Material v15 has been updated to conform to the Material Design Components (MDC) standards, which improves contrast, accessibility, and other issues. If you want to use components such as MatDialog, MatSnackbar, and MatButton from Angular Material v15 instead of the deprecated ones like MatLegacyDialog, you will need to complete the migration process.
You can initiate the migration process by running the command:
ng generate @angular/material:mdc-migration:
This will migrate your components to use the new MDC-based components.
The command has automatically updated the import statements from:
javascript
Copy code
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';to:
javascript
Copy code
import { MatInputModule } from '@angular/material/input';
import { MatTabsModule } from '@angular/material/tabs';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
@use "@angular/material" as mat;
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
// The following line adds:
// 1. Default typography styles for all components
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
// If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
@include mat.all-legacy-component-typographies();
@include mat.legacy-core();
$primary-palette: mat.define-palette(mat.$indigo-palette);
$accent-palette: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
$warn-palette: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$light-theme: mat.define-light-theme(
(
color: (
primary: $primary-palette,
accent: $accent-palette,
warn: $warn-palette,
),
)
);
$dark-theme: mat.define-dark-theme(
(
color: (
primary: $primary-palette,
accent: $accent-palette,
warn: $warn-palette,
),
)
);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component that you are using.
body.light,
body .light {
@include mat.all-legacy-component-colors($light-theme);
}
body.dark,
body .dark {
@include mat.all-legacy-component-colors($dark-theme);
}Step 9: Migration to MDC
If you encounter the following error when running the app:
error TS2740: Type ‘HTMLElement’ is missing the following properties from type ‘MatChipGrid’: controlType, _chipInput, _defaultRole, _ariaDescribedbyIds
It is likely that you are still using the old MatChipList instead of the new MatChipListInput component.
To fix this, you need to replace all instances of MatChipList with MatChipListInput in your code.
You can use match grip grid
Set the theme
To fix the theme in Angular Material v15, you need to adjust the theme configuration since the “mat.legacy-core” no longer includes default typography styles. Here’s how to do it:
@use "@angular/material" as mat;
@include mat.all-component-typographies();
@include mat.core();
$primary-palette: mat.define-palette(mat.$indigo-palette);
$accent-palette: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
$warn-palette: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$light-theme: mat.define-light-theme(
(
color: (
primary: $primary-palette,
accent: $accent-palette,
warn: $warn-palette,
),
)
);
$dark-theme: mat.define-dark-theme(
(
color: (
primary: $primary-palette,
accent: $accent-palette,
warn: $warn-palette,
),
)
);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component that you are using.
body.light,
body .light {
// Adds density level 0 styles
@include mat.all-component-colors($light-theme);
}
body.dark,
body .dark {
// Adds density level 0 styles
@include mat.all-component-colors($dark-theme);
}Set the Dialog
To fix the dialog, the padding and text color were modified:
.mat-mdc-dialog-container {
.mdc-dialog__surface {
padding: 24px;
}
}
.mdc-dialog .mdc-dialog__content {
padding: 0 !important;
}
.mat-mdc-dialog-container, .mdc-dialog .mdc-dialog__content {
@apply text-gray-800 dark:text-gray-100 #{'!important'};
}Conclusion
Thus, migrating from Angular 14 to Angular 15 is a necessary step to stay up to date with the latest features and security fixes. With careful planning and execution, this process can be a smooth transition.
The eight steps outlined in this blog – upgrading to Angular 14, upgrading to TypeScript 4.3, upgrading to RxJS 7, updating the polyfills, upgrading to Angular Material v15, fixing the migration to MDCs, fixing the theme, and fixing the dialog and mat-tab-nav – provide a clear path for ensuring a successful migration.
It is important to note that each project is unique and may require additional steps or adjustments. However, by following these steps and staying up to date with the latest documentation, developers can ensure a smooth and efficient migration process.
