Error resolving symbol NgModule when importing module using tsconfig compilerOptions.paths

Question

Error resolving symbol NgModule when importing module using tsconfig compilerOptions.paths

d42ohpaz opened this issue 7 years ago · comments

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

- [x] bug report -> please search issues before submitting
- [x] feature request (Edited to update to a feature request)

Versions.

OS

macOS Sierra 10.12.6

ng--version

@angular/cli: 1.4.1
node: 8.5.0
os: darwin x64
@angular/animations: 4.4.1
@angular/common: 4.4.1
@angular/compiler: 4.4.1
@angular/core: 4.4.1
@angular/forms: 4.4.1
@angular/http: 4.4.1
@angular/platform-browser: 4.4.1
@angular/platform-browser-dynamic: 4.4.1
@angular/router: 4.4.1
@angular/cli: 1.4.1
@angular/compiler-cli: 4.4.1
@angular/language-service: 4.4.1
typescript: 2.3.4

node --version

v8.5.0

npm --version

5.3.0

Repro steps.

Fresh install using ng new, no added packages. Rearranged my directory structure so that my app is a subdirectory of a web directory. Reconfigured tsconfig.json in the root so that it uses an @app prefix for importing from the ./web/app/src folder. Modify main.ts to import from '@app/app.module' instead of './src/app.module'.

Sample repo demonstrates the issue; the README contains commands run (both non-AOT and AOT) and the two different (but related) error messages:

https://github.com/dohpaz42/aot-static-module

The log given by the failure.

Without AOT

Date: 2017-09-16T17:07:17.938Z                                                     
Hash: 46e01467dc96583bd7a2
Time: 4621ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 311 bytes [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 331 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.7 kB {inline} [initial] [rendered]

ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in /users/dohpaz42/development/paths-poc-app/node_modules/@angular/core/core.d.ts, resolving symbol AppModule in /users/dohpaz42/development/paths-poc-app/web/app/src/app.module.ts, resolving symbol AppModule in /users/dohpaz42/development/paths-poc-app/web/app/src/app.module.ts
    at positionalError (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25266:35)
    at simplifyInContext (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25109:27)
    at StaticReflector.simplify (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25123:13)
    at StaticReflector.annotations (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24553:41)
    at _getNgModuleMetadata (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31)
    at _extractLazyRoutesFromStaticModule (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26)
    at Object.listLazyRoutesOfModule (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/plugin.js:207:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (/Users/dohpaz42/Development/paths-poc-app/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/plugin.js:443:24)
    at <anonymous>

With AOT

Date: 2017-09-16T17:26:00.176Z                                                     
Hash: 46e01467dc96583bd7a2
Time: 1968ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 311 bytes [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 331 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.7 kB {inline} [initial] [rendered]

ERROR in Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /users/dohpaz42/development/aot-static-module/node_modules/@angular/core/core.d.ts, resolving symbol HashLocationStrategy in /users/dohpaz42/development/aot-static-module/node_modules/@angular/common/common.d.ts, resolving symbol HashLocationStrategy in /users/dohpaz42/development/aot-static-module/node_modules/@angular/common/common.d.ts
    at syntaxError (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
    at simplifyInContext (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:25111:23)
    at StaticReflector.simplify (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:25123:13)
    at StaticReflector.annotations (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:24553:41)
    at NgModuleResolver.resolve (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:14891:70)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:15546:60)
    at addNgModule (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:24403:58)
    at /Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:24414:14
    at Array.forEach (<anonymous>)
    at _createNgModules (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:24413:26)
    at analyzeNgModules (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:24288:14)
    at analyzeAndValidateNgModules (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:24298:35)
    at AotCompiler.analyzeModulesAsync (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler/bundles/compiler.umd.js:23932:46)
    at CodeGenerator.codegen (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler-cli/src/codegen.js:32:14)
    at Function.NgTools_InternalApi_NG_2.codeGen (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30)
    at _donePromise.Promise.resolve.then (/Users/dohpaz42/Development/aot-static-module/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/plugin.js:386:44)
    at <anonymous>

Desired functionality.

I am trying to structure my application so that I can use the @-style references when importing local code. It works well for non-modules, but when I go to import any module defined by the @NgModule annotation, I get the above errors. Ideally, I would expect Angular's build process to be able to compile my code regardless of how I reference imports (assuming it's set up correctly).

e.g.

// Goal
import { MyModule } from '@app/mymodule';

// vs. 
import { MyModule } from '../../src/modules/mymodule';

Mention any other details that might be useful.

The .angular-cli.json, tsconfig.json, and tsconfig.app.json are copied directly from the project where I discovered this problem.

K.S. · Answer 1 · Sun Sep 17 2017 21:53:44 GMT+0800 (China Standard Time)

Update: https://github.com/dohpaz42/aot-static-module/pull/1

I would like to convert this into a feature request that the error messages be updated to at least show the (resolved/real) path(s) used to look for the imports, so that if in the future this happens because a misconfiguration, it would be quicker to realize the problem (using ng build --verbose in this case does nothing).

David Herges · Answer 2 · Thu Oct 12 2017 14:16:52 GMT+0800 (China Standard Time)

Here is another repro:

.angular-cli.json: https://github.com/dherges/nx-sandbox/blob/master/.angular-cli.json#L9

tsconfig.app.json: https://github.com/dherges/nx-sandbox/blob/master/tsconfig.app.json#L8-L10

It chokes when the compilerOptions.paths target is located as a parent of the app.root (not a sub folder in apps/u-app/src in above example)

$ ng build
ERROR in ./apps/u-app/src/app/app.module.ts
Module not found: Error: Can't resolve '@nx-sandbox/i-lib' in '~/nx-sandbox\apps\u-app\src\app'
resolve '@nx-sandbox/i-lib' in '~/nx-sandbox\apps\u-app\src\app'
  Parsed request is a module
  using description file: ~/nx-sandbox\package.json (relative path: ./apps/u-app/src/app)
    Field 'browser' doesn't contain a valid alias configuration

/* ... (truncated) ... */

[~\nx-sandbox\apps\u-app\src\app\node_modules]
[~\nx-sandbox\apps\u-app\src\node_modules]
[~\nx-sandbox\apps\u-app\node_modules]
[~\nx-sandbox\apps\node_modules]
[~\node_modules]
/* ... (truncated, other folders up until disk root) ... */
[\drive\node_modules]
[~\nx-sandbox\node_modules\@nx-sandbox\i-lib]
[~\nx-sandbox\node_modules\@nx-sandbox\i-lib.ts]
[~\nx-sandbox\node_modules\@nx-sandbox\i-lib.js]
[~\nx-sandbox\node_modules\@nx-sandbox\i-lib]
[~\nx-sandbox\node_modules\@nx-sandbox\i-lib]
[~\nx-sandbox\node_modules\@nx-sandbox\i-lib.ts]
[~\nx-sandbox\node_modules\@nx-sandbox\i-lib.js]
[~\nx-sandbox\node_modules\@nx-sandbox\i-lib]
[~\nx-sandbox\@nx-sandbox\i-lib]
[~\nx-sandbox\@nx-sandbox\i-lib.ts]
[~\nx-sandbox\@nx-sandbox\i-lib.js]
[~\nx-sandbox\@nx-sandbox\i-lib]
[~\nx-sandbox\@nx-sandbox\i-lib]
[~\nx-sandbox\@nx-sandbox\i-lib.ts]
[~\nx-sandbox\@nx-sandbox\i-lib.js]
[~\nx-sandbox\@nx-sandbox\i-lib]

David Herges · Answer 3 · Thu Oct 12 2017 14:23:51 GMT+0800 (China Standard Time)

Workarounds are:

copy folders to a sub-folder of app.root, e.g. for import ... from '@my/lib'
- copy the folder to ./apps/*/src/@my/lib
symlink (or copy) the folders to node_modules, e.g. for import ... from '@my/lib'
- symlink from node_modules/@my/lib to the target folder ./dist/libs/my-lib
- or copy ./dist/libs/my-lib to node_modules/@my/lib

Jason Aden · Answer 4 · Wed Jan 24 2018 05:31:02 GMT+0800 (China Standard Time)

Confirmed this is an issue. Prevents people from developing libraries in the same project as their app if they want to use the built version of their library to build their app against.

More details and reproduction available here:

https://github.com/jasonaden/broken-cli-path-builds

Abner Souza · Answer 5 · Mon Feb 19 2018 06:16:51 GMT+0800 (China Standard Time)

Any update on this bug? Trying to use path within Nx and having the same issue

chennaiyan · Answer 6 · Tue Feb 27 2018 19:01:29 GMT+0800 (China Standard Time)

ERROR in Error: Metadata version mismatch for module C:/Users/Chennaiyan/angular4-proj/Angular4MongoDB/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in
C:/Users/Chennaiyan/angular4-proj/Angular4MongoDB/src/app/app.module.ts, resolving symbol AppModule in C:/Users/Chennaiyan/angular4-proj/Angular4MongoDB/src/app/app.module.ts
at syntaxError (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@angular\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@angular\compiler\bundles\compiler.umd.js:24979:23)
at StaticReflector.simplify (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@angular\compiler\bundles\compiler.umd.js:24991:13)
at StaticReflector.annotations (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@angular\compiler\bundles\compiler.umd.js:24418:41)
at _getNgModuleMetadata (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@ngtools\webpack\src\plugin.js:240:66)
at _donePromise.Promise.resolve.then.then.then.then.then (C:\Users\Chennaiyan\angular4-proj\Angular4MongoDB\node_modules@ngtools\webpack\src\plugin.js:493:24)
at
at process._tickCallback (internal/process/next_tick.js:160:7)

Michael Prentice · Answer 7 · Sun Jun 03 2018 07:13:13 GMT+0800 (China Standard Time)

@hansl @filipesilva It would be really nice to at least get some labels on this issue. Perhaps it was resolved in the v6 updates?

Michael Prentice · Answer 8 · Sun Jun 03 2018 11:20:20 GMT+0800 (China Standard Time)

Based on some of my tests and https://github.com/dherges/ng-packaged, this appears to be fixed in v6.

Hardik Shah · Answer 9 · Tue Jul 10 2018 05:12:57 GMT+0800 (China Standard Time)

@jasonaden - Can we test this issue and mark this issue as 'Closed' if @Splaktar is correct?

Thanks!

Jason Aden · Answer 10 · Wed Jul 11 2018 07:35:04 GMT+0800 (China Standard Time)

@filipesilva @hansl Can this be closed now?

Filipe Silva · Answer 11 · Wed Jul 11 2018 08:00:42 GMT+0800 (China Standard Time)

I think so, yes. Our lib generation and consumption journey makes the library in the same project, and we test that it works.

angular-automatic-lock-bot · Answer 12 · Sun Sep 08 2019 17:40:46 GMT+0800 (China Standard Time)

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

Error resolving symbol NgModule when importing module using tsconfig compilerOptions.paths

Bug Report or Feature Request (mark with an x)

Versions.

OS

ng--version

node --version

npm --version

Repro steps.

The log given by the failure.

Without AOT

With AOT

Desired functionality.

Mention any other details that might be useful.

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