angular-material-components | Angular Material Library provide extra components | User Interface library

I'm trying to build a webapp using Angular 12. However, when attempting to build, I get the following error:

Error: Module not found: Error: Can't resolve '@angular/animations/browser' in 'directorypath\@angular\platform-browser\fesm2020' Did you mean 'browser.js'? BREAKING CHANGE: The request '@angular/animations/browser' failed to resolve only because it was resolved as fully specified (probably because the origin is a '.mjs' file or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

I have tried multiple solutions including clearing the node_modules folder and reinstalling but nothing has helped. I have also confirmed that the directory [@angular\animations] does exist.

app.module.ts

I have an app on Angular 11 that just started getting errors (around an hour ago, without any update or anything) on all browsers, all environments (local / staging / prod) at the same time:

Check the stackblitz: https://stackblitz.com/edit/angular-material-components-demo-5k6gey?file=src/app/app.component.html

When it has an initial value, it is not shown in the view, and when try to clear its value, its still showed buggly. The internal value is always correct, the problem is the view. The "clear value" button is also bugged, it internally clears the value correctly, but the value is shown bugged in the view.

I have already try 1000 things, including emitModelToViewChange: true, changeDetector, read every StackOverflow/GitHub post, etc. Using compareFn shows a view initial value of All (which is incorrect, because it should show "11" instead of "", and it doesn't fix the "clear value" bug.

I'm using @angular-material-components/datetime-picker library for date picker. I use hideTime to just display date picker. The simplified code is below.

Following the guide we upgraded angular 11 to 12. Before the upgrade karma is running the unit tests without any issues. However, after the upgrade this is what we end up with. Any idea how to check whats wrong.

I also compared the source with a refresh angular 12 project (karma works here), but changes did not make any difference.

I have this line of code in almost every component file where I have subscribe to an observable returning from singleton service file.

destroy$ : Subject = new Subject()

I have an angular application upgraded to 11.

And I do a > ng build --prod

And I see this information:

I have converted an Angular project into a hybrid app following this guide: https://medium.com/@christof.thalmann/convert-angular-project-to-android-apk-in-10-steps-c49e2fddd29

For Android I did not run into many issues and the app is working as expected on that platform.

On IOS I ran into multiple difficulties. First of all in order contents display I needed to change the Angular LocationStrategy to HashLocation as describe in this SO topic:

Why Angular Router 8 router ...

Although I now do get content to render I still have trouble getting the dynamic content (i.e. the content requiring a call to a web server before rendering) to render properly.

My app has got a classic NavBar to switch from one component to another. If I activate one component by clicking on a Nav Button the static content gets rendered ok. However, the dynamic content is not there. I can verify this by looking at the source code: The holding the dynamic content is empty. If I click on the same Nav Button again the dynamic content is added. I get the same effect on an iPhone simulator and on a real device.

This is the html of one of the components

Im using angular in my project so I faced this issue I tried to downgrade my typscript to 3.9.7 but still not working here is my package.json dpendencies.