CLI Webpack does not work with linked local packages #2154

Activity

1. rburnham52 commented on Sep 16, 2016

   

   rburnham52

   on Sep 16, 2016

   More actions

   It sounds to me like this must be a problem specific to the project type. I ran this a similar scenario the other day. I was having problems figuring out how to use a require.js lib because brocoli kept through errors as it wasn't a typescript project dispite the fact i had updated my type definitions and could build with the typescript compiler directly, so i thought i would try the webpack branch and that fixed the issue. Then i had the situation where i wanted to make changes to the require.js app so i also had to use an npm link to debug it all together. I didn't have any issues with it.
2. jbeckton commented on Sep 16, 2016

   

   jbeckton

   on Sep 16, 2016

   Author

   More actions

   I went ahead and published my library package to our npm repo and installed it from there and it works as expected. The problems only exist when the library package is linked locally.

   👍React with 👍3Reacted by Bob Myers, Jaibatrik Dutta and Dr_PJ
3. serhiisol commented on Sep 19, 2016

   

   serhiisol

   on Sep 19, 2016

   Last edited by serhiisol

   Contributor

   More actions

   Agree, having same problem. I have other reusable components installed via npm link which are available from parent folder, but each time I need to run npm install for them, which is not really proper way, so I've tried npm link, but no luck.

   Any solutions so far?

   PS. There's the link for workaround http://webpack.github.io/docs/troubleshooting.html#npm-linked-modules-doesn-t-find-their-dependencies, but webpack configuration isn't available for us to modify :(

   👍React with 👍1Reacted by Jan
4. jahller commented on Sep 19, 2016

   

   jahller

   on Sep 19, 2016

   More actions

   npm link is also the proposed way to handle npm module development. what is the proposed way when using angular-cli, if npm linkis not working?

   👍React with 👍3Reacted by Jaibatrik Dutta, blackyale and Andrew Landsverk
5. jbeckton commented on Sep 19, 2016

   

   jbeckton

   on Sep 19, 2016

   Author

   More actions

   Not sure how to escalate this or at least get someone from the CLI team to look at it but if it can't be addressed soon I'll have to move my current and future projects to a Gulp tooling workflow. We do a lot of development inside linked packages, a fair amount of our core functions are shared in npm packages. This issue is blocking progress for my team.

   👍React with 👍1Reacted by Bob Myers
6. filipesilva commented on Sep 22, 2016

   

   filipesilva

   on Sep 22, 2016

   Contributor

   More actions

   Dupe of #1875
7. filipesilva

   closed this as completedon Sep 22, 2016
8. mprinc commented on Nov 9, 2017

   

   mprinc

   on Nov 9, 2017

   Last edited by mprinc

   Contributor

   More actions

   Here is an explanation how to do it properly: https://github.com/angular/angular-cli/wiki/stories-linked-library

   And here it is more elaborated:

   Solution (If you want to develop and build lib through the hosting app. This method will build the library with the methods and configuration of your app. Production releases can behave differently)

   • references
     • stories linked library
     • ng serve - npm linked library changes(updates) are not reflected in UI #6195
     • plone.restapi-angular/docs/development.rst
     • typescriptlang - module-resolution - path-mapping

   1. in the lib's package.json in the peerDependencies (this is for using the built library) and devDependencies (yes twice :), this is for building library separately, not through hosting app ) add all mutual (lib vs. host) dependencies (like all @angular, angular material, etc)
   2. in the host's tsconfig.json (some are suggesting tsconfig.app.json, but it should work for tests as well ?) direct TS compiler to your local (host) dependencies of the mutual dependencies

   {
     ...
     "compilerOptions": {
       ...
       "baseUrl": "./",
       "note1": "these paths are relative to `baseUrl` path.",
       "paths": {
         "@angular/*": [
           "node_modules/@angular/*"
         ]
       }
       ...
     }
     ...
   }

   3. configure angular-cli build to follow symlinks: in the .angular-cli.json add:

   {
     ...
     "defaults": {
       "build": {
         "preserveSymlinks": true
       }
     }
     ...
   }

   in this way you should be fine building lib in many scenarios

   • build it separatelly
   • build it throuh (and with) hosting app
   • load it (as prebuilt) to hosting app

   👍React with 👍2Reacted by Artem Arkhipov and Michael Yeung
9. rudzikdawid commented on Nov 26, 2017

   

   rudzikdawid

   on Nov 26, 2017

   More actions

   i have similar problem with @angular/cli 1.4.9 here https://github.com/swiety85/angular2gridster/tree/137-demo-src-app-gridster

   dir structure:

   angular2gridster
   ├─ demo //angular-cli app
   │  └─ src
   └─ src //library source
   

   reproduce steps:

   cd angular2gridster
   npm link
   cd demo
   npm link angular2gridster 
   

   
   after that in demo/node_modules we have linked angular2gridster package but with library's node_modules which unfortunately contain @angular/core

   start demo ng serve --preserve-symlinks affects error:

   Uncaught Error: Unexpected value 'GridsterModule'
   imported by the module 'AppModule'. Please add a @NgModule annotation.
   

   messy workaround

   removing demo/node_modules/angular2gridster/node_modules/@angular/core
   solves the problem temporary but after that we can't rebuild library.

   path mapping inside demo/src/tsconfig.app.json also doesn't help:

   "baseUrl": ".",
   "paths": {
      "@angular/core": ["../node_modules/@angular/core"]
    }
   

   library dependecies:

   "peerDependencies": {
       "@angular/common": "4.4.6",
       "@angular/core": "4.4.6"
     },
     "devDependencies": {
       "@angular/common": "4.4.6",
       "@angular/compiler": "4.4.6",
       "@angular/compiler-cli": "4.4.6",
       "@angular/core": "4.4.6",
       "@angular/language-service": "4.4.6",
       "@types/node": "~6.0.60",
       "codelyzer": "^3.0.1",
       "reflect-metadata": "~0.1.9",
       "rxjs": "^5.5.2",
       "ts-loader": "^2.0.1",
       "ts-node": "~3.0.4",
       "tslint": "~5.3.2",
       "typescript": "2.4.2",
       "zone.js": "^0.8.4"
     }
   

   demo dependencies:

   "dependencies": {
       "@angular/animations": "4.4.6",
       "@angular/common": "4.4.6",
       "@angular/compiler": "4.4.6",
       "@angular/core": "4.4.6",
       "@angular/forms": "4.4.6",
       "@angular/http": "4.4.6",
       "@angular/platform-browser": "4.4.6",
       "@angular/platform-browser-dynamic": "4.4.6",
       "@angular/router": "4.4.6",
       "core-js": "^2.5.1",
       "rxjs": "^5.5.2",
       "zone.js": "^0.8.4"
     },
     "devDependencies": {
       "@angular/cli": "1.4.9",
       "@angular/compiler-cli": "4.4.6",
       "@angular/language-service": "4.4.6",
       "@types/jasmine": "~2.5.53",
       "@types/jasminewd2": "~2.0.2",
       "@types/node": "~6.0.60",
       "codelyzer": "~3.0.1",
       "gh-pages": "^1.1.0",
       "jasmine-core": "~2.6.2",
       "jasmine-spec-reporter": "~4.1.0",
       "karma": "~1.7.0",
       "karma-chrome-launcher": "~2.1.1",
       "karma-cli": "~1.0.1",
       "karma-coverage-istanbul-reporter": "^1.2.1",
       "karma-jasmine": "~1.1.0",
       "karma-jasmine-html-reporter": "^0.2.2",
       "protractor": "~5.1.2",
       "ts-node": "~3.0.4",
       "tslint": "~5.3.2",
       "typescript": "2.4.2"
     }
   

   any idea?

   👍React with 👍2Reacted by David Blaney and Augusto Moura
10. angular-automatic-lock-bot commented on Sep 7, 2019

    

    angular-automatic-lock-botBot

    on Sep 7, 2019

    More actions

    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.}
11. angular-automatic-lock-bot

    locked and limited conversation to collaborators on Sep 7, 2019