angular-cli support npm linked libraries still not working

Please provide us with the following information:

OS?

Mac OSX El Capitan

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
ng version
angular-cli: 1.0.0-beta.22-1
node: 6.5.0
os: darwin x64

Repro steps.

• I have a package library (dlabs-web-components) that will be shared with many applications.
• The package library has package to host a set of styles used by all applications. It works just fine when not using npm link, and it is relatively simple:

// Settings file
@import "partials/variables";

// 3rd Party Libraries
@import "~bootstrap/scss/bootstrap";
@import "~bourbon/app/assets/stylesheets/bourbon"; // Place this AFTER bootstrap to avoid some conflicts

// Global partials
@import "partials/mixins";

// Misc partials
@import "partials/animations";
@import "partials/buttons";
@import "partials/contentFooter";
@import "partials/contentHeader";
@import "partials/layout";
@import "partials/loading";
@import "partials/misc";
@import "partials/nodes";
@import "partials/sideNav";
@import "partials/sparkline";
@import "partials/typography";

• I hap a trainer app, created an app using angular-cli (dlabs-web-components-app), used to illustrate the packages usage.
• dlabs-web-components-app has a dependency on dlabs-web-components
• ng build and ng serve work fine.
• _ Use npm link to connect dlabs-web-components-app to dlabs-web-components

npm link /Users/silveir/Projects/dlabs/dlabs-web-components/
/usr/local/lib/node_modules/dlabs-web-components -> /Users/silveir/Projects/dlabs/dlabs-web-components
/Users/silveir/Projects/dlabs/dlabs-web-components-app/node_modules/dlabs-web-components -> /usr/local/lib/node_modules/dlabs-web-components -> /Users/silveir/Projects/dlabs/dlabs-web-components

• Now, although ng build works, ng serve_ fails with the following meessage:

_Uncaught SyntaxError: Unexpected token :     styles.bundle.map:formatted:1 _

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

I run into this problem this past late Summer and discovered #1875, decided to wait until it was fixed; upon noticing that it was fixed when I upgraded to angular-cli@1.0.0-beta.24 I decided to give it a whirl. Unfortunately I found the exact same problem. This time, I decided to report it.

---

Thanks! We'll be in touch soon.

[sumigoma]

Same as #3760, still not resolved. It does seem like an angular issue.

[anand-ma]

I had the same issue. I end doing npm pack to create a tar and then install from tar (npm install ). It worked well!!

I should have added one additional comment regarding of the workaround, which I decided it is better than using npm link. The work around consists of the following:

• branch the package library repo, in my case named DLABS-894
• branch the trainer app, in my case also named DLABS-894
• update the trainer app dependency on the package library to be git+ssh - instead of npm; in my case it went:
  • from "dlabs-web-components": "0.0.3"
  • to "dlabs-web-components": "git+ssh://git@gitlab.ops.cld:Dematiclabs/dlabs-web-components.git#DLABS-894"
• if any work is required on the package library, the library has to be updated in the trainer app development environment after the package library changes are checked in.
• when work is done on the package library and trainer app, revert the rainer app dependency on the package library to be npm; in my case it went:
  • from: dlabs-web-components": "git+ssh://git@gitlab.ops.cld:Dematiclabs/dlabs-web-components.git#DLABS-894"
  • to: dlabs-web-components": "005"

Regards
Rodrigo

[filipesilva]

I'm not sure what's happening in your particular example. If you can get me a simple example, for instance a very basic repo that I can clone, link and see the problem, I can investigate.

[Bbbrinks]

@filipesilva

Made a reproduction repo: https://github.com/sterfpaul/angular-cli-issue-3875.

Check it out and npm install and link, then run ng build and you will see the problem with angular-cli and npm link.

[Bbbrinks]

Any update on this?

[Bbbrinks]

Partial workaround for the problem in my repo is to add the following paths configuration to tsconfig.json:

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

Doesn't seem to work for everything. Not for Observable from rxjs for example.

[filipesilva]

@sterfpaul the problem you describe is a different one than this issue proper, see #1514 (comment).

[Bbbrinks]

@filipesilva It seems that it's a problem that is solvable with webpack configuration and this wasn't a problem in the <beta.21 versions. And as angular cli is generating/handling the webpack configuration this does seem like a angular cli/webpack issue not a npm issue.