angular/angular-cli

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

d42ohpaz opened this issue · 12 comments

d42ohpaz commented

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.

d42ohpaz commented

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

dherges commented

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]
dherges commented

Workarounds are:

  1. copy folders to a sub-folder of app.root, e.g. for import ... from '@my/lib'
    • copy the folder to ./apps/*/src/@my/lib
  2. 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
jasonaden commented

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

  • 👍6
abnersouza commented

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

chennaiyan commented

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)

Splaktar commented

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

Splaktar commented

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

gameboyzone commented

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

Thanks!

  • 👍1
jasonaden commented

@filipesilva @hansl Can this be closed now?

  • 👍1
filipesilva commented

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

  • 👍1
angular-automatic-lock-bot commented

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.