Unexpected error `Module not found: Error: Can't resolve` when using global module exports

[ddubrava]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Description

The build fails with Module not found: Error: Can't resolve './typings/export' when using a statement (e.g. class) from the namespace (exported as a UMD global) as a value. The error will not occur if the namespace is declared without any exports.

This error also occurs when using only the ts-loader without Angular. But I didn't found any dependencies on this package, so submit the issue here.

The problem is that the Module not found error isn't clear. The import is right, we can use the imported namespace as a type without any errors. But if we will try to use as a value something goes wrong

I've created both repositories: with Angular and with a plain Webpack + ts-loader configuration.

Error

declare namespace E {
  class Bar {}
}

export = E;
export as namespace e;

import * as E from './typings/export';

// OK
let foo: typeof E.Bar;
// Module not found: Error: Can't resolve './typings/export',
const bar = new E.Bar();

OK

declare namespace D {
  class Bar {}
}

let foo: typeof D.Bar;
const bar = new D.Bar();

🔬 Minimal Reproduction

• Angular Repository
• • See app.component.ts
• TS-loader Repository
• • See index.ts

🔥 Exception or Error

Error: ./src/app/app.component.ts
Module not found: Error: Can't resolve './typings/export' in 'C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app'
resolve './typings/export' in 'C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app'
  using description file: C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\package.json (relative path: ./src/app/typings/export)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export.js doesn't exist
      as directory
        C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export doesn't exist9m
[C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export]
[C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export.ts]
[C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export.tsx]
[C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export.mjs]
[C:\Users\root\Desktop\dev\angular-cli-cannot-resolve\src\app\typings\export.js]
 @ ./src/app/app.component.ts 1:0-38 15:24-29
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.0.1
Node: 14.15.0
OS: win32 x64

Angular: 11.0.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

[alan-agius4]

Hi @ddubrava,

Module .d.ts - typings/export.d.ts
The problem here is that when importing a .d.ts (ie: /typings/export.d.ts) it will not be outputted by the compiler. Therefore imports to these files need to be type only so that they are elided prior of emitting.

In your case you are using this to create a class and therefore the import cannot be elided. Which will cause the bundling process to fail because module ./typings/export doesn't not exist.

let foo: typeof E.Bar;
// Module not found: Error: Can't resolve './typings/export', not OK, unclear error
const bar = new E.Bar();

Global .d.ts - typings/declare
Think of this a global script you never explicitly import it directly in your code but it's available from everywhere.

More information about the can be found:
https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html
https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html

Closing as this is a support request. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

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