npm link is not working with angular-cli created projects

npm link not working
npm link dist folder
npm link error
it is not recommended to publish ivy libraries to npm repositories
npm link-shared
angular cli versions
npm link react
ng-packagr

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?

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

NPM LINK does not work with angular app generated by angular cli , NPM LINK does not work with angular app generated by angular cli #9273 Use case: I want to create on lib app where I will put some modules Hi anyone doing npm link with angular project generated via angular cli can  git clone https://github.com/twbs/bootstrap-sass.git into a working directory, cd to that working directory and perform npm link command. ng new project in another separate directory, cd to the newly create project directory and perform npm link bootstrap-sass.

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.

Locally develop builder with npm link · Issue #13055 · angular , william-lohan opened this issue on Nov 26, 2018 · 6 comments npm i in my-​builders and my-cli-proj; npm link in my-builders; npm link my-builders in my-cli-​proj that you never plan on publishing in a mono repo along side a cli project? I do not have npm-install.ts file, but instead i have npm-install.js (and npm-install.d - MPEG2 TS video file and npm-install.js.map). The file npm-install.js is with similar code than the one showed int he fix, but there are some differences, which crash the new project.

In Angular 7, "preserveSymlinks": true

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

npm-link, CLI documentation > CLI commands First, npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/<package> that links to the cd ~/projects/node-redis # go into the package directory npm link # creates global link cd For example, to do the above use-case in a shorter way:. It seems like this is a issue caused by Typescript and not by Angular CLI. Typescript has problems resolving dependencies when yarn link or npm link is used, as you can see here #11916 and here #6496. This problem could be solved with Typescript 2.1 (read more here).

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

just add it there : project > architect > build.

@angular/cli, Before submitting new issues, have a look at issues marked with the Both the CLI and generated project have dependencies that require Node 8.9 or created in the directory where npm install @angular/cli was run upon  Install angular-cli: $ npm install -g @angular/cli; Try to create a new angular project with the currenct directory: $ ng new appName --directory ./ The last step is nowhere officially documented, however, multiple GitHub-issues linked to this, including: #755 #5431

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

Creating libraries, If you find that you need to solve the same problem in more than one app (or want to share You can build, test, and lint the project with CLI commands: ng While working on a published library, you can use npm link to avoid reinstalling the  This solution will work on existing angular projects as well as on new projects. but here is a link to the official download page. npm install -g @angular/cli Create a new project.

Create your Angular Library - Ramesh Prajapati, I had worked on different angular project, meanwhile I used many different Note: If you have not installed the Angular CLI yet. 2. npm link (generate link and create the node_modules dir in the dist/rpx-components-ui). Next, in some other location, npm link package-name will create a symbolic link from globally-installed package-name to node_modules/ of the current folder. Note that package-name is taken from package.json, not from directory name. The package name can be optionally prefixed with a scope. See npm-scope. The scope must be preceded by an

Converting your Angular CLI application into a NPM Module: Part , In the second part of our NPM & Angular CLI series we discuss how we turned our Here's an example of installing the package into your destination project The second, and preferred method, is using the npm link command to create a  Create a global symlink for a dependency with npm link. A symlink , short for symbolic link, is a shortcut that points to another directory or file on your system. Tell the application to use the

[Pro Tip] `npm link` explained - DEV, Tagged with angular, webdev, javascript. If you are working on a library that you want to import to your npm link <library-name> creates a symbolic link from project's local To locate your <global node_modules> directory, type npm root -​g in the command line. Made with love and Ruby on Rails. To start with, we will create an empty directory wherein, we will run the Angular CLI command. npm install -g @angular/cli //command to install angular 6 We have created an empty folder ProjectA4 and installed the Angular CLI command. We have also used -g to install Angular CLI globally. Now, you can create your Angular 4 project in any

Comments
  • Were you able to solve this?
  • still not :( . will let you know
  • I still have this problem and I can't solve it with that solution provided in the issues pages, any idea?