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?

Answer 1

In Angular 7, "preserveSymlinks": true

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

Answer 2

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.