hamzahamidi/ajsf

Angular Version Compatibility - Broken compatibility with Angular 12

eyad-kobatte opened this issue · 1 comments

eyad-kobatte commented

Describe the bug

  • MaterialDesignFrameworkModule — Material Design
  • Bootstrap3FrameworkModule — Bootstrap 3
  • Bootstrap4FrameworkModule — Bootstrap 4
  • NoFrameworkModule — plain HTML
  • Other (please specify below)

Using this library with Angular 12 fails to start the angular project when the MaterialDesignFrameworkModule is imported within the module.

To Reproduce
Steps to reproduce the behavior:

  1. Setup a new project with @angular/cli@12.
  2. Install this library
  3. Import the module
  4. Run the application
  5. Error

Expected behavior
Allow this library to be used with Angular 12.

Desktop (please complete the following information):

  • OS: macOS Big Sur 11.2.1
  • Browser NA
  • Version (Angular 11, Angular 12, @ajsf/material@0.4.0-beta.1

Log output covering before error and any error statements

Installing @ajsf/material normally - npm i @ajsf/material

❯ npm install @ajsf/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: project-name@0.0.1
npm ERR! Found: @angular/cdk@12.1.1
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"12.1.1" from the root project
npm ERR!   peer @angular/cdk@">=11.0.0" from @ajsf/material@0.4.0-beta.1
npm ERR!   node_modules/@ajsf/material
npm ERR!     @ajsf/material@"*" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/cdk@"^11.0.0" from @angular/flex-layout@11.0.0-beta.33
npm ERR! node_modules/@angular/flex-layout
npm ERR!   peer @angular/flex-layout@">=11.0.0-beta.33" from @ajsf/material@0.4.0-beta.1
npm ERR!   node_modules/@ajsf/material
npm ERR!     @ajsf/material@"*" 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 /Users/eyad/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/eyad/.npm/_logs/2021-09-28T12_48_47_073Z-debug.log

Looks like @angular/flex-layout@11.0.0-beta.33 is the library that is causing some issues

If we install with npm install @ajsf/material --legacy-peer-deps, The package is installed without errors, But when the library is imported into the module, errors are throws

⠋ Generating browser application bundles.../Users/eyad/workspace/work/project/angular-12-project/node_modules/@angular/compiler-cli/ngcc/src/entry_point_finder/targeted_entry_point_finder.js:40
                throw new Error("The target entry-point \"" + invalidTarget.entryPoint.name + "\" has missing dependencies:\n" +
                ^

Error: The target entry-point "@ajsf/material" has missing dependencies:
 - @angular/flex-layout
 - @angular/flex-layout/core

    at TargetedEntryPointFinder.findEntryPoints (/Users/eyad/workspace/work/project/angular-12-project/node_modules/@angular/compiler-cli/ngcc/src/entry_point_finder/targeted_entry_point_finder.js:40:23)
    at /Users/eyad/workspace/work/project/angular-12-project/node_modules/@angular/compiler-cli/ngcc/src/execution/analyze_entry_points.js:29:41
    at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (/Users/eyad/workspace/work/project/angular-12-project/node_modules/@angular/compiler-cli/ngcc/src/execution/single_process_executor.js:28:29)
    at /Users/eyad/workspace/work/project/angular-12-project/node_modules/@angular/compiler-cli/ngcc/src/execution/single_process_executor.js:57:59
    at SyncLocker.lock (/Users/eyad/workspace/work/project/angular-12-project/node_modules/@angular/compiler-cli/ngcc/src/locking/sync_locker.js:34:24)
    at SingleProcessExecutorSync.execute (/Users/eyad/workspace/work/project/angular-12-project/node_modules/@angular/compiler-cli/ngcc/src/execution/single_process_executor.js:57:27)
    at Object.mainNgcc (/Users/eyad/workspace/work/project/angular-12-project/node_modules/@angular/compiler-cli/ngcc/src/main.js:74:25)
    at Object.process (/Users/eyad/workspace/work/project/angular-12-project/node_modules/@angular/compiler-cli/ngcc/index.js:29:23)
    at NgccProcessor.processModule (/Users/eyad/workspace/work/project/angular-12-project/node_modules/@ngtools/webpack/src/ngcc_processor.js:175:16)
    at /Users/eyad/workspace/work/project/angular-12-project/node_modules/@ngtools/webpack/src/ivy/host.js:146:18

Detailed Description
Allow newer versions of Angular to use this library.

Context
I am trying to install this on a fairly large (medium-sized) project. Downgrading to Angular 11 is not easy, but this library is going to be a very useful feature in our application. Allowing newer version of angular would be extremely beneficial

Possible Implementation
I would like to help out if possible, but I am a bit lost on how this can be achieved. Looks like there are some peer deps that could be causing this issue.

eyad-kobatte commented

Here is how I solved this issue.

I have not been using the @angular/flex-layout library in my project, so that was the only missing peer dependency.
I went ahead and installed @angular/flex-layout@11.0.0-beta.33. Next step was to install the ajsf library itself, but installing it normally would still resolve into a dependency issue, so I had to install it with the--legacy-peer-deps flag. npm i @ajsf/material --legacy-peer-deps worked fine for installation.

Now the library works in my Angular 12 project without any issues