npm link is not working with angular-cli created projects

Question

I have created a project using angular-cli. There is one AppModule and AppComponent I want to use this AppModule and its components (AppComponent) in other angular apps. So I have created index.ts file and exported the AppModule and AppComponent

export {AppModule} from './src/app/app.module';
export {AppComponent} from './src/app/app.component';

Then created local linking using npm link and a link is created with the name defined in package.json.

Now In other project where I want to use this exported module run the

npm link project-name

Linking has been done successfully. I tried

import { AppModule as AModule} from 'my-components';

But this is not working as webpack gets failed to compiles AppModule file as the reference is not getting resolved. In SystemJs We defined the mapping of this in systemjs.config.js file but there is no config file.

How can I solve this?

Is there any other method to reuse local modules?

Were you able to solve this? – Alejandro Morán Nov 15 '17 at 10:35 — Alejandro Morán, Nov 15 '17 at 10:35
still not :( . will let you know – Sunil Garg Nov 16 '17 at 06:06 — Sunil Garg, Nov 16 '17 at 06:06

score 11 · Answer 1 · answered Oct 10 '19 at 20:51

11

In Angular 7, "preserveSymlinks": true

It worked for me: project > architect > build > options

answered Oct 10 '19 at 20:51

Diego Aragão

111
1
2

same for angular 13, this saves my day – Market Jan 31 '22 at 11:10

score 9 · Answer 2 · answered Mar 26 '19 at 11:39

9

Add the following to your tsconfig.json of the host application you are loading the npm-linked lib into.

    "paths": {
      "@angular/*": ["node_modules/@angular/*"]
    }

Apparently the linked packages can't use peer dependancies normally. This will force the library to use your app's node_modules/@angular/* libs, which is what happens when you npm install the lib.

answered Mar 26 '19 at 11:39

Martin

15,820
4
47
56

1

Thanks a lot!!!!!! you're my hero – Veco Dec 15 '21 at 20:59
1

This to me hours to find :( – Mark Apr 12 '22 at 00:45
This was the last thing I needed to fix my link errors, along with preserveSymlinks. – Andrew Knackstedt Mar 18 '23 at 13:16
The better question is _why has this not been fixed by the Angular team_? – Andrew Knackstedt Mar 18 '23 at 13:17

score 3 · Answer 3 · answered May 15 '19 at 08:59

3

It's working now with a "preserveSymlinks": true in your angular.json.

just add it there : project > architect > build.

answered May 15 '19 at 08:59

Yoann Augen

1,966
3
21
39

score 1 · Answer 4 · answered Aug 20 '17 at 22:58

1

this is a hot topic at the moment which seems not yet soloved completey. I got to the following information:

Linking lib created by the angular cli ist not that easy. You can read in the docs

https://github.com/angular/angular-cli/wiki/stories-linked-library

I was able to make it work by following the comment provided by nimaen in this post https://github.com/angular/angular-cli/issues/3875

--BR Dennis

answered Aug 20 '17 at 22:58

Dennis Fleischmann

11
1

I still have this problem and I can't solve it with that solution provided in the issues pages, any idea? – Alejandro Morán Nov 15 '17 at 10:34

score 1 · Accepted Answer · answered Jul 25 '18 at 14:42

1

You wont be able. Let me quote

We don't support Library building with the CLI right now. We do support linking libraries built properly inside a CLI application.

https://github.com/angular/angular-cli/issues/9273

answered Jul 25 '18 at 14:42

aemonge

2,289
1
24
26

1

Take a look here. I think the tgz alternative is much less of a headache. at least for the most part it seems to have less issues. https://dev.to/vishesh/creating-new-angular-library-and-publishing-it-in-npm-5f3g – Decoded Dec 08 '20 at 06:53
1

This answer is no longer valid – Martin Dec 16 '21 at 19:14

score 0 · Answer 6 · answered May 04 '20 at 12:43

You can drop the links to the projects to tsconfig.js file for any modules that you want to work in the source code form.

Note that the module alias must be a pointer to a TypeScript file without ts or js extension, not to the directory of package.json file.

{
  "compilerOptions": {
    ...
    "paths": {
      "my-third-party-package": [
        // Can be project root relative path or abs path on your hd
        "projects/my-third-party-package/src/index"
      ],
    }
  },
}

npm link is not working with angular-cli created projects

6 Answers6