Angular-cli: Angular CLI can't find modules from locally installed library.

[eestein]

Versions

Angular CLI: 1.7.4
Node: 7.7.3
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

Repro steps

• create a library
• pack it using npm pack
• install the tgz file using npm install --save path_to_tgz_file
• run client project

Observed behavior

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@my_library/sdk' in '/Users/eestein/Documents/dev/my_library/sdk-front/samples/src/app'
ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve '@my_library/sdk' in '/Users/eestein/Documents/dev/my_library/sdk-front/samples/src/app'

Desired behavior

Angular CLI would recognize the local package.

Mention any other details that might be useful (optional)

This is what I have in my package.json of the client project:

"@my_library/sdk": "file:///Users/eestein/Documents/dev/my_library/sdk-front/library/my_library-sdk-1.0.0-alpha.2.tgz",

If I open both offending files (app.component.ts and app.module.ts) in VSCode no error is shown. It looks like VSCode can find it, but Angular CLI can't.

This is my folder structure:

- library
   - library's code
   - *.tgz file
- samples
    - samples' code
    - package.json referencing the tgz file

[eestein]

Anyone?
I still can't fix it :/

Thanks!

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[eestein]

@filipesilva Ok, I'm swamped with work right now, but I'll try to get it done by this Sunday/Monday.
Thank you for your support.

[eestein]

Hey @filipesilva, I've pushed the repro code here https://github.com/eestein/ng-extlib-bug-repro

I tried to remain pretty close to my real scenario. To run the project, use:

1 - Inside library folder: npm run build:local
2 - Inside samples folder: npm start

Please, let me know if you need anything else.

Thank you

[eestein]

@filipesilva hey man, any news on this? Could you reproduce? Thank you

[sporritt]

I have the same issue with one of my projects. Another problem I ran into was that I was unable to run the CLI 6 conversion utility (the project was originally in Angular 5) - the conversion utility failed to resolve the locally installed modules. Removing the locally installed modules from package.json allowed the conversion utility to run.

[sporritt]

i should point out that removing the node_modules directory and running npm install again made this issue go away for me.

[grsoares21]

I'm having the same issue, however removing the node_modules and running npm install again didn't fix it (I've also had to remove my local packages while using the conversion utility to migrate to Angular 6)

[filipesilva]

Hi @eestein I had a look at your repro and you seem to have a custom build step for you library. I'm guessing that something goes wrong while building/publishing the library and the module resolution does not work.

I can't really debug your build script but I can tell you that we use and test our setup listed in https://github.com/angular/angular-cli/wiki/stories-create-library. It uses ng-packagr to create the library, and also that we generally work with published libraries.

My advice to you is to look at how libraries generated with ng-packagr differ from yours, and that might help you find what's going wrong and adapt your build script. If I had to bet it's related to the library scope.

Hope this helps.

[jainankit102]

I am also facing the same issue while installing angular package from locale using ng-packagr. but when I open app.module.ts in VSCode no error is shown. It looks like VSCode can find it, but Angular CLI can't.

Any help would be great.

Thanks

[afroguy16]

I am having a similar issue.

ERROR in src/app/app.module.ts(3,29): error TS2307: Cannot find module 'ngx-bootstrap/modal'.

[iWooli]

Have you tried to build your library prior importing it? Use this ng build my-lib-name and as a result you should expect a new dist folder at the root of your project then retry the import.

[afroguy16]

@iWooli, I updated angular/cli and everything is working fine. Thanks.

[Dgs-asohail4]

I am facing the same issue
deleting node_modules and installing again doesn't fix my issue, upgrading the cli also doesn't fix my issue.

[miguelleitevieira]

Hi,
I created a library that export some classes used for datamodel.

index.ts
export * from './lib/user';

export class User {
id: number;
email: string;
name: string;
lastAccess: Date;
creationDate: Date;
};

I made the build of the library and tried to use on my project, but i get an error:
ERROR in src/app/@core/helpers/session.manager.ts(9,30): error TS2307: Cannot find module 'library-data'.

Someone know how to fix?

I already remove and reinstall packages but did'nt work.

[NodiraIbrogimova]

Hi,
I created a library that export some classes used for datamodel.

index.ts
export * from './lib/user';

export class User {
id: number;
email: string;
name: string;
lastAccess: Date;
creationDate: Date;
};

I made the build of the library and tried to use on my project, but i get an error:
ERROR in src/app/@core/helpers/session.manager.ts(9,30): error TS2307: Cannot find module 'library-data'.

Someone know how to fix?

I already remove and reinstall packages but did'nt work.

Did you find a solution? I face the same problem. If you fixed it can you please share the solution?

[miguelleitevieira]

Hi,
I created a library that export some classes used for datamodel.
index.ts
export * from './lib/user';
export class User {
id: number;
email: string;
name: string;
lastAccess: Date;
creationDate: Date;
};
I made the build of the library and tried to use on my project, but i get an error:
ERROR in src/app/@core/helpers/session.manager.ts(9,30): error TS2307: Cannot find module 'library-data'.
Someone know how to fix?
I already remove and reinstall packages but did'nt work.

Did you find a solution? I face the same problem. If you fixed it can you please share the solution?

Yes, I created the library using Angular 6.
Using that I could import library in Angular 7 projects too.

[gp187]

Why is this closed? The issue is still happening

[phil123456]

same here, just created a library and trying to use it, I get unresolved package while it is present in the node_modules directory

[bharding777]

AH!!!!!! i added a baseURL in tsconfig.json in the package im importing:

"baseUrl": "./",

[fedealu]

Any updates on this? Im facing this issue now...

[maxime1992]

@fedealu I've been struggling 2 hours with that and it's finally working.

Maybe this will help you https://github.com/angular/angular-cli/issues/10665#issuecomment-500795466

[fedealu]

@maxime1992 Ill take a look into that. Hopefully that helps. I'm re-installing every dependency of my library in the current proyect im using it. When I finally package that i hope it solves the issue!

Thanks though!

[rhoderunner]

I just noticed this thread when tracking down a similar (if not the same) issue. For me, I was pointing to the project directory, which allowed for the local import since there is a package.json file. The problem is that I should have been pointing to the parent project's dist/. Once I changed that, all worked fine. If I'm not too late, I hope it helps.

[kkrivera]

I just noticed this thread when tracking down a similar (if not the same) issue. For me, I was pointing to the project directory, which allowed for the local import since there is a package.json file. The problem is that I should have been pointing to the parent project's dist/. Once I changed that, all worked fine. If I'm not too late, I hope it helps.

@rhoderunner could you please provide some usage examples of this solution, or potentially a link to your GH repository?

[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._}