title: How to install FlexLayout successfully when using latest version of angular material?
body: <p>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):</p>
  <pre><code>npm ERR! code ERESOLVE
  npm ERR! ERESOLVE unable to resolve dependency tree
  npm ERR!
  npm ERR! While resolving: stock_tracker@0.0.0
  npm ERR! Found: @angular/cdk@13.3.9
  npm ERR! node_modules/@angular/cdk
  npm ERR!   @angular/cdk@&quot;^13.3.9&quot; from the root project
  npm ERR!
  npm ERR! Could not resolve dependency:
  npm ERR! peer @angular/cdk@&quot;^14.0.0&quot; from @angular/flex-layout@14.0.0-beta.40
  npm ERR! node_modules/@angular/flex-layout
  npm ERR!   @angular/flex-layout@&quot;^14.0.0-beta.40&quot; 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.
  </code></pre>
  <p>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.</p>
  <p>I tried &quot;npm install --legacy-peer-deps&quot; however it did not do any good</p>
  <p>I updated angular cli, core, cdk and material to version 14.1.3 and then tried installing flexLayout but I got the following error:</p>
  <pre><code>Failed to compile.
  ✔ Browser application bundle generation complete.
  &lt;e&gt; [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
  &lt;e&gt;     at makeWebpackError (C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\webpack\lib\HookWebpackError.js:48:9)
  &lt;e&gt;     at C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\webpack\lib\Compilation.js:3059:12
  &lt;e&gt;     at eval (eval at create (C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:60:1)
  &lt;e&gt;     at C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\webpack\lib\Compilation.js:510:26
  &lt;e&gt;     at C:\Users\wall\Desktop\Angular Projects\AngularMaterial\Stock-tracker\node_modules\copy-webpack-plugin\dist\index.js:708:13
  &lt;e&gt;     at runMicrotasks (&lt;anonymous&gt;)
  &lt;e&gt;     at processTicksAndRejections (node:internal/process/task_queues:96:5)
  &lt;e&gt; -- inner error --
  &lt;e&gt; 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     
  &lt;e&gt;     at new NodeError (node:internal/errors:371:5)
  &lt;e&gt;     at packageResolve (node:internal/modules/esm/resolve:884:9)
  &lt;e&gt;     at moduleResolve (node:internal/modules/esm/resolve:929:18)
  &lt;e&gt;     at defaultResolve (node:internal/modules/esm/resolve:1044:11)
  &lt;e&gt;     at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
  &lt;e&gt;     at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
  &lt;e&gt;     at ESMLoader.import (node:internal/modules/esm/loader:276:22)
  &lt;e&gt;     at importModuleDynamically (node:internal/modules/cjs/loader:1041:29)
  &lt;e&gt;     at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
  &lt;e&gt;     at importModuleDynamically (node:vm:381:46)
  &lt;e&gt; caused by plugins in Compilation.hooks.processAssets
  &lt;e&gt; 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     
  &lt;e&gt;     at new NodeError (node:internal/errors:371:5)
  &lt;e&gt;     at packageResolve (node:internal/modules/esm/resolve:884:9)
  &lt;e&gt;     at moduleResolve (node:internal/modules/esm/resolve:929:18)
  &lt;e&gt;     at defaultResolve (node:internal/modules/esm/resolve:1044:11)
  &lt;e&gt;     at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
  &lt;e&gt;     at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
  &lt;e&gt;     at ESMLoader.import (node:internal/modules/esm/loader:276:22)
  &lt;e&gt;     at importModuleDynamically (node:internal/modules/cjs/loader:1041:29)
  &lt;e&gt;     at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
  &lt;e&gt;     at importModuleDynamically (node:vm:381:46)
  </code></pre>
  <p>Any ideas on how to get around this?</p>