tsconfig paths not respected #8117

buu700 · 2017-10-19T17:44:55Z

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.8
node: 8.7.0
os: linux x64

Repro steps.

ng serve https://github.com/buu700/ngcli-paths
Either "success" or "failure" will be displayed.

Desired functionality.

tsconfig paths should be treated as equivalent to resolve.alias values, as far as I understand. However, it seems that they're only applying to imports from within the Angular project itself, not third-party modules. (I'd thought that this worked in the past, so it may be a recent regression.)

In this example, we're importing a node module test63987 that imports and re-exports an arbitrary second module (libsodium-wrappers-sumo). Setting "libsodium-wrappers-sumo": ["libsodium-replacement"] in tsconfig does not have the desired effect. However, ejecting and adding the equivalent alias to webpack.config.js does work as expected.

Mention any other details that might be useful.

Project this affects is https://github.com/cyph/cyph.

Edit: Workaround: Install the latest Angular/CLI/etc. and replace node_modules/@ngtools/webpack/src/paths-plugin.js with https://github.com/buu700/ngtools-webpack-tmp/blob/master/src/paths-plugin.js.

The text was updated successfully, but these errors were encountered:

clydin · 2017-10-19T18:54:59Z

Dupe of #8036

buu700 · 2017-10-19T22:29:17Z

Thanks @clydin. If this is by design and the pre-1.2.6 behavior should be considered a bug rather than a feature (as per the other thread), then is or will there be a recommended way to configure module aliases without ejecting?

CC @filipesilva and @hansl

Edit: Contrary to the other issue description, this is only reproducible for me starting with 1.3.2. Looks like 7d7799b is the root cause.

Edit 2: @clydin, my report here must not have been clear enough if it sounded like a dupe of #8036. I ran into #8036 separately just now, and that isn't what I'm reporting here. The problem here isn't that there's a build failure or any kind of error, but rather than the aliasing simply isn't happening.

In the example demo I provided, the actual libsodium-wrappers-sumo module is being exported by test63987, rather than the expected {libsodiumReplacement: true} object.

clydin · 2017-10-20T15:31:44Z

It's the same underlying cause. In the other issue's case, there was no original module so without aliasing there's going to be a build error due to the missing module.

filipesilva · 2017-10-25T09:38:20Z

@hansl can you clarify what the intended behaviour is in this case?

slartibardfast · 2017-10-26T11:17:49Z

this bug is also breaking npm link -ed packages with an @angular/core dependencies
@angular/* path entry is essential to avoid inclusion of two copies of @angular/core,
without workarounds involving excluding the files themselves for example:

angular/angular#15763 (comment)

magemello · 2017-10-26T21:35:42Z

Thanks @slartibardfast for referring my comment, I think also have a more descriptive error could help in this case

domdeger · 2017-10-28T22:03:32Z

I would love to see an statement from the developers about this issue.
This problem is bothering me for more thant 3 months.
I have a similar setup with 2 npm linked component libraries that are used by my main app. Can someone clarify if this is a bug since 1.2.6 or is this the new expected behaviour?
If so can you tell me what the supposed solution for this issue is? I think it's not a corner case that someone wants to link some shared libraries that have angular dependencies.

clydin · 2017-10-28T23:54:16Z

@domdeger The issue here is that tsconfig's path mapping options only apply to TypeScript files. This was fixed in 1.3.2/1.4.0. As a result there is currently no method (outside of eject) to provide javascript module resolution aliases.

For linked library use in general, please refer to the wiki story found here. Note however that without javascript module aliasing, the TS path mapping settings are only partially effective. The build/serve command option --preserve-symlinks is extremely helpful in this regard and with a well built angular library the path mapping can be completely unnecessary.

domdeger · 2017-10-29T11:20:51Z

@clydin Thank you very much for your fast answer. I have read the wiki story really carefully. But the problem still persists for me. As I have mentioned, i have already invested two or three days just fixing this problem with the only workaround deleting the node_modules from my linked libs.

You said, that this concerns typescript compilation which is interesting because my setup was about ts.

I have following setup:
Lib1 --> angular cli project, no tsconfig.json, entrypoint index.ts
Lib2 --> has Lib1 npm linked, angular cli project, no tsconfig.json, entrypoint index.ts
Webproject --> Lib1, Lib2 npm linked, angular cli project, has tsconfig with pathmappings as described in the wiki

So Lib1, Lib2 contains plain ts because it has no special build logic. I created those projects to outsource common functionality i use for multiple projects. I would like to leave compilation up to the project which references them.
From what i understand the issue is that cli from 1.3.2 does resolve the angular depdendencies to the node_modules folder of the linked libraries. Which results in multiple definitions for NgModule.

So this issue also persists if I setup aot compilation for my libs and reference the compiled js, which also results in sub node_modules getting compiled. I do not understand how --preserve-symlinks could help me in this regard.

I am sorry if this topic is not related to the initial issue of this thread. If so could you maybe tell me where i can get help? Normally i don't spam on github threads to get help, but i have worked on this issue for 3 working days and couldn't find an effective solution.

Thank you :)

glebmachine · 2017-10-31T17:28:57Z

@filipesilva here is my repro:

Versions.

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.0
node: 6.9.2
os: darwin x64
@angular/animations: 4.4.3
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.2.7
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3

MacOS OS HighSierra 10.

Repro steps.

Pull my repro: https://github.com/glebmachine/angular2-3rdparty-resolve-issue
yarn; ng build
You've got resolving error
Replace angular/cli version to 1.2.7
yarn; ng build
Everything works great

The log given by the failure.


ERROR in ./node_modules/greensock/src/TimelineMax.js
Module not found: Error: Can't resolve 'TweenLite' in '/Users/glebmikheev/angular-scrollmagic/node_modules/greensock/src'
resolve 'TweenLite' in '/Users/glebmikheev/angular-scrollmagic/node_modules/greensock/src'
  Parsed request is a module
  using description file: /Users/glebmikheev/angular-scrollmagic/node_modules/greensock/package.json (relative path: ./src)
  after using description file: /Users/glebmikheev/angular-scrollmagic/node_modules/greensock/package.json (relative path: ./src)
    resolve as module
      /Users/glebmikheev/angular-scrollmagic/node_modules/greensock/src/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/greensock/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/glebmikheev/angular-scrollmagic/node_modules
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules/TweenLite)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite doesn't exist
      looking for modules in /Users/glebmikheev/node_modules
        No description file found
        No description file found
        no extension
          /Users/glebmikheev/node_modules/TweenLite doesn't exist
        .ts
          /Users/glebmikheev/node_modules/TweenLite.ts doesn't exist
        .js
          /Users/glebmikheev/node_modules/TweenLite.js doesn't exist
        as directory
          /Users/glebmikheev/node_modules/TweenLite doesn't exist
      looking for modules in /Users/glebmikheev/angular-scrollmagic/node_modules
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules/TweenLite)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite doesn't exist
      looking for modules in /Users/glebmikheev/angular-scrollmagic/src
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src/TweenLite)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenLite doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenLite.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenLite.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/src/TweenLite doesn't exist
      looking for modules in /Users/glebmikheev/angular-scrollmagic/src
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src/TweenLite)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenLite doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenLite.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenLite.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/src/TweenLite doesn't exist
[/Users/glebmikheev/angular-scrollmagic/node_modules/greensock/src/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/greensock/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/glebmikheev/node_modules/package.json]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite.ts]
[/Users/glebmikheev/node_modules/TweenLite/package.json]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite.js]
[/Users/glebmikheev/node_modules/TweenLite]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite]
[/Users/glebmikheev/node_modules/TweenLite.ts]
[/Users/glebmikheev/node_modules/TweenLite.js]
[/Users/glebmikheev/node_modules/TweenLite]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite.ts]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite.js]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenLite]
[/Users/glebmikheev/angular-scrollmagic/src/TweenLite]
[/Users/glebmikheev/angular-scrollmagic/src/TweenLite.ts]
[/Users/glebmikheev/angular-scrollmagic/src/TweenLite.js]
[/Users/glebmikheev/angular-scrollmagic/src/TweenLite]
[/Users/glebmikheev/angular-scrollmagic/src/TweenLite]
[/Users/glebmikheev/angular-scrollmagic/src/TweenLite.ts]
[/Users/glebmikheev/angular-scrollmagic/src/TweenLite.js]
[/Users/glebmikheev/angular-scrollmagic/src/TweenLite]
 @ ./node_modules/greensock/src/TimelineMax.js 1298:2-34
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts
ERROR in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TweenMax' in '/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
resolve 'TweenMax' in '/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
  Parsed request is a module
  using description file: /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/package.json (relative path: ./scrollmagic/uncompressed/plugins)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/package.json (relative path: ./scrollmagic/uncompressed/plugins)
    resolve as module
      /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/glebmikheev/angular-scrollmagic/node_modules
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules/TweenMax)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax doesn't exist
      looking for modules in /Users/glebmikheev/node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /Users/glebmikheev/node_modules/TweenMax doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          /Users/glebmikheev/node_modules/TweenMax.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /Users/glebmikheev/node_modules/TweenMax.js doesn't exist
        as directory
          /Users/glebmikheev/node_modules/TweenMax doesn't exist
      looking for modules in /Users/glebmikheev/angular-scrollmagic/node_modules
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules/TweenMax)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax doesn't exist
      looking for modules in /Users/glebmikheev/angular-scrollmagic/src
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src/TweenMax)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenMax doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenMax.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenMax.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/src/TweenMax doesn't exist
      looking for modules in /Users/glebmikheev/angular-scrollmagic/src
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src/TweenMax)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenMax doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenMax.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TweenMax.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/src/TweenMax doesn't exist
[/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/glebmikheev/node_modules/package.json]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax.ts]
[/Users/glebmikheev/node_modules/TweenMax/package.json]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax.js]
[/Users/glebmikheev/node_modules/TweenMax]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax]
[/Users/glebmikheev/node_modules/TweenMax.ts]
[/Users/glebmikheev/node_modules/TweenMax.js]
[/Users/glebmikheev/node_modules/TweenMax]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax.ts]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax.js]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TweenMax]
[/Users/glebmikheev/angular-scrollmagic/src/TweenMax]
[/Users/glebmikheev/angular-scrollmagic/src/TweenMax.ts]
[/Users/glebmikheev/angular-scrollmagic/src/TweenMax.js]
[/Users/glebmikheev/angular-scrollmagic/src/TweenMax]
[/Users/glebmikheev/angular-scrollmagic/src/TweenMax]
[/Users/glebmikheev/angular-scrollmagic/src/TweenMax.ts]
[/Users/glebmikheev/angular-scrollmagic/src/TweenMax.js]
[/Users/glebmikheev/angular-scrollmagic/src/TweenMax]
 @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/app/extensions/scrollmagic-helpers.ts
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts
ERROR in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TimelineMax' in '/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
resolve 'TimelineMax' in '/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
  Parsed request is a module
  using description file: /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/package.json (relative path: ./scrollmagic/uncompressed/plugins)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/package.json (relative path: ./scrollmagic/uncompressed/plugins)
    resolve as module
      /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/node_modules doesn't exist or is not a directory
      /Users/glebmikheev/angular-scrollmagic/node_modules/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/glebmikheev/angular-scrollmagic/node_modules
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules/TimelineMax)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax doesn't exist
      looking for modules in /Users/glebmikheev/node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /Users/glebmikheev/node_modules/TimelineMax doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          /Users/glebmikheev/node_modules/TimelineMax.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /Users/glebmikheev/node_modules/TimelineMax.js doesn't exist
        as directory
          /Users/glebmikheev/node_modules/TimelineMax doesn't exist
      looking for modules in /Users/glebmikheev/angular-scrollmagic/node_modules
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./node_modules/TimelineMax)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax doesn't exist
      looking for modules in /Users/glebmikheev/angular-scrollmagic/src
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src/TimelineMax)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TimelineMax doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TimelineMax.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TimelineMax.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/src/TimelineMax doesn't exist
      looking for modules in /Users/glebmikheev/angular-scrollmagic/src
        using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src)
          using description file: /Users/glebmikheev/angular-scrollmagic/package.json (relative path: ./src/TimelineMax)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TimelineMax doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TimelineMax.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/glebmikheev/angular-scrollmagic/src/TimelineMax.js doesn't exist
            as directory
              /Users/glebmikheev/angular-scrollmagic/src/TimelineMax doesn't exist
[/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/uncompressed/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/scrollmagic/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/scrollmagic/node_modules]
[/Users/glebmikheev/angular-scrollmagic/node_modules/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/glebmikheev/node_modules/package.json]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax.ts]
[/Users/glebmikheev/node_modules/TimelineMax/package.json]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax.js]
[/Users/glebmikheev/node_modules/TimelineMax]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax]
[/Users/glebmikheev/node_modules/TimelineMax.ts]
[/Users/glebmikheev/node_modules/TimelineMax.js]
[/Users/glebmikheev/node_modules/TimelineMax]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax.ts]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax.js]
[/Users/glebmikheev/angular-scrollmagic/node_modules/TimelineMax]
[/Users/glebmikheev/angular-scrollmagic/src/TimelineMax]
[/Users/glebmikheev/angular-scrollmagic/src/TimelineMax.ts]
[/Users/glebmikheev/angular-scrollmagic/src/TimelineMax.js]
[/Users/glebmikheev/angular-scrollmagic/src/TimelineMax]
[/Users/glebmikheev/angular-scrollmagic/src/TimelineMax]
[/Users/glebmikheev/angular-scrollmagic/src/TimelineMax.ts]
[/Users/glebmikheev/angular-scrollmagic/src/TimelineMax.js]
[/Users/glebmikheev/angular-scrollmagic/src/TimelineMax]
 @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/app/extensions/scrollmagic-helpers.ts
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

buu700 · 2017-10-31T20:44:59Z

The issue here is that tsconfig's path mapping options only apply to TypeScript files. This was fixed in 1.3.2/1.4.0. As a result there is currently no method (outside of eject) to provide javascript module resolution aliases.

Are there any plans to add a different method of module aliasing? Pinning the CLI to 1.2.6 works for now, but I don't want to get left behind as new features are introduced or risk compatibility issues with Angular 5 and beyond.

domdeger · 2017-11-03T20:59:43Z

Update here for Angular5. Problems seem to persist.

{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", "paths": { "@angular/*": [ "../node_modules/@angular/*" ], "rxjs": [ "../node_modules/rxjs" ], "rxjs/*": [ "../node_modules/rxjs/*" ], "angular-2-local-storage": [ "../node_modules/angular-2-local-storage" ], "angular-2-local-storage/*": [ "../node_modules/angular-2-local-storage/*" ] } }, "include": [ "*.ts", "../node_modules/ui-common", "../node_modules/vulndb-service-ui-lib" ], "exclude": [ "test.ts", "**/*.spec.ts" ] }
I have read that they use the tsconfig.json more correctly for ng * so i was full of hope. What i mentioned is that you now need to explicitly add linked libraries to the "include" key in the tsconfig.

I migrated my project and libs to angular5 but there seems to be something odd again with the module resolution as it is giving:

RROR Error: StaticInjectorError[Http]: StaticInjectorError[Http]: NullInjectorError: No provider for Http

Which is related to module resolution because the error fades away when i delete the angular folder in node_modules the linked libraries. But then i have another problem with rxjs because Observables from angular/http do not have the imported operators anymore.
Really weird stuff.

I am pretty concerned about this. I would really appreciate if the angular team could explain how we can use npm linked libraries for development? I guess this is not a rare use-case that one wants to share components over multiple projects.
I managed to get my project working for the 4.* version with ng eject and manual messing with the webpack.config.js but this is not really the way i'd like to go for a long time.

buu700 · 2017-11-03T21:37:35Z

FYI, for anyone else needing the pre-1.2.6 behavior, the solution I landed on is using the latest Angular/CLI/etc. and just overwriting node_modules/@ngtools/webpack/src/paths-plugin.js with https://github.com/buu700/ngtools-webpack-tmp/blob/master/src/paths-plugin.js. It's not very elegant, and could be broken by a future release, but gets the job done for now without blocking updating to Angular 5.

@domdeger, is that tsconfig from a CLI project or an ejected one? You shouldn't need to list every package you're using in the tsconfig like that, unless I'm missing part of what you're trying to do.

domdeger · 2017-11-03T21:50:18Z

@buu700 This is the tsconfig from a CLI project. So this is consuming some npm linked libs.
pre 1.2.6 modules were first searched in the cli projects node_modules folder.
Now the closest node_modules folder is used for resolution.

If i use @NgModule in a linked lib and have installed the @angular/core because i want autocompletion while developing angular-cli now compiles the package @angular/core twice resulting in duplicate/incompatible types.
With the Path-mappings i tried to convince the cli to just use the types in the root project. So i listed the dependencies that are duplicated and caused problems. Which has some effect on the problem but does not resolve it for me.

buu700 · 2017-11-03T22:00:49Z

Ah, okay. Haven't run into that before so don't have any ideas, but maybe the paths plugin thing from my last comment could also be a quick fix for that.

vitolipari · 2017-11-05T23:01:21Z

The @buu700 method works!!!

raysuelzer · 2017-11-06T05:25:02Z

What is strange for me is that this only occurs when I am building in travis.

glebmachine · 2017-11-07T21:45:02Z

Any news guys? waiting forward bugfix(

arangelp · 2017-11-08T22:24:50Z

Migrating a huge application to angular 5 and angular-cli 1.6, This is so far the most blocker i have encounter. Should we avoid path alias as a practice?

glebmachine · 2017-11-13T13:27:23Z

@hansl Сould you please tell us, when does this fix is going to be performed?

glebmachine · 2017-11-13T15:28:13Z

@buu700 @domdeger this fix can be used with https://www.npmjs.com/package/patch-package

buu700 · 2017-11-13T15:39:26Z

Interesting, thanks for the tip! That looks like a really neat solution for this type of thing; I'll definitely use it in the future.

glebmachine · 2017-11-13T20:25:02Z

FYI: Path package works great for me, with @buu700 patch

Previously we filtered our path mapping resolver to only be used on typescript. The correct behaviour is unclear; tsc does not resolve JS files, only TS. But there is a lot of value to use path mapping to resolve JavaScript files, and it replaces the webpack alias configuration option. Because of that value it was decided to fix this. Fixes angular#8117.

Previously we filtered our path mapping resolver to only be used on typescript. The correct behaviour is unclear; tsc does not resolve JS files, only TS. But there is a lot of value to use path mapping to resolve JavaScript files, and it replaces the webpack alias configuration option. Because of that value it was decided to fix this. Fixes #8117.

glebmachine · 2017-12-14T08:20:58Z

Oh, thank you, guys)

Toxicable · 2017-12-27T21:37:35Z

This dosen't appear to have solved it for this case.
Taking typeorm as an Example I made a repro here https://github.com/Toxicable/issue-cli-path-resolve
Notice the paths entries in the tsconfig.app.json
If you build the project with ng build there are warnings indicating that sqlite is imported into the bundle, or by inspecting the vendor bundle output, which the paths mapping should avoid since ../node_modules/typeorm/typeorm-model-shim is just empty declarations with no other imports

Toxicable · 2017-12-27T23:21:41Z

Nevermind, I had it misconfigured.
Turns out you need the .js at the end of the path

//tsconfig.app.json
"typeorm": ["../node_modules/typeorm/typeorm-model-shim.js"]

credit to @clydin for pointing that out

criollapp · 2018-01-10T00:44:44Z

I have the same mistake as @domdeger, only that it happens to me when I run "npm run test" with karma help please.

Error: NullInjectorError: No provider for IterableDiffers!

johnking · 2018-01-21T21:24:51Z

I have similar cases like @domdeger, after going through several threads, I don't get the clear answer to resolve the annoying:

 Error: StaticInjectorError[xxx]: StaticInjectorError[xxx]: NullInjectorError: No provider for xxx

Hi @domdeger,
What's your solution/workaround for this issue?

thanks

domdeger · 2018-01-21T21:38:41Z

@johnking
Well i have given up on this issue. I combined all my Projects into ONE angular-cli project with my libs in the root. The angular-apps just refrence the code directly.
This is a really bad solution because i need to use the same node_modules for all my apps, which makes everything really complicated.

johnking · 2018-01-21T23:00:25Z

@domdeger,
thanks for your quick reply!

BenjaminDobler · 2018-01-22T20:51:27Z

I have the same issue with a linked in library and @buu700 patch works for me as well!

johnking · 2018-01-22T21:20:46Z

@domdeger
After several hours study, I decided to go with seed library project: generator-angular2-library.

it works pretty well, and it is well documented.

davidcblaney · 2018-02-19T11:15:41Z

Hi,

I have recently updated to v1.7.0 of the CLI and I am now facing this issue, which is causing multiple angular packages to bundled. My error in particular is:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[NgZone]
(caused by @angular/core being bundled twice)

I am experiencing the classic symptoms such deleting @angular from the linked library cause the errors to disappear despite having already configured the paths in the tsconfig.app.json and used preserveSymlinks.

Is it possible that there has been some regression? From looking at the source of @ngtools/webpack, the fix above (#8810) in paths-plugin.js seems to be in place.

Although @buu700's patch worked for me in previous version; It is now too far diverged from the latest code to use.

Version info:

Node: 8.9.4
OS: win32 x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.4.2
webpack: 3.11.0

Any help would be greatly appreciated.
Thanks

eltonlam · 2018-02-24T07:46:47Z

Yeah, this is also plaguing me as well.
I've searched and combed through the forums to see if there are any solutions but nothing seems to work.

The most I can do is make it compile before running into module resolution run-time errors complaining about duplicate modules and Angular not knowing which one to choose.

Anyone who is writing anything modular that wants to break up their application into more manageable libraries will need to "npm link" locally at some point in time. Making one small change then "npm publish" and "npm install" on all other consuming apps can't be the way forward. Doing complicated "npm link" with dist folders outside the structure can't be the way forward. Everything else is just a huge workaround.

Yes, I know that at some point TS made the packaging more strict as to not allow shipping of ".ts" files. But this is seriously impeding a very common development workflow. The worst part is that no one wants to take full responsibility for the issue. Is it an issue with Webpack, is it an issue with TS or Angular? All of the respective forums have their own variant/version of this issue.

This is the sort of thing that keeps holding me back in terms of adopting the latest and greatest Angular CLI version. I have to either do an "ng eject" or manually patch.

There have been massive enhancements over the past couple of versions and I really appreciate that because I really see the work that's been going on into the framework.

I guess any guidance here would be very much appreciated.

mskkai · 2018-03-19T07:38:03Z

@davidcblaney i am facing the same issue. is it resolved for you? any help will be much appreciated.

buinhansinh · 2018-04-20T17:34:11Z

For guys using webpack. You can resolve the dependencies by specifying absolute path to to your current project's node_modules.
resolve: {
extensions: ['.ts', '.js'],
modules: [helpers.root('src'), helpers.root('node_modules')]
},

Previously we filtered our path mapping resolver to only be used on typescript. The correct behaviour is unclear; tsc does not resolve JS files, only TS. But there is a lot of value to use path mapping to resolve JavaScript files, and it replaces the webpack alias configuration option. Because of that value it was decided to fix this. Fixes angular#8117.

jackghicks · 2019-04-29T10:57:16Z

I found myself struggling with something that appeared to very strongly correlate with this issue, resulting in getting StaticInjectorError for my dependencies.

I had a module that I was importing into the TestBed configuration in the spec file, which defined some providers for some services. The module was using the aliased imports from the dist directory, as is correct. The spec file however was using a relative import for the service. I solved this by using aliased paths everywhere.

My case resulted, I think, from a structural decision we have made. We have an interface library, and a corresponding implementation library that satisfies all the interfaces in the first. We then use providers with useClass to allow the application code (and tests) to be built directly against the interface, so that the implementations can be swapped out at will. All of the code (spec and library) in the implementation library was using the correct aliased paths for dist, whilst all the spec code in the interface library was using relative paths.

In conclusion: anybody still finding themselves coming to this thread, make sure you are using your aliased paths in all cases

angular-automatic-lock-bot · 2019-09-09T12:41:29Z

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

filipesilva assigned hansl Oct 25, 2017

filipesilva added type: bug/fix P1 Impacts a large percentage of users; if a workaround exists it is partial or overly painful labels Oct 25, 2017

clydin mentioned this issue Oct 31, 2017

1.3.0 brokes 3rd party resovling mechanism (1.5.0_rc6 still broken) #8261

Closed

This was referenced Nov 30, 2017

npm link doesn't work with 1.5.4 version #8677

Closed

npm link exist node_modules error #8381

Closed

robisim74 mentioned this issue Dec 4, 2017

No npm link Support? robisim74/angular-library-starter#2

Closed

hansl mentioned this issue Dec 8, 2017

fix(@ngtools/webpack): allow path mapping to resolve in JS files #8810

Merged

Brocco closed this as completed in #8810 Dec 13, 2017

nnixaa mentioned this issue Dec 28, 2017

tsconfig paths not respected for styles #9018

Closed

angular-automatic-lock-bot bot unassigned hansl Sep 9, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

tsconfig paths not respected #8117

tsconfig paths not respected #8117

Comments

buu700 commented Oct 19, 2017 • edited Loading

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

Desired functionality.

Mention any other details that might be useful.

clydin commented Oct 19, 2017

buu700 commented Oct 19, 2017 • edited Loading

clydin commented Oct 20, 2017

filipesilva commented Oct 25, 2017

slartibardfast commented Oct 26, 2017 • edited Loading

magemello commented Oct 26, 2017

domdeger commented Oct 28, 2017

clydin commented Oct 28, 2017

domdeger commented Oct 29, 2017

glebmachine commented Oct 31, 2017

Versions.

Repro steps.

The log given by the failure.

buu700 commented Oct 31, 2017 • edited Loading

domdeger commented Nov 3, 2017

buu700 commented Nov 3, 2017

domdeger commented Nov 3, 2017

buu700 commented Nov 3, 2017

vitolipari commented Nov 5, 2017

raysuelzer commented Nov 6, 2017

glebmachine commented Nov 7, 2017

arangelp commented Nov 8, 2017

glebmachine commented Nov 13, 2017

glebmachine commented Nov 13, 2017

buu700 commented Nov 13, 2017

glebmachine commented Nov 13, 2017

glebmachine commented Dec 14, 2017 via email • edited Loading

Toxicable commented Dec 27, 2017 • edited Loading

Toxicable commented Dec 27, 2017

criollapp commented Jan 10, 2018

johnking commented Jan 21, 2018

domdeger commented Jan 21, 2018

johnking commented Jan 21, 2018

BenjaminDobler commented Jan 22, 2018

johnking commented Jan 22, 2018

davidcblaney commented Feb 19, 2018

eltonlam commented Feb 24, 2018

mskkai commented Mar 19, 2018

buinhansinh commented Apr 20, 2018

jackghicks commented Apr 29, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

buu700 commented Oct 19, 2017 •

edited

Loading

Bug Report or Feature Request (mark with an `x`)

buu700 commented Oct 19, 2017 •

edited

Loading

slartibardfast commented Oct 26, 2017 •

edited

Loading

buu700 commented Oct 31, 2017 •

edited

Loading

glebmachine commented Dec 14, 2017 via email •

edited

Loading

Toxicable commented Dec 27, 2017 •

edited

Loading