3

Background: I am working on an Angular project that combines Angular 7 and some newer Angular 19 packages. The goal is to successfully run the project using ng serve.

The Issue: I am encountering the following problems:

  1. When running ng serve, I get the error:
    "Could not find module '@angular-devkit/build-angular' from '...'."

  2. After updating Node.js and Angular CLI, I get the error:
    "TS18003: No inputs were found in config file 'tsconfig.json'."

What I Have Tried:

  1. Updated Node.js to version 18.20.5 to ensure compatibility with Angular CLI and other dependencies.

  2. Adjusted the angular.json and tsconfig.json files based on various recommendations found online. For example:

    • Ensured that the compilerOptions in tsconfig.json included proper paths and inputs.

    • Made sure that the angular.json file referenced valid builder packages.

  3. Cleared and reinstalled node_modules using:

    rm -rf node_modules
npm install

  4. Ran npm audit fix to resolve any potential dependency issues.

  5. Searched online for similar issues and applied suggested fixes, but none worked.

Key Configuration Details: Here are the relevant sections of my package.json:

"dependencies": {
  "@angular/animations": "^7.2.16",
  "@angular/common": "^7.2.16",
  "@angular/compiler": "^19.0.0",
  "@angular/core": "^7.2.16",
  "@angular/forms": "^7.2.16",
  "@angular/platform-browser": "^7.2.16",
  "@angular/platform-browser-dynamic": "^19.0.0"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~15.0.0",
  "@angular/cli": "^19.0.0",
  "@angular/compiler-cli": "^19.0.0",
  "typescript": "~4.8.4"
}

My angular.json file includes the following section:

"projects": {
  "app": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser"
      }
    }
  }
}

What I Expected: I expected the project to start successfully with ng serve without dependency or configuration errors.

Related Questions: I reviewed similar questions like:

However, none of them resolved my issue. My project uses a mix of Angular 7 and Angular 19 packages, which may be causing additional compatibility issues that were not covered in those answers.

My Question: What additional steps can I take to resolve these dependency and configuration issues? Should I downgrade all dependencies to align with Angular 7, or is there a better approach to mix versions?

Repository Link: For a full view of the configuration, see my repository: GitHub Repository.

Improve this question
4
  • 1
    I'd be shocked if the compiler/build tooling for v19 was drop-in compatible with v7. You could try using all v7 packages to start, but the update process via ng update is pretty painless and getting on to a newer version opens the door to performance, security, DX, and troubleshooting improvements. Commented Dec 2, 2024 at 18:06
  • Thank you! You're right about the compatibility issues between v7 and v19. I'll try aligning all dependencies to v7 to stabilize the project first, then consider upgrading via ng update. Any tips for handling a major version upgrade like this? Commented Dec 2, 2024 at 18:16
  • 2
    @MikeZyto At least one of the problems is that angular-devkit/build-angular version differs from the rest packages. They are often synced in case of frameworks, including this one. You can easily see this by checking a specific dep. If the latest major version is the same as the rest (19), that's it. If you're able to downgrade it to v7 and keep it in a workable state then do this and continue to upgrade in iterations with "ng update" as suggested, this way you'll be able to solve problems one by one, also this helps angular.dev/update-guide Commented Dec 2, 2024 at 18:26
  • Thanks for the suggestion! You’re probably right about the compatibility issues between v7 and v19. I’ll start by aligning everything to Angular 7 to stabilize the project, then upgrade step by step with ng update. Any tips or precautions for handling major version upgrades? Commented Dec 2, 2024 at 19:11
Related questions
904
Angular 6 - Could not find module "@angular-devkit/build-angular"
561
How do I debug "Error: spawn ENOENT" on node.js?
92
Error: Can't resolve 'core-js/es7/reflect' in '\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.