How to support angular material version 12.2.12 with hybrid application

[eapatel]

trafficstars

What are you trying to do?

I've application written in angularJs and as we all know angularJs is no more supported now. So planning to upgrade current app incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. Now I'm struggling to add material theme in this hybrid application. Material components are displayed but styling is missing.

Please help me with the solution how to support angular material theme of Version 12.2.13 in the application having angular version 12 with angularjs.

What troubleshooting steps have you tried?

Install angular material version 12.2.12 Added required material components in index.ts file Added theme path in gruntfile.js as below

watch: {
compile: { files: [ 'node_modules/@angular/material/prebuilt-themes/indigo-pink.css', 'less/**/.less', 'public/app/components/.less' ], }, }

got below out in the browser

Reproduction

Steps to reproduce:

1. Install angular material version 12.2.12
2. Added required material components in index.ts file
3. Added theme path in gruntfile.js as below

watch: {
compile: { files: [ 'node_modules/@angular/material/prebuilt-themes/indigo-pink.css', 'less/**/.less', 'public/app/components/.less' ], }, }

Environment

• Angular: 12.2.0
• CDK/Material: 11.2.12
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows