You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to configure things so I don't have to use ugly (and brittle) relative paths when including modules from my own project. I modified tsconfig.json to include:
ERROR in ./src/app/content/content.component.ts
Module build failed: Error: /Users/lehresman/Projects/gazelle-ui/src/app/content/content.component.ts (2,29): Cannot find module '@app/models/client.model'.)
at _checkDiagnostics (/Users/lehresman/Projects/gazelle-ui/node_modules/@ngtools/webpack/src/loader.js:116:15)
at /Users/lehresman/Projects/gazelle-ui/node_modules/@ngtools/webpack/src/loader.js:141:17
@ ./src/app/app.module.ts 17:0-65
@ ./src/main.ts
@ multi main
I've discovered that Webpack has configuration options for this, but I can't figure out how to configure Webpack through Angular-CLI to support this. Is this a bug, or is this feature not exposed?
Hope that helps someone. I may try to track down the specific problem, but it's not a typescript problem; trying a generic tsc compile with a different config, both of these work.
Reacted by Robert Hjalmers, tai4hang and Denes Papp
I seems like the error was that tsconfig.app.json was overwriting the baseUrl option of the root-level tsconfig.json, setting it to ./ (instead of just .). Once I removed that option from that file, the build was successful.
Reacted by Menno Guldemond, Bradley Baysinger, Jessy, Moshe, Don, Kevin Schuchard, Guilherme de Jesus Rafael, Goga Koreli, nmongiya, Darcy and 1 more
Reacted by Jessy, Don, Kevin Schuchard, Robin M. Schaaf, FranciscoJesus, Alex and Goga Koreli
Reacted by Jessy, Federico Ibba, Alex, Goga Koreli and Harlan Gomes Nascimento
Yeah, I mean the error was that I wasn't aware of the overwriting, not that "the file is overwriting my config, that's an error, how dare that file!".
Now I just found a little thing. The IDE (vscode) doesn't show any suggestions while I type a path using the alias (so it won't autocomplete, I have to write the full path). Is there a way to fix this? Not that it's too important but... if it can be fixed it'd be nice.
vscode (or presumably any other editor, but that's what I use as well) uses the root tsconfig.json. so make sure that aliases in that file are correct relative to the location of that file. you may also have to close/open files or even the whole editor to get it to refresh the cache.
Reacted by Renil Babu, Ventzy Kunev, kaoz70 and Nathan
Does it autocomplete to you? Because it doesn't here. I restarted the editor, and I made sure the path is correctly relative to the root tsconfig.json.
Just to make it clear, the alias is recognized and works if I write the complete path, but the ide doesn't show any suggestions for autocompletion.
I have the same problem as @ivanguimam mentioned, has anyone solved this? My app works fine but my e2e tests crashing every time when I try to start them with path variables.
Reacted by Marcin 'maeri' Zawadzki, Bert Bertington, Prosenjit Manna, Leo Lorenzo Luis, Nick Vallee, ognjenkurtic, pkt-zer0, Toni Villena and Aliaksei Tratsiuk
@YuriiZadorozhnyi no I just left the E2E tests aside because I had a deadline to deliver the project and could not continue to run after a solution to this problem...
is this broken for anybody in Angular 7? I don't see paths anymore in https://angular.io/api/core/CompilerOptions
I'm getting compilation errors with ng serve on all of the paths that I had in tsconfig.json
Reacted by Fionntán O Comáin, Alex Petrik, Xinjie-canya, Florian, Ctibor Laky, bcravens, Anil Vangari and Prosenjit Manna
during ng serve I get the error ERROR in error TS5063: Substitutions for pattern '@services/*' should be an array.
so we know it's still trying to do substitutions.
Ok so I change it back and try ng serve --verbose which gives me
C:\Users\MyWindowsUser\source\node_modules doesn't exist or is not a directory
C:\Users\MyWindowsUser\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules
using description file: C:\Users\MyWindowsUser\source\repos\MyProject\client\web\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Users\MyWindowsUser\source\repos\MyProject\client\web\package.json (relative path: ./node_modules/@services)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services.tsx doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services.js doesn't exist
as directory
C:\Users\MyWindowsUser\source\repos\MyProject\client\web\node_modules\@services doesn't exist
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services]
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services.ts]
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services.tsx]
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services.mjs]
[C:\Users\MyWindowsUser\source\repos\MyProject\client\web\src\@services.js]
It looks like it's looking in node_models for @service instead of trying to map it.
I'm still digesting this all, but I'm curious about what this part means
using description file: C:\Users\MyWindowsUser\source\repos\MyProject\client\web\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Users\MyWindowsUser\source\repos\MyProject\client\web\package.json (relative path: ./node_modules/@services)
no extension
Field 'browser' doesn't contain a valid alias configuration
import { AService } from '@services/a.service';
import { BService } from '@services/b.service';
import { CService } from '@services/sub/c.service';
...
export class AppComponent {
title = 'app';
a: AService;
b: BService;
c: CService;
}
ng serve
The above compiles fine with no errors.
When we add barrel files in order to simplify our imports
src/app/service/index.ts
export * from './sub';
export * from './a.service';
export * from './b.service';
src/app/service/sub/index.ts
export * from './c.service';
and change app.component.ts imports to
import { AService, BService } from '@services/';
import { CService } from '@services/sub';
ng serve
gives us ERROR in src/app/app.component.ts(2,36): error TS2307: Cannot find module '@services/'.
Why are we getting this error now?
Resolution
If we remove the final * in tsconfig.json paths
"paths":{
"@services/*":["app/services/"]
},
ng serve
now compiles fine with no errors. I'm not sure why we had to change ["app/services/*"] to ["app/services/"] for concise imports to work with barrel(index.ts) files.
import { AService, BService } from '@services/'; -> import { AService, BService } from '@services';
Try removing the trailing slash from the import and adding either an additional path mapping just @services or try changing the path mapping to "@services*":["app/services*"].
that does work great since your mapping directly to individual files, but may still fail when using the * wildcard.
After reading the Module Resolution page, I ran tsc --traceResolution
'baseUrl' option is set to 'C:/Users/WindowsUsers/source/repos/path-alias-test/src', using this value to resolve non-relative module name '@services'.
'paths' option is specified, looking for a pattern to match module name '@services'.
Module name '@services', matched pattern '@services'.
Trying substitution 'app/services/*', candidate module location: 'app/services/*'.
Loading module as file / folder, candidate module location 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/services/*', target file type 'JavaScript'.
File 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/services/*.js' does not exist.
File 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/services/*.jsx' does not exist.
Directory 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/services/*' does not exist, skipping all lookups in it.
Loading module '@services' from 'node_modules' folder, target file type 'JavaScript'.
Directory 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/app/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/WindowsUsers/source/repos/path-alias-test/src/node_modules' does not exist, skipping all lookups in it.
File 'C:/Users/WindowsUsers/source/repos/path-alias-test/node_modules/@services.js' does not exist.
File 'C:/Users/WindowsUsers/source/repos/path-alias-test/node_modules/@services.jsx' does not exist.
Directory 'C:/Users/WindowsUsers/source/repos/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/WindowsUsers/source/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/WindowsUsers/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/node_modules' does not exist, skipping all lookups in it.
======== Module name '@services' was not resolved. ========
I was able to fix it finally by setting my tsconfig (tsconfig.app.json has no baseUrl or Paths because it only extends tsconfig)
I'm having a similar problem after updating to angular 7.0.4. I do not use angular cli for my project, but I am convinced it is ngtools/webpack causing the problem.
The relevant portions of my tsconfig look like this:
Circular dependency errors for any service which imports another service, since the both resolve to @services/index`
All top level imports have to use @services/* instead of just @services/
I've run tsc -p ./tsconfig.app.json --traceResolution a couple dozen times and grepped for the paths which were throwing errors in the angular build, and all of them are resolving to the right file through tsc.
I'm not sure why this changed between 6 and 7, since there was no mention of any changes around tsconfig in any of the Changelogs. Anyone else still stuck after following the advice in this thread?
With the same tsconfig.json I posted above, I was able to get it to build, with no circular dependencies and no stars in the path. I did a global Find and replace for all imports ending in / and replaced them all with /index. This should be default behavior, and tsc resolves without the index, but by adding it, angular compiles fine.
I'm not super happy with this resolution, but once the Angular team fixes this issue, it should be pretty easy to do another find and replace to remove the /index in every file.
I commented out baseUrl property in tsconfig.app.json and now everything works including intellisense and ng serve.
Previously intellisense worked but ng serve failed with "Cannot find module" errors.
I commented out baseUrl property in tsconfig.app.json and now everything works including intellisense and ng serve.
Previously intellisense worked but ng serve failed with "Cannot find module" errors.
Activity
duncanwerner commentedon Aug 14, 2017
Maybe related to #7341, although for me
--aotdoes not work either.glebinsky commentedon Aug 16, 2017
I'm having an issue where the app builds and runs fine but non-relative paths are not resolved in VS Code. Here's my setup:
tsconfig.json
tsconfig.app.json
duncanwerner commentedon Aug 17, 2017
I still haven't figured this out completely, but I have a workaround. This may be a windows-specific problem. This does not work:
This does work (baseURL moves up one directory, paths moves down):
Hope that helps someone. I may try to track down the specific problem, but it's not a typescript problem; trying a generic
tsccompile with a different config, both of these work.glebinsky commentedon Aug 18, 2017
@duncanwerner I used your idea and got it to work on Mac. Seems like the builder uses
tsconfig.appand linter(?) usestsconfigtsconfig:
tsconfig.app
Parziphal commentedon Aug 29, 2017
I seems like the error was that
tsconfig.app.jsonwas overwriting thebaseUrloption of the root-leveltsconfig.json, setting it to./(instead of just.). Once I removed that option from that file, the build was successful.duncanwerner commentedon Aug 29, 2017
tsconfig.app.jsonextendstsconfig.json, so any values you define in the former will override values in the latter, at least for app configuration.Parziphal commentedon Aug 29, 2017
Yeah, I mean the error was that I wasn't aware of the overwriting, not that "the file is overwriting my config, that's an error, how dare that file!".
Now I just found a little thing. The IDE (vscode) doesn't show any suggestions while I type a path using the alias (so it won't autocomplete, I have to write the full path). Is there a way to fix this? Not that it's too important but... if it can be fixed it'd be nice.
duncanwerner commentedon Aug 29, 2017
vscode (or presumably any other editor, but that's what I use as well) uses the root
tsconfig.json. so make sure that aliases in that file are correct relative to the location of that file. you may also have to close/open files or even the whole editor to get it to refresh the cache.Parziphal commentedon Aug 29, 2017
Does it autocomplete to you? Because it doesn't here. I restarted the editor, and I made sure the path is correctly relative to the root
tsconfig.json.Just to make it clear, the alias is recognized and works if I write the complete path, but the ide doesn't show any suggestions for autocompletion.
duncanwerner commentedon Aug 29, 2017
Sorry, I misunderstood. It does not autocomplete aliased paths. File a feature request over at the vscode repo.
ivanguimam commentedon Apr 9, 2018
I have a problem similar to this when I run the tests E2E
Angular CLI version:
tsconfig.json
tsconfig.e2e.json
Error:
Error: Error: Cannot find module '@e2e/utils/utils'dabruns commentedon Jun 22, 2018
I have the same problem as @ivanguimam mentioned, has anyone solved this? My app works fine but my e2e tests crashing every time when I try to start them with path variables.
Bengreen commentedon Aug 23, 2018
I am having trouble getting paths to work when building packages. ie in the tsconfig.lib.json
I have added:
to tsconfig.lib.json and then try to utilise it with a path such as
the target file is
src/lib/bids/crossfilter-data/crossfilter-data.component.tsalan-agius4 commentedon Aug 23, 2018
@Bengreen, may I suggest you open a new issue with a small reproduction if you feel it’s a bug. That said when building packages you should not reference files like you showed above but rather the entrypoint aka the library
https://github.com/dherges/ng-packagr/blob/master/docs/secondary-entrypoints.md
YuriiZadorozhnyi commentedon Sep 18, 2018
@ivanguimam I have the same problem. Did you find the solution?
ivanguimam commentedon Sep 18, 2018
@YuriiZadorozhnyi no I just left the E2E tests aside because I had a deadline to deliver the project and could not continue to run after a solution to this problem...
seabass223 commentedon Nov 5, 2018
is this broken for anybody in Angular 7? I don't see paths anymore in https://angular.io/api/core/CompilerOptions
I'm getting compilation errors with ng serve on all of the paths that I had in tsconfig.json
Fiontan commentedon Nov 6, 2018
Reading all the above and seeing all related closed issue and yet it still seems to be a thing in Angular 7 as @seabass223 has mentioned
seabass223 commentedon Nov 7, 2018
I found that if I incorrectly change one of my path values to a string rather than an array,
to
during ng serve I get the error
ERROR in error TS5063: Substitutions for pattern '@services/*' should be an array.
so we know it's still trying to do substitutions.
Ok so I change it back and try ng serve --verbose which gives me
It looks like it's looking in node_models for @service instead of trying to map it.
I'm still digesting this all, but I'm curious about what this part means
any help is much appreciated in solving this.
clydin commentedon Nov 7, 2018
Try:
"@services/*": ["app/modules/core/services/*"],seabass223 commentedon Nov 8, 2018
I think I've got it fixed now
Setup
The above compiles fine with no errors.
When we add barrel files in order to simplify our imports
src/app/service/index.ts
src/app/service/sub/index.ts
and change app.component.ts imports to
gives us ERROR in src/app/app.component.ts(2,36): error TS2307: Cannot find module '@services/'.
Why are we getting this error now?
Resolution
If we remove the final * in tsconfig.json paths
now compiles fine with no errors. I'm not sure why we had to change
["app/services/*"]to["app/services/"]for concise imports to work with barrel(index.ts) files.clydin commentedon Nov 8, 2018
import { AService, BService } from '@services/';->import { AService, BService } from '@services';Try removing the trailing slash from the import and adding either an additional path mapping just
@servicesor try changing the path mapping to"@services*":["app/services*"].Also please see here for details on TypeScript module resolution and path mapping: https://www.typescriptlang.org/docs/handbook/module-resolution.html
seabass223 commentedon Nov 8, 2018
thanks for the response. I tried
"@services*":["app/services*"]but that didn't work either. I'll give the module-resolution handbook a good read.MarcosMeli commentedon Nov 11, 2018
Solved the problem in Angular 7 adding the paths to both
tsconfigfilestsconfig.jsonhelps vscode to works and with intellisensetsconfig.app.jsonis also needed for angulartsconfig.json
tsconfig.app.json
and the intellisense works great
seabass223 commentedon Nov 12, 2018
that does work great since your mapping directly to individual files, but may still fail when using the
*wildcard.After reading the Module Resolution page, I ran
tsc --traceResolutionI was able to fix it finally by setting my tsconfig (tsconfig.app.json has no baseUrl or Paths because it only extends tsconfig)
and appropriately using index.ts files just like node_modules/@angular does.
The
*were the culprit.localyost3000 commentedon Nov 16, 2018
I'm having a similar problem after updating to angular 7.0.4. I do not use angular cli for my project, but I am convinced it is ngtools/webpack causing the problem.
The relevant portions of my tsconfig look like this:
This builds but with 2 big caveats.
@services/index`@services/*instead of just@services/I've run
tsc -p ./tsconfig.app.json --traceResolutiona couple dozen times and grepped for the paths which were throwing errors in the angular build, and all of them are resolving to the right file throughtsc.I'm not sure why this changed between 6 and 7, since there was no mention of any changes around tsconfig in any of the Changelogs. Anyone else still stuck after following the advice in this thread?
MarcosMeli commentedon Nov 16, 2018
@seabass223 it works for me with
*wilcard with no problems but only if I duplicate paths intsconfig.jsonandtsconfig.app.jsonand the imports works fantastic
localyost3000 commentedon Nov 16, 2018
Super quick update:
With the same
tsconfig.jsonI posted above, I was able to get it to build, with no circular dependencies and no stars in the path. I did a global Find and replace for all imports ending in/and replaced them all with/index. This should be default behavior, andtscresolves without the index, but by adding it, angular compiles fine.I'm not super happy with this resolution, but once the Angular team fixes this issue, it should be pretty easy to do another find and replace to remove the
/indexin every file.luckylooke commentedon Dec 10, 2018
@seabass223 maybe this is the correct docs for CompilerOptions --> https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
gogakoreli commentedon Jan 16, 2019
In my case
tsconfig.spec.jsonwas overwritingbaseUrlanilvangari2005 commentedon Feb 8, 2019
I commented out
baseUrlproperty intsconfig.app.jsonand now everything works including intellisense andng serve.Previously intellisense worked but
ng servefailed with "Cannot find module" errors.tsconfig.json:tsconfig.app.jsonrelevant configanikets43 commentedon Feb 24, 2019
@ivanguimam Did you find solution for this?
danielpcampagna commentedon Feb 27, 2019
@Bengreen I have the same problem. Did you find the solution?
skwny commentedon Jul 23, 2019
Came here b/c I just experienced this same issue. I pieced together a work around from @swimmadude66 solution. For anyone else:
tsconfig.json compiler options looks like this:
When importing a service anywhere, I do this:
index.tsis located in theservicesdir, and contains:There are no more circular dependency warnings after this.
veerabhadraraochikka commentedon Jul 31, 2019
while migration from mono app to multi app we should look at baseurl in tsconfig.json
angular-automatic-lock-bot commentedon Sep 9, 2019
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.