npm link is not working with angular-cli created projects

user_2172547 0
Viewed 12477

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?

npm-link angular-cli angular webpack javascript
6 Answers

In Angular 7, "preserveSymlinks": true

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

user_51043020

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.

user_2070510

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

just add it there : project > architect > build.

user_21758060
user_13608970

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"
      ],
    }
  },
}
user_3151680
Related