Typsecript non-relative module resolution skipping root folder in hierarchy for @types

[xenobytezero]

Versions

Angular CLI: 1.7.1
Node: 8.9.2
OS: win32 x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, upgrade

@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.7.2
webpack: 3.11.0

Repro steps

• ng new test-app
• npm install @types\angular
• Modify test-app\src\app\app.module.ts to add the following

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import * as angular from 'angular'; <---- Add this line

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

angular.module('test').service('testService', () => {}); <---- Add this line

• ng build --verbose

Observed behavior

The build fails with the following report

D:\Projects\AngularDummy\test-app>ng build --verbose
4215ms building modules
4ms sealing
0ms optimizing
1ms basic module optimization
5ms module optimization
10ms advanced module optimization
4ms basic chunk optimization
1ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
1ms chunk modules optimization
0ms advanced chunk modules optimization
0ms module reviving
5ms module order optimization
2ms module id optimization
1ms chunk reviving
1ms chunk order optimization
1ms chunk id optimization
22ms hashing
1ms module assets processing
29ms chunk assets processing
1ms additional chunk assets processing
0ms additional asset processing
1603ms chunk asset optimization
1ms asset optimization
Hash: ce38980e4bf3cc956670
Version: webpack 3.11.0
Time: 5948ms
                  Asset     Size     Chunks  Chunk Names
       inline.bundle.js  3.89 kB     inline  inline
         main.bundle.js  7.61 kB       main  main
    polyfills.bundle.js   203 kB  polyfills  polyfills
       styles.bundle.js  14.5 kB     styles  styles
       vendor.bundle.js  2.44 MB     vendor  vendor
   inline.bundle.js.map  3.95 kB     inline  inline
     main.bundle.js.map  5.26 kB       main  main
polyfills.bundle.js.map   233 kB  polyfills  polyfills
   styles.bundle.js.map  18.4 kB     styles  styles
   vendor.bundle.js.map  3.02 MB     vendor  vendor
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 4.5 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 182 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 13.8 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.36 MB [initial] [rendered]

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'angular' in 'D:\Projects\AngularDummy\test-app\src\app'
resolve 'angular' in 'D:\Projects\AngularDummy\test-app\src\app'
  Parsed request is a module
  using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src/app)
    resolve as module
      looking for modules in D:\Projects\AngularDummy\test-app\src
        using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src)
          using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src/angular)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\src\angular doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\src\angular.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\src\angular.js doesn't exist
            as directory
              D:\Projects\AngularDummy\test-app\src\angular doesn't exist
      D:\Projects\AngularDummy\test-app\src\app\node_modules doesn't exist or is not a directory
      D:\Projects\AngularDummy\test-app\src\node_modules doesn't exist or is not a directory
      D:\Projects\AngularDummy\node_modules doesn't exist or is not a directory
      D:\Projects\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Projects\AngularDummy\test-app\node_modules
        using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./node_modules)
          using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./node_modules/angular)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\node_modules\angular doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\node_modules\angular.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\node_modules\angular.js doesn't exist
            as directory
              D:\Projects\AngularDummy\test-app\node_modules\angular doesn't exist
[D:\Projects\AngularDummy\test-app\src\angular]
[D:\Projects\AngularDummy\test-app\src\angular.ts]
[D:\Projects\AngularDummy\test-app\src\angular.js]
[D:\Projects\AngularDummy\test-app\src\angular]
[D:\Projects\AngularDummy\test-app\src\app\node_modules]
[D:\Projects\AngularDummy\test-app\src\node_modules]
[D:\Projects\AngularDummy\node_modules]
[D:\Projects\node_modules]
[D:\node_modules]
[D:\Projects\AngularDummy\test-app\node_modules\angular]
[D:\Projects\AngularDummy\test-app\node_modules\angular.ts]
[D:\Projects\AngularDummy\test-app\node_modules\angular.js]
[D:\Projects\AngularDummy\test-app\node_modules\angular]
 @ ./src/app/app.module.ts 10:0-35
 @ ./src/main.ts
 @ multi ./src/main.ts
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  2.98 kB       0
    chunk    {0} index.html 343 bytes [entry] [rendered]

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'angular' in 'D:\Projects\AngularDummy\test-app\src\app'
resolve 'angular' in 'D:\Projects\AngularDummy\test-app\src\app'
  Parsed request is a module
  using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src/app)
    resolve as module
      looking for modules in D:\Projects\AngularDummy\test-app\src
        using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src)
          using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./src/angular)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\src\angular doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\src\angular.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\src\angular.js doesn't exist
            as directory
              D:\Projects\AngularDummy\test-app\src\angular doesn't exist
      D:\Projects\AngularDummy\test-app\src\app\node_modules doesn't exist or is not a directory
      D:\Projects\AngularDummy\test-app\src\node_modules doesn't exist or is not a directory
      D:\Projects\AngularDummy\node_modules doesn't exist or is not a directory
      D:\Projects\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Projects\AngularDummy\test-app\node_modules
        using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./node_modules)
          using description file: D:\Projects\AngularDummy\test-app\package.json (relative path: ./node_modules/angular)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\node_modules\angular doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\node_modules\angular.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Projects\AngularDummy\test-app\node_modules\angular.js doesn't exist
            as directory
              D:\Projects\AngularDummy\test-app\node_modules\angular doesn't exist
[D:\Projects\AngularDummy\test-app\src\angular]
[D:\Projects\AngularDummy\test-app\src\angular.ts]
[D:\Projects\AngularDummy\test-app\src\angular.js]
[D:\Projects\AngularDummy\test-app\src\angular]
[D:\Projects\AngularDummy\test-app\src\app\node_modules]
[D:\Projects\AngularDummy\test-app\src\node_modules]
[D:\Projects\AngularDummy\node_modules]
[D:\Projects\node_modules]
[D:\node_modules]
[D:\Projects\AngularDummy\test-app\node_modules\angular]
[D:\Projects\AngularDummy\test-app\node_modules\angular.ts]
[D:\Projects\AngularDummy\test-app\node_modules\angular.js]
[D:\Projects\AngularDummy\test-app\node_modules\angular]
 @ ./src/app/app.module.ts 10:0-35
 @ ./src/main.ts
 @ multi ./src/main.ts

D:\Projects\AngularDummy\test-app>

Desired behavior

The build succeeds.

Mention any other details that might be useful (optional)

I'm building a AngularJS Hybrid app, and cant seem to be able to resolve @types packages correctly.

If you look at the error above, you see the following when it tries to resolve the import * as angular from 'angular'

[D:\Projects\AngularDummy\test-app\src\angular]
[D:\Projects\AngularDummy\test-app\src\angular.ts]
[D:\Projects\AngularDummy\test-app\src\angular.js]
[D:\Projects\AngularDummy\test-app\src\angular]
[D:\Projects\AngularDummy\test-app\src\app\node_modules]
[D:\Projects\AngularDummy\test-app\src\node_modules]
[D:\Projects\AngularDummy\node_modules]
[D:\Projects\node_modules]
[D:\node_modules]
[D:\Projects\AngularDummy\test-app\node_modules\angular]
[D:\Projects\AngularDummy\test-app\node_modules\angular.ts]
[D:\Projects\AngularDummy\test-app\node_modules\angular.js]
[D:\Projects\AngularDummy\test-app\node_modules\angular]

It seems to entirely skip the D:\Projects\AngularDummy\test-app\node_modules folder where it would actually find the @types its looking for.

If I don't actually include the import statement I get a Cannot find name 'angular' error.

Running tsc on it's own appears to be fine, and WebStorm appears to be auto completing fine, which indicates this might be an angular-cli issue?

[clydin]

tsc is a transpiler. It only requires the type information to function. The CLI in addition to transpiling is also a bundler. As a result it needs not only the type information but also the actual code for the module so that it can be bundled with the application. The error observed is a result of the CLI being unable to find the actual code for the imported module.

[xenobytezero]

@clydin That explains the tsc/WebStorm parts of this.

I can work around this issue by adding the following to the end of app.module.ts

import { IAngularStatic } from "angular";
declare var angular: IAngularStatic;

angular.module('test')
    .factory('testService', downgradeInjectable(TestService));

This seems to work fine.

[clydin]

Yes. That works because type only imports are removed during transpilation as they provide no actual functionality in the final output.

I'm going to close this as resolved.

[xenobytezero]

Sorry but I don't know if I would mark this as closed entirely.

A lot of this is probably misunderstanding on my part, but also is possibly a lack of documentation.

• Is there documentation for how I would pull in other 3rd party raw JS libraries that have @types support? (d3, golden layout, etc) when working with angular-cli?
• The standard practice for this amongst every guide I can find is to use import * as angular from 'angular', yet this does not seem to work in this case.
  • Spurious "Identifier 'angular' must be imported from a module" error microsoft/TypeScript#10638
  • https://stackoverflow.com/a/40720994/400103
• Is there a setup step that I need for this to be able to work?
• If tsc just cares about the type information, how do I get the webpack part of the ng build to not go looking for the thing I'm referring?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}