Angular-cli: Use paths mapping with tsconfig.e2e.json result to Cannot find module error

[hellraisercenobit]

Versions

Angular CLI: 1.6.8
Node: 8.9.1
OS: win32 x64
Angular: 5.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0
Done in 1.78s.

Windows 10

Repro steps

• Step 1
  Declare new paths in tsconfig.e2e.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ],
    "paths": {
      "@mypath/*": [
        "./mypath/*"
      ]
    }
  }
}

• Step 2
  npm run ng e2e

Observed behavior

[12:13:32] E/launcher - Error: Error: Cannot find module '@myPath/path'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Projects\frontend\e2e\app.po.ts:2:1)
    at Module._compile (module.js:635:30)
    at Module.m._compile (C:\Projects\frontend\node_modules\ts-node\src\index.ts:422:23)
    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\Projects\frontend\node_modules\ts-node\src\index.ts:425:12)
    at Module.load (C:\Projects\frontend\node_modules\coffee-script\lib\coffee-script\register.js:45:36)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Projects\frontend\e2e\app.e2e-spec.ts:1:1)
    at Module._compile (module.js:635:30)
    at Module.m._compile (C:\Projects\frontend\node_modules\ts-node\src\index.ts:422:23)
    at Module._extensions..js (module.js:646:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\Projects\frontend\node_modules\ts-node\src\index.ts:425:12)
    at Module.load (C:\Projects\frontend\node_modules\coffee-script\lib\coffee-script\register.js:45:36)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at C:\Projects\frontend\node_modules\jasmine\lib\jasmine.js:93:5
    at Array.forEach (<anonymous>)
    at Jasmine.loadSpecs (C:\Projects\frontend\node_modules\jasmine\lib\jasmine.js:92:18)
    at Jasmine.execute (C:\Projects\frontend\node_modules\jasmine\lib\jasmine.js:197:8)
    at C:\Projects\frontend\node_modules\protractor\built\frameworks\jasmine.js:132:15
    at Function.promise (C:\Projects\frontend\node_modules\protractor\node_modules\q\q.js:682:9)
    at C:\Projects\frontend\node_modules\protractor\built\frameworks\jasmine.js:104:14
    at _fulfilled (C:\Projects\frontend\node_modules\protractor\node_modules\q\q.js:834:54)
    at self.promiseDispatch.done (C:\Projects\frontend\node_modules\protractor\node_modules\q\q.js:863:30)
    at Promise.promise.promiseDispatch (C:\Projects\frontend\node_modules\protractor\node_modules\q\q.js:796:13)
    at C:\Projects\frontend\node_modules\protractor\node_modules\q\q.js:556:49
    at runSingle (C:\Projects\frontend\node_modules\protractor\node_modules\q\q.js:137:13)
    at flush (C:\Projects\frontend\node_modules\protractor\node_modules\q\q.js:125:13)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
[12:13:32] E/launcher - Process exited with error code 100
error Command failed with exit code 4.

Desired behavior

Paths should be resolved like expected in tsconfig

Mention any other details that might be useful (optional)

[ivanguimam]

I have the same problem, any solution?

[hellraisercenobit]

I tried a lot of things since my last report to fix it but the same behavior occured.

[ivanguimam]

And how are you doing to run your tests? @hellraisercenobit

[hellraisercenobit]

@ivanguimam My first problem was for environments folder to use the same as my app.
To fix it i'll just have to copy paste my env folder to e2e dir and use relative paths instead.
Ugly XD but it work.
Maybe you should try with latest angular/cli version and angular 5.2.9.
Or Wait for v6.
I'll try it too soon.

[hellraisercenobit]

Same with latest angular/cli

[ivanguimam]

No fix yet for this error?

[ypolosov]

i have the same problem ...wait for the solution

[ypolosov]

i've found the temporary solution:

My versions:

Angular CLI: 1.7.1
Node: 8.7.0
OS: linux x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/cli: 1.7.1
@angular/flex-layout: 5.0.0-beta.13
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

The solution is the usage of 'tsconfig-paths' package.

1. npm install tsconfig-paths --save-dev
2. Put following code lines at the beginning of protractor.conf.js

require('ts-node/register');
require('tsconfig-paths/register');

1. Set pathes area in tsconfig.json

"baseUrl": ".",
"paths": {
    "@my-scope/shared/*": ["../shared/*"]
}

1. As the result you can use following import in *.e2e-spec.ts and *.po.ts files

import { Logger } from '@my-scope/shared/logger';

[splincode]

Solution

npm install tsconfig-paths --save-dev

e2e/tsconfig.e2e.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ],
    "paths": {
      "@e2e/*": [
        "../e2e/*"
      ]
    }
  }
}

protractor.conf.js

const tsConfig = require("./e2e/tsconfig.e2e.json");
...
onPrepare() {

    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    require("tsconfig-paths").register({
      project: 'e2e/tsconfig.e2e.json',
      baseUrl: 'e2e/',
      paths: tsConfig.compilerOptions.paths
    });

  }
...

[djindjic]

for me it does not work with angular 6/cli 6

[paul58914080]

+1 . It does not work for me either with angular 6/cli 6

[dabisrat]

Angular CLI: 6.2.1
Node: 10.8.0
Angular: 6.1.7

+1 This didn't work for me. I'm still getting Unhandled rejection Error: Cannot find module

[alan-agius4]

Hi, I have looked into this and it seems that it working as expected.

The only thing to remember is that paths are relative to the root directory as the baseUrl is set to ./ in the main tsconfig.json. Thus if your mapping module resides in the e2e folder and your path mappings are set in the tsconfig.e2e.json that you should reference the module relative to the root.

Example;

    "paths": {
      "@shared/*": [
        "./e2e/shared/*"
      ]
    },

With that said, it would be better to put the path mapping in the main tsconfig, so that they can even be resolved when using the IDE.

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