Angular-cli: CLI Webpack does not work with linked local packages

[jbeckton]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Linux CentOs 7
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.14
   node: 6.2.2
   os: linux x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

This app was created using the CLI Beta 10 then updated following this guide

1. The log given by the failure. Normally this include a stack trace and some
   more information.

metadata_resolver.js:230 Uncaught Error: Unexpected value 'SecurityModule' imported by the module 'AppModule'(anonymous function) @ metadata_resolver.js:230CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:215RuntimeCompiler._compileComponents @ runtime_compiler.js:126RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:64RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:55PlatformRef_._bootstrapModuleWithZone @ application_ref.js:303PlatformRef_.bootstrapModule @ application_ref.js:285(anonymous function) @ main.ts:12__webpack_require__ @ bootstrap b58e42a…:52(anonymous function) @ main.bundle.js:123845__webpack_require__ @ bootstrap b58e42a…:52webpackJsonpCallback @ bootstrap b58e42a…:23(anonymous function) @ main.bundle.js:1
2client?93b6:38 [WDS] App updated. Recompiling...

1. Mention any other details that might be useful.

I have a local Angular 2 library Package that I link (npm link mypackage) during development of this library. I have been working on this package in this manner for 6 months with no issues. Now that I am trying to upgrade to the CLI webpack version it no longer works

I have the package referenced in the dependencies section of my web app package.json file. I can see the sym link in my projects node_modules directory but it's like it does not exist when the app runs.

Another issue is that I have some css files inside this package but when I reference them in the angular-cli they are not loaded when the app loads.

"styles": [
        "../node_modules/digitalglobe-ui/css/dg-bootstrap-dark.min.css",
        "styles.css"
      ]

---

Thanks! We'll be in touch soon.

[ryburn52]

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.

[jbeckton]

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.

[serhiisol]

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 :(

[jahller]

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?

[jbeckton]

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.

[filipesilva]

Dupe of https://github.com/angular/angular-cli/issues/1875

[mprinc]

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
  
  
  • https://github.com/angular/angular-cli/issues/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/*"
      ]
    }
    ...
  }
  ...
}

1. 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

[rudzikdawid]

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

dir structure:

├─ 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?

[angular-automatic-lock-bot[bot]]

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._}