Search code examples
javascriptangularangular-elements

ERROR in The target entry-point "@angular/elements" has missing dependencies:

I have seen almost all the similar posts, but I am unable to resolve it using those steps. I have been trying to create a web component using Angular 9. Angular version and details are :

AV:webcomponents apoorvachikara$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.15
Node: 10.19.0
OS: darwin x64

Angular: 9.1.13
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.15
@angular-devkit/build-angular     0.901.15
@angular-devkit/build-optimizer   0.901.15
@angular-devkit/build-webpack     0.901.15
@angular-devkit/core              9.1.15
@angular-devkit/schematics        9.1.15
@angular/cli                      9.1.15
@angular/elements                 11.2.7
@ngtools/webpack                  9.1.15
@schematics/angular               9.1.15
@schematics/update                0.901.15
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

When I create a new project using angular-cli it runs fine, but when I add @angular/elements it skipped installation and throw an exception below:

AV:webcomponents apoorvachikara$ ng add @angular/elements 
Skipping installation: Package already installed
An unhandled exception occurred: Cannot find module '@angular-devkit/schematics'
See "/private/var/folders/0f/z1g4yzrn2wx4d7fjn17wsybr0000gn/T/ng-EYiR8c/angular-errors.log" for further details.

Now, when I try to run the angular app it throws

ERROR in The target entry-point "@angular/elements" has missing dependencies:
- @angular/core
- rxjs

What I tried already -

  1. Cleared the node_modules and reinstalled them.
  2. removed package-lock.json and followed the step-1.
  3. Cleared nom cache and followed step-1 and 2.

I am unsure about it, what is breaking it? I have been following angular tutorial to make custom web element, Thanks!

Solution

  • I'm able to finally resolve it by using below steps:

    1. removed node_modules
    2. cleared the cache
    3. npm i @angular/elements
    4. ng add @angular/elements

    The reason was the dependencies of angular/elements were not installed properly due to which it is throwing an error.