Angular-cli: Build fail when using npm link to some libraries

[FabienDehopre]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Windows 10

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.24
node: 6.9.1
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1
@angular/language-service: 2.4.1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.
This is the repro steps from scratch with empty projects:

1. git clone https://github.com/driftyco/ionic-module-template.git
2. cd ionic-module-template
3. npm install
4. npm run build (on linux) or npm run ngc (on windows since rm does exist on windows)
5. npm link
6. cd ..
7. ng new npm-link-test
8. cd npm-link-test
9. npm link ionic-module-template
10. edit the app.module.ts to add the MyModule module from ionic-module-template:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MyModule } from 'ionic-module-template';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. edit the app.component.ts to add the MyProvider service from ionic-module-template to the AppComponent:

import { Component, OnInit } from '@angular/core';
import { MyProvider } from 'ionic-module-template';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  constructor(private myProvider: MyProvider) {}

  ngOnInit() {
    this.myProvider.myMethod();
  }
}

1. Add the component from ionic-module-template to app.component.html:

<h1>
  {{title}}
</h1>
<my-component></my-component>

1. ng build

The log given by the failure.

Normally this include a stack trace and some more information.
Here is the output of ng build command on the test app:

Hash: 8c3250decc0c7c8b97a1
Time: 10554ms
chunk    {0} main.bundle.js, main.bundle.map (main) 8.3 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 1.77 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.6 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'MyModule'. Consider exporting the symbol (position 23:14 in the original .ts file), resolving symbol MyModule in C:/Users/f.dehopre/devs/RnD/npm-link-test/node_modules/ionic-module-template/dist/my-module.module.d.ts, resolving symbol MyModule in C:/Users/f.dehopre/devs/RnD/npm-link-test/node_modules/ionic-module-template/dist/index.d.ts, resolving symbol AppModule in C:/Users/f.dehopre/devs/RnD/npm-link-test/src/app/app.module.ts, resolving symbol AppModule in C:/Users/f.dehopre/devs/RnD/npm-link-test/src/app/app.module.ts

Here is the output of ng build on the real project I work on:

Hash: 34d5797ca74c399e85ba
Time: 33692ms
chunk    {0} 0.chunk.js, 0.bundle.map 847 kB {1} [rendered]
chunk    {1} main.bundle.js, main.bundle.map (main) 1.83 MB {4} [initial] [rendered]
chunk    {2} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 244 kB {5} [initial] [rendered]
chunk    {3} scripts.bundle.js, scripts.bundle.map (scripts) 375 kB {5} [initial] [rendered]
chunk    {4} vendor.bundle.js, vendor.bundle.map (vendor) 4.5 MB [initial] [rendered]
chunk    {5} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'OpaqueToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol PORTAL_COMMON_MODULE_CONFIG in c:/Users/f.dehopre/devs/Portal/frontend/website/node_modules/portal-common/dist/common.module.d.ts, resolving symbol provideServices in c:/Users/f.dehopre/devs/Portal/frontend/website/node_modules/portal-common/dist/common.module.d.ts, resolving symbol PortalCommonModule.forRoot in c:/Users/f.dehopre/devs/Portal/frontend/website/node_modules/portal-common/dist/common.module.d.ts, resolving symbol AppModule in c:/Users/f.dehopre/devs/Portal/frontend/website/src/app/app.module.ts, resolving symbol AppModule in c:/Users/f.dehopre/devs/Portal/frontend/website/src/app/app.module.ts

ERROR in ./src/app/layout/layout.component.ts
Module build failed: Error: c:/Users/f.dehopre/devs/Portal/frontend/website/src/app/layout/layout.component.ts (46,12): Type 'Observable<IClient[]>' is not assignable to type 'Observable<IClient[]>'.
  Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.)
c:/Users/f.dehopre/devs/Portal/frontend/website/src/app/layout/layout.component.ts (54,12): Type 'Observable<string>' is not assignable to type 'Observable<string>'.
  Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.)
c:/Users/f.dehopre/devs/Portal/frontend/website/src/app/layout/layout.component.ts (59,12): Type 'Observable<IUser[]>' is not assignable to type 'Observable<IUser[]>'.
  Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.)
c:/Users/f.dehopre/devs/Portal/frontend/website/src/app/layout/layout.component.ts (63,12): Type 'Observable<IImpersonateUser>' is not assignable to type 'Observable<IImpersonateUser>'.
  Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.)
c:/Users/f.dehopre/devs/Portal/frontend/website/src/app/layout/layout.component.ts (98,12): Type 'Observable<boolean>' is not assignable to type 'Observable<boolean>'.
  Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.)
    at _checkDiagnostics (c:\Users\f.dehopre\devs\Portal\frontend\website\node_modules\@ngtools\webpack\src\loader.js:116:15)
    at c:\Users\f.dehopre\devs\Portal\frontend\website\node_modules\@ngtools\webpack\src\loader.js:141:17
 @ ./src/app/app-routing.module.ts 14:0-60
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi main

Mention any other details that might be useful.

This error does not happen if I npm pack the library and install the tarball instead of linking the library.

---

Thanks! We'll be in touch soon.

[jdavidls]

I had the same issue, I solved it in this pull request: #3877

[mlardy]

It seems that webpack have reinforced their module webpack/enhanced-resolve.
Doc here

The important point is :

A relative path will be scanned simarly to how Node scans for node_modules, by looking through the current directory as well as it's ancestors (i.e. ./node_modules, ../node_modules, and on).

And in angular-cli webpack's configuration there is actually an absolute path :

With an absolute path, it will only search in the given directory

I've posted #4738

[f-mon]

hi same issue that don't let me build a project that has son npm linked dependecies.
With this versions:

@angular/cli: 1.0.0-rc.1
node: 6.10.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 2.4.9

But sorry @jdavidls @mlardy, i can't understand if you said it's resolved or not...
if yes in wich version of angular-cli?
Thanks

[filipesilva]

https://github.com/angular/angular-cli/pull/6292 documents how to use linked libraries with the CLI, but relies on changes only present on 1.1.0-rc.0 and up.

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