After installing Angular Material, receiving an error stating "Module '@angular/platform-browser/animations' not found."

Every time I launch my application, an error pops up:

The module '@angular/platform-browser/animations' cannot be found.

Here is the content of my package.json file:

{
  "name": "oscar-app-ihm",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.1",
    "@angular/common": "^15.0.1",
    "@angular/compiler": "^15.0.1",
    "@angular/core": "^15.0.1",
    "@angular/forms": "^15.0.1",
    "@angular/localize": "^15.0.1",
    "@angular/platform-browser": "^15.0.1",
    "@angular/platform-browser-dynamic": "^15.0.1",
    "@angular/router": "^15.0.1",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",
    "jquery": "^3.6.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.1",
    "@angular-eslint/builder": "15.0.0",
    "@angular-eslint/eslint-plugin": "15.0.0",
    "@angular-eslint/eslint-plugin-template": "15.0.0",
    "@angular-eslint/schematics": "15.0.0",
    "@angular-eslint/template-parser": "15.0.0",
    "@angular/cli": "^15.0.1",
    "@angular/compiler-cli": "^15.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.43.0",
    "@typescript-eslint/parser": "5.43.0",
    "eslint": "^8.28.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  }
}

This post on Stack Overflow suggests using npm to reinstall the angular/cli.

However, running npm commands gives me this error message:

npm ERR! Unexpected token '.'

To work around this issue, I tried using Yarn to add @angular/cli and @angular/platform-browser but it did not solve the problem.

I am executing commands in the IntelliJ console from the root directory of my application.

This problem seems to have surfaced after installing Angular Material with yarn add @angular/material.

When I run yarn install to install all dependencies, it returns the following output: yarn install v1.22.5 warning package.json: No license field warning No license field [1/4] Resolving packages... success Already up-to-date.

angulartypescriptnpmyarn-v2

Answer №1

It turns out that I was installing the dependencies in the incorrect folder initially; I needed to dive one folder deeper.

After realizing my mistake, I executed ng update @angular/cli @angular/core to elevate all the dependencies.

This is what my package JSON currently appears like:


{
  "name": "oscar-app-ihm",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.4",
    "@angular/common": "^15.0.4",
    "@angular/compiler": "^15.0.4",
    "@angular/core": "^15.0.4",
    "@angular/forms": "^15.0.4",
    "@angular/localize": "^15.0.4",
    "@angular/material": "^15.0.4",
    "@angular/platform-browser": "^15.0.4",
    "@angular/platform-browser-dynamic": "^15.0.4",
    "@angular/router": "^15.0.4",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",
    "jquery": "^3.6.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.1",
    "@angular-eslint/builder": "15.0.0",
    "@angular-eslint/eslint-plugin": "15.0.0",
    "@angular-eslint/eslint-plugin-template": "15.0.0",
    "@angular-eslint/schematics": "15.0.0",
    "@angular-eslint/template-parser": "15.0.0",
    "@angular/cli": "^15.0.1",
    "@angular/compiler-cli": "^15.0.4",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.43.0",
    "@typescript-eslint/parser": "5.43.0",
    "eslint": "^8.28.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  }
}

All dependencies previously at version 15.0.1 have now been updated to 15.0.4

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for importing Typescript-exporting libraries in next.js

Encountering a challenge while attempting to import a component from a private library that exports Typescript, we are met with the following error message: Module parse failed: Unexpected token (82:7) You may need an appropriate loader to handle this file ...

typescriptwebpacknext.jswebpack-4

Running a desktop Word AddIn using Angular 11.0.5 on MS Office 2016: A Step-by-Step Guide

I am facing an issue with loading my add-ins in the Office desktop version, although it works fine on the online platform. I initially developed the AddIn using Angular 5.2.11 and it worked perfectly. However, after upgrading to Angular 11.0.5, the Add-in ...

angularoffice-jsoffice-addins

What is the best way to import modules in Typescript/Javascript synchronously during runtime?

I have a Typescript class where I am attempting to perform a synchronous import, however, the import is being executed asynchronously. My code snippet looks like this: --------------100 lines of code-------------------- import('../../../x/y/z') ...

javascripttypescriptdynamic-import

Steps to display previous dates as inactive in Kendo date picker

Currently, I am utilizing the Kendo Date Picker for Kendo Angular UI to control the selection of dates within a specific range. However, the min and max attributes used to restrict users from selecting out-of-range dates completely hide them. https://i.ss ...

angularkendo-uikendo-datepickerkendodaterangepicker

Error TS2394: Function implementation does not match overload signature in Typescript

Take a look at this code that seems to be causing headaches for the TypeScript compiler: use(path: PathParams, ...handlers: RequestHandler[]): this use(path: PathParams, ...handlers: RequestHandlerParams[]): this use(...handlers: RequestHandler[]): this u ...

typescript

Does Node have a productionDependencies feature similar to devDependencies?

Is there a similar option to devDependencies but for installing packages exclusively on the production server? ...

node.jsnpm

Why does the Angular page not load on the first visit, but loads successfully on subsequent visits and opens without any issues?

I am currently in the process of converting a template to Angular that utilizes HTML, CSS, Bootstrap, JavaScript, and other similar technologies. Within the template, there is a loader function with a GIF animation embedded within it. Interestingly, upon ...

javascriptjqueryangulartypescriptbootstrap-4

What is the method for obtaining the number of weeks since the epoch? Is it possible to

Currently, I am setting up a DynamoDb store for weekly reporting. My idea is to use the week number since 1970 as a unique identifier for each report record, similar to epoch milliseconds. Here are some questions I have: How can I determine the current w ...

javascriptnode.jstypescriptdatetimetimezone

Techniques for simulating functions in Jest

I have a pair of basic components that I'm currently creating tests for using jest. My goal is to verify that when I click on a currencyItem, the corresponding array gets added to the select state. To achieve this, I am passing the handleCurrencyToggl ...

javascriptreactjstypescriptjestjsts-jest

Executing a PHP function within a Laravel controller using Ajax

In my Laravel project, I have a Controller named Clientecontroller that is working perfectly. It contains a method called listar() which retrieves client information. public function listar(Cliente $cliente) { $clientes = DB::table('clientes' ...

phpangularajaxlaravel

Having trouble with the command "npm install sails-mongo --save"?

When attempting to include sails-mongo in my Sails project by running npm install sails-mongo --save, I encountered the following error: ~/newWebApp $ npm install sails-mongo --save npm ERR! Linux 3.13.0-24-generic npm ERR! argv "node" "/usr/bin/npm" " ...

mongodbnpmsails.jswaterlinesails-mongo

Difficulty accessing class functions from the test application in Node.js NPM and Typescript

I created an NPM package to easily reuse a class. The package installs correctly and I can load the class, but unfortunately I am unable to access functions within the class. My project is built using TypeScript which compiles into a JavaScript class: For ...

javascriptnode.jsclasstypescriptnpm

The element access has been upgraded to utilize ng-content

I attempted to create a tabs component that could be used similarly to Angular Material Component. However, the solution I came up with was flawed and buggy. In this attempt, I utilized document.getElementsByTagName('app-tab'). This is the temp ...

angulartypescriptng-templateng-content

TS2304: The name 'Serializable' cannot be located

I'm having trouble understanding why it's not functioning properly now, especially since it was working before and I can't seem to pinpoint the mistake. Here is my code snippet: //my-class.service import { Injectable } from '@angular/ ...

angularangular5

Make the text in the SCSS file placeholder bold

Within my Angular front end application, there is a form containing a textarea: <mat-form-field class="full-width"> <textarea class="left-aligned" formcontrolname="x1" matInput placeholder="some text"/> </mat-form-field> In the co ...

cssangularhtml

The concept of inheriting directives/scopes

Just wondering if directives declared within a Component in Angular 2 automatically apply to its children Components. And when it comes to variables declared on the Component, do they get inherited by the children Components or must they be explicitly pa ...

javascriptangularjsangular

"Manipulating values in an array with a union type: a guide to setting and

I am currently working on creating an array that can have two different value types: type Loading = { loading: true } type Loaded = { loading: false, date: string, value: number, } type Items = Loading | Loaded const items: Items[] = ...

typescript

Having trouble with Angular's bypassSecurityTrustResourceUrl function not performing as intended?

I am encountering an issue with the functionality of DomSanitizer.bypassSecurityTrustResourceUrl. I have implemented the following pipe based on various online resources: import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; ...

angularangular-dom-sanitizer

Using React with TypeScript to implement a nested map function

I have developed an application using React typescript, incorporating redux and saga for state management. The data fetched is displayed on the browser with Google Maps integration where hovering over properties displays them on the map. To enhance user ...

reactjstypescriptconditional-operator

Using TypeScript TSX with type parameters

Is it possible to define type parameters in TypeScript TSX syntax? For instance, if I have a class Table<T>, can I use something like <Table<Person> data={...} /> ...

typescript