Use a library in an imported angular application into multi-project structure

Question

I've an angular application a-app in 10.0.6, but I need to include it into an angular multi-project structure. In this multi-project structure, I have a b-app application.

Angular multi-project structure is working fine.
I have created a my-lib library and included it into b-app application and it's working. I followed this procedure Using your own library in applications
I moved my a-app application into the multi-project structure and it's working! To make this work, I'm using the package.json, tsconfig.json, tsconfig.base.json, angular.json from multiproject structure. And tsconfig.app.json and tsconfig.spec.json extends ../../tsconfig.base.json.
It means, I can run both applications a-app and b-app from multi-project structure.

Folder structure is this:

my-workspace/
  ...             (workspace-wide config files)
  projects/       (generated applications and libraries)
    a-app/        --(imported application manually)
      ...         --(application-specific config: karma.conf.js, tsconfig.app.json, tsconfig.spec.json)
      src/        --(source and support files for application)
    b-app/ --(an explicitly generated application)
      ...         --(application-specific config)
      src/        --(source and support files for application)
    my-lib/       --(a generated library)
      ...         --(library-specific config)
      src/        --source and support files for library)

But when I try to import my-lib in application a-app in the multi-project structure, it's not working!!! Just displays this error:

Cannot find module 'my-lib' or its corresponding type declarations

I've modified all config files from a-app to be similar to b-app, included the a-app in the angular.json, but still not working. Practically, I did steps 3-5 from here: Adding Angular application to an existing project

What am I missing in this configuration, to make it work?

Just a suggestion: try using NX. Angular workspaces have their limitations. For example, you cannot reference a library from another library, etc. — Pieterjan
– Pieterjan, Commented Dec 14, 2021 at 20:46
Here's an example workspace containing a yourube-api and youtube-player library + demo application. — Pieterjan
– Pieterjan, Commented Dec 14, 2021 at 21:24
Also another note: use the same major version number for your package as the angular version you're targetting. Eg. If your library uses @angular/core: ^12.1.3 then give your library a version 12.x.x. — Pieterjan
– Pieterjan, Commented Dec 14, 2021 at 21:29

georgeos · Accepted Answer · 2021-12-14 18:10:07Z

1

Well... It was a mistake.

I'm using Path mapping in a-app application which means that I had configured the paths property in tsconfig.app.json inside a-app.

With that configuration, the a-app didn't extend the paths property in tsconfig.base.json, therefore, it couldn't find the my-lib path declared on this file.

Solution: remove/check any configuration in your paths in tsconfig.app.json to extend properly the tsconfig.base.json

my-workspace/
  tsconfig.base.json <--- this file contains all libraries declared
  projects/       
    a-app/        
      tsconfig.app.json <--- Check this file in order to extend properly the tsconfig.base.json
    b-app/
      tsconfig.app.json
    my-lib/
      ...
      src/

answered Dec 14, 2021 at 18:10

georgeos

2,5312 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use a library in an imported angular application into multi-project structure

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related