Angular-cli: VS Code auto imports are wrong for absolute paths in E2E files

[ognjenkurtic]

Bug Report or Feature Request (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] feature request

Also asked in Stack Overflow

Versions

Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular: 6.0.9

Repro steps

1. Create a new app using ng new
2. Setup baseUrl:"./src" in the tsconfig file
3. Import something to a file in src folder using autoimport
   Result: _import { smt1 } from "app/core/services/smt1";_ (OK)

4. Import something to a file in e2e folder using autoimport
   Result: _import { smt2 } from "../e2e/smt2";_ (NOK)
   Auto import path is relative to the baseUrl of the tsconfig.json and cannot be resolved when running
   the tests

5. Setup baseUrl: "." in tsconfig.json to have a common root for both src and e2e folders

6. Imports now look like this respectively:
   _import { smt1 } from "src/app/core/services/smt1";_ (OK)
   _import { smt2 } from "src/e2e/smt2";_ (OK)

7. Run npm run e2e
   Cannot find name 'smt2'.

   at createTSError (\node_modules\ts-node\src\index.ts:261:12)
   at getOutput (\node_modules\ts-node\src\index.ts:367:40)
   at Object.compile (\node_modules\ts-node\src\index.ts:557:11)
   at Module.m._compile (\node_modules\ts-node\src\index.ts:439:43)
   at Module._extensions..js (module.js:663:10)
   at Object.require.extensions.(anonymous function) [as .ts] (node_modules\ts-node\src\index.ts:442:12)
   at Module.load (module.js:565:32)
   at tryModuleLoad (module.js:505:12)
   at Function.Module._load (module.js:497:3)
   at Module.require (module.js:596:17)

Desired functionality

baseUrl: "." in tsconfig.json should enable us to have root folder of the app as the base both in e2e and src folders.
Other option would be to configure autoimports for src and e2e files separately, so that we can use absolute paths in src and relative in e2e folders.

[alan-agius4]

I'm sorry, but I don't think this is an issue caused by Angular CLI. As auto imports is not an Angular CLI feature, as it's provided by TypeScript and based on your TypeScript version it might have different behaviours and some bugs might have been addressed in the latest version.

I was able to get a list of auto imports;

[alexeagle]

I think the question is how to get a tsconfig.json into the e2e directory rather than tsconfig-e2e.json since the latter isn't used by the editor, and the e2e directory really is a different root directory?

[borriej]

Im also having this issue.

My VS Code User Settings .json is set to non-relative paths:

  "typescript.preferences.importModuleSpecifier": "non-relative",

So when I (auto) import a dependency.. the paths look like

// auto import
import { AppPage } from 'e2e/src/app.po';

// instead of (old)
import { AppPage } from './app.po';

When running
npm run e2e

I get this error:

  Error: Cannot find module 'e2e/src/app.po'

How do we make e2e run with non-relative paths?

[scote]

Hello I also have this issue when I run e2e test with absolute path.
We are forcing in our TsLint rules to not use relative path.

Anyone have a fix for that?

[dgp1130]

Running ng new on a new project creates an e2e/tsconfig.json, so the editor should pick that up within the e2e/ directory. The base tsconfig.json also uses baseUrl: './'.

The desire for smarter auto-import handling should be generally addressed by "solution style" tsconfigs in v10 which should make the editor a lot smarter about what files are associated with what tsconfig.json (#8138). If there is still some difficulties after upgrading to v10, then please reopen and we can take another look at this.

[angular-automatic-lock-bot[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._}