search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.77k stars 11.98k forks source link

tsconfig paths not respected #8117

Closed buu700 closed 6 years ago

buu700 commented 7 years ago

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.

  1. ng serve https://github.com/buu700/ngcli-paths

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

clydin commented 7 years ago

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

buu700 commented 7 years ago

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 https://github.com/angular/angular-cli/commit/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 commented 7 years ago

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 commented 7 years ago

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

slartibardfast commented 7 years ago

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:

https://github.com/angular/angular/issues/15763#issuecomment-339343522

magemello commented 7 years ago

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

domdeger commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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

  1. Pull my repro: https://github.com/glebmachine/angular2-3rdparty-resolve-issue
  2. yarn; ng build
  3. You've got resolving error
  4. Replace angular/cli version to 1.2.7
  5. yarn; ng build
  6. 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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

The @buu700 method works!!!

raysuelzer commented 7 years ago

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

glebmachine commented 7 years ago

Any news guys? waiting forward bugfix(

arangelp commented 7 years ago

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 commented 6 years ago

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

glebmachine commented 6 years ago

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

buu700 commented 6 years ago

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 commented 6 years ago

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

glebmachine commented 6 years ago

Oh, thank you, guys)

Toxicable commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@domdeger, thanks for your quick reply!

BenjaminDobler commented 6 years ago

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

johnking commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

buinhansinh commented 6 years ago

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')] },

jackghicks commented 5 years ago

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[bot] commented 5 years ago

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.