Update for angular v14 🥹😇

[maximedupre]

Currently when running npx ng update @angular/cdk

Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/cdk" (requires "^13.0.0", would install "14.0.0").

[AlexanderNZ]

Quick note that being naughty and installing with --force results in my application working. Looks like flex layout is compatible with @angular/cdk 14 - just might not be marked as such.

Worth running a regression test over your application but the issue is not a blocking one (at least for me 😅 )

[ianvink]

thank you for all your hard work.

[csname1910]

Just add to package.json:

"overrides": {
"@angular/flex-layout": { "@angular/cdk": "^14.0.0", "@angular/common": "^14.0.0", "@angular/core": "^14.0.0", "@angular/platform-browser": "^14.0.0" } },

[crh225]

https://github.com/angular/flex-layout/pull/1405 PR is out there. build is timing out

[AlonsoK28]

When try to install on Angular 14

PS D:\Documents\dev\project> ng add @angular/flex-layout --force
ℹ Using package manager: npm
⚠ Unable to find compatible package. Using 'latest' tag.
⚠ Package has unmet peer dependencies. Adding the package may not succeed.

The package @angular/flex-layout@13.0.0-beta.38 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: xadani-admin@0.0.0
npm ERR! Found: @angular/cdk@14.0.1
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"^14.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/cdk@"^13.0.0" from @angular/flex-layout@13.0.0-beta.38
npm ERR! node_modules/@angular/flex-layout
npm ERR!   @angular/flex-layout@"13.0.0-beta.38" 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.
npm ERR!
npm ERR! See C:\Users\Alons\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Alons\AppData\Local\npm-cache\_logs\2022-06-09T18_49_17_715Z-debug-0.log
✖ Packages installation failed, see above.

[Tyler-V]

Can only be installed with npm i --force right now on the latest Angular version

[kasir-barati]

PLEASE FIX THIS ISSUE:

$ ng add @angular/flex-layout @angular/cdk
ℹ Using package manager: pnpm
⚠ Unable to find compatible package. Using 'latest' tag.
⚠ Package has unmet peer dependencies. Adding the package may not succeed.

The package @angular/flex-layout@13.0.0-beta.38 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
Package "@angular/flex-layout" was found but does not support schematics.
$ pnpm add @angular/flex-layout @angular/cdk
Already up-to-date
Progress: resolved 543, reused 523, downloaded 0, added 0, done
 WARN  Issues with peer dependencies found
.
└─┬ @angular/flex-layout
  ├── ✕ unmet peer @angular/cdk@^13.0.0: found 14.0.2
  ├── ✕ unmet peer @angular/core@^13.0.0: found 14.0.1
  ├── ✕ unmet peer @angular/common@^13.0.0: found 14.0.1
  └── ✕ unmet peer @angular/platform-browser@^13.0.0: found 14.0.1
$ pnpm add @angular/flex-layout @angular/cdk --force
 WARN  using --force I sure hope you know what you are doing
 WARN  deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
Packages: +867
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 866, reused 846, downloaded 20, added 867, done
node_modules/.pnpm/nice-napi@1.0.2/node_modules/nice-napi: Running install script, done in 364ms
node_modules/.pnpm/esbuild@0.14.38/node_modules/esbuild: Running postinstall script, done in 178ms
 WARN  Issues with peer dependencies found
.
└─┬ @angular/flex-layout
  ├── ✕ unmet peer @angular/cdk@^13.0.0: found 14.0.2
  ├── ✕ unmet peer @angular/core@^13.0.0: found 14.0.1
  ├── ✕ unmet peer @angular/common@^13.0.0: found 14.0.1
  └── ✕ unmet peer @angular/platform-browser@^13.0.0: found 14.0.1

Note that using --force flag caused to download new packages.

[vernes]

Any update on this? I can confirm that forcing install seems to work just fine in my case.

[Sebastian-G]

Seems like the most promising PR is https://github.com/angular/flex-layout/pull/1409 but it didn't pass the pipe 😭

[brianpooe]

Facing the same issue, any update on this?

[chamikasandamal]

Please fix the PR check for this

[CaerusKaru]

Hi all, I've posted an update in #1409, but essentially we're waiting to either disable that CI check or to reach a conclusion in our investigation of the issue. Whichever comes first will lead to the PR being merged and us cutting a new release. I apologize for the wait thus far, this release has come at a tough time logistically for me, but I assure you we will get this merged and cut a new release as soon as possible.

[ianvink]

there is no way you read my CV.

On Thu, Jun 30, 2022 at 9:47 AM CaerusKaru @.***> wrote:

Closed #1404 https://github.com/angular/flex-layout/issues/1404 as completed via #1415 https://github.com/angular/flex-layout/pull/1415.

— Reply to this email directly, view it on GitHub https://github.com/angular/flex-layout/issues/1404#event-6912492032, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA3SFFXPPNO6HQELE4TEODVRXFTPANCNFSM5XV23OOQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[TRupesh07]

can anyone please look into this . I am getting this error after installation of npm i -s @angular/flex-layout @angular/cdk amd imported flexlayout to app.module.ts and imported mediaObserver in app.componenet.ts. Here is the error.

ERROR in ./node_modules/@angular/flex-layout/fesm2015/angular-flex-layout.mjs 66:0-27 Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available) ERROR in ./node_modules/@angular/flex-layout/fesm2015/angular-flex-layout.mjs 63:24-45 Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available) ERROR in ./node_modules/@angular/flex-layout/fesm2015/angular-flex-layout.mjs 65:24-46 Can't import the named export 'ɵɵngDeclareInjector' from non EcmaScript module (only default export is available) ERROR in ./node_modules/@angular/flex-layout/fesm2015/angular-flex-layout.mjs 64:24-46 Can't import the named export 'ɵɵngDeclareNgModule' from non EcmaScript module (only default export is available) ERROR in ./node_modules/@angular/flex-layout/fesm2015/angular-flex-layout.mjs Module not found: Error: Can't resolve '@angular/flex-layout/core' in 'C:\Macersoft\LearnRupesh\Admindashboard\node_modules\@angular\flex-layout\fesm2015' ERROR in ./node_modules/@angular/flex-layout/fesm2015/angular-flex-layout.mjs Module not found: Error: Can't resolve '@angular/flex-layout/extended' in 'C:\Macersoft\LearnRupesh\Admindashboard\node_modules\@angular\flex-layout\fesm2015' ERROR in ./node_modules/@angular/flex-layout/fesm2015/angular-flex-layout.mjs Module not found: Error: Can't resolve '@angular/flex-layout/flex' in 'C:\Macersoft\LearnRupesh\Admindashboard\node_modules\@angular\flex-layout\fesm2015' ERROR in ./node_modules/@angular/flex-layout/fesm2015/angular-flex-layout.mjs Module not found: Error: Can't resolve '@angular/flex-layout/grid' in 'C:\Macersoft\LearnRupesh\Admindashboard\node_modules\@angular\flex-layout\fesm2015'

ERROR in node_modules/@angular/flex-layout/core/module.d.ts:8:21 - error TS2694: Namespace '"C:/Macersoft/LearnRupesh/Admindashboard/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.        

8     static ɵfac: i0.ɵɵFactoryDeclaration<CoreModule, never>;
                      ~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/module.d.ts:9:21 - error TS2694: Namespace '"C:/Macersoft/LearnRupesh/Admindashboard/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

9     static ɵmod: i0.ɵɵNgModuleDeclaration<CoreModule, never, never, never>;
                      ~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/module.d.ts:10:21 - error TS2694: Namespace '"C:/Macersoft/LearnRupesh/Admindashboard/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

10     static ɵinj: i0.ɵɵInjectorDeclaration<CoreModule>;
                       ~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/stylesheet-map/stylesheet-map.d.ts:22:21 - error TS2694: Namespace '"C:/Macersoft/LearnRupesh/Admindashboard/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

22     static ɵfac: i0.ɵɵFactoryDeclaration<StylesheetMap, never>;
                       ~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/stylesheet-map/stylesheet-map.d.ts:23:22 - error TS2694: Namespace '"C:/Macersoft/LearnRupesh/Admindashboard/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.

[michaelfaith]

Since this issue has already been resolved and released, you may have more success by opening a new issue (and providing a reproduction repo). Just a suggestion.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}