I installed angular material using the command: ng add @angular/material, however now that I want to also install FlexLayout I keep getting the following error (npm i @angular/flex-layout):
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR! @angular/cdk@"^13.3.9" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/cdk@"^14.0.0" from @angular/[email protected]
npm ERR! node_modules/@angular/flex-layout
npm ERR! @angular/flex-layout@"^14.0.0-beta.40" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
If I use npm i @angular/flex-layout --force then I am able to install it but as soon as I add the import in the app.module.ts file I keep getting error error TS2314 for all components. If I remove the import for FlexLayout everything works again.
I tried "npm install --legacy-peer-deps" however it did not do any good
I updated angular cli, core, cdk and material to version 14.1.3 and then tried installing flexLayout but I got the following error:
Failed to compile.
✔ Browser application bundle generation complete.
<e> [webpack-dev-middleware] HookWebpackError: Cannot find package 'globby' imported from C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\copy-webpack-plugin\dist\index.js
<e> at makeWebpackError (C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\webpack\lib\HookWebpackError.js:48:9)
<e> at C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\webpack\lib\Compilation.js:3059:12
<e> at eval (eval at create (C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:60:1)
<e> at C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\webpack\lib\Compilation.js:510:26
<e> at C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\copy-webpack-plugin\dist\index.js:708:13
<e> at runMicrotasks (<anonymous>)
<e> at processTicksAndRejections (node:internal/process/task_queues:96:5)
<e> -- inner error --
<e> Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'globby' imported from C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\copy-webpack-plugin\dist\index.js
<e> at new NodeError (node:internal/errors:371:5)
<e> at packageResolve (node:internal/modules/esm/resolve:884:9)
<e> at moduleResolve (node:internal/modules/esm/resolve:929:18)
<e> at defaultResolve (node:internal/modules/esm/resolve:1044:11)
<e> at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
<e> at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
<e> at ESMLoader.import (node:internal/modules/esm/loader:276:22)
<e> at importModuleDynamically (node:internal/modules/cjs/loader:1041:29)
<e> at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
<e> at importModuleDynamically (node:vm:381:46)
<e> caused by plugins in Compilation.hooks.processAssets
<e> Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'globby' imported from C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\copy-webpack-plugin\dist\index.js
<e> at new NodeError (node:internal/errors:371:5)
<e> at packageResolve (node:internal/modules/esm/resolve:884:9)
<e> at moduleResolve (node:internal/modules/esm/resolve:929:18)
<e> at defaultResolve (node:internal/modules/esm/resolve:1044:11)
<e> at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
<e> at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
<e> at ESMLoader.import (node:internal/modules/esm/loader:276:22)
<e> at importModuleDynamically (node:internal/modules/cjs/loader:1041:29)
<e> at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
<e> at importModuleDynamically (node:vm:381:46)
Any ideas on how to get around this?
So we need to install flex-layout with the specific version which is compatible to our cli version.