Protractor Error: Cannot find module './.tmp/ngApimock/protractor.mock.js'

[huiaic]

I have installed ng-apimock and see that v1.4.2 is inserted into my package.json
"ng-apimock": "^1.4.2"

Added the required setup in protractor config:

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
  },
  seleniumAddress: 'http://localhost:4444/wd/hub',
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  ngApimockOpts: {
    angularVersion: 4  
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    global.ngApimock = require('./.tmp/ngApimock/protractor.mock.js');
  }
};

But when I run protractor, I'm getting this error:

[15:45:25] I/launcher - Running 1 instances of WebDriver
[15:45:25] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
[15:45:26] E/launcher - Error: Error: Cannot find module './.tmp/ngApimock/protractor.mock.js'
at Function.Module._resolveFilename (module.js:469:15)

My system info:

angular/cli: 1.4.9
node: 6.11.3
protractor v5.1.2

What am I missing?

Also, I have another question - the README says to create a separate file for each mock api call. But where should I save this file and do I need to name it something special?

[wswebcreation]

Hi @huiaic

But when I run protractor, I'm getting this error:

What is the location of the protractor.conf.js file and the protractor.mock.js file? It could be that for example you have this structure

root
|_.tmp/ngApimock/protractor.mock.js
|_e2e/config/protractor.conf.js

Then the protractor.mock.js is not in the same folder in comparison to the protractor.conf.js. You should use a relative path, or to be sure an absolute path. That's up to you

the README says to create a separate file for each mock api call. But where should I save this file and do I need to name it something special?

When you start ng-Apimock you start it with something like this. There you will tell ng-Apimock in which folder it needs to search for the JSON files. You can create a folder structure there per API, ng-Apimock will search with a glob. So you can do it like for example this

|_authentication-api
| |_token.json
| |_bearer.json
| |_*.json
|_translation-api
  |_nl.json
  |_en.json

The filename of the JSON doesn't matter, I would advice you to give each JSON-file a unique name-property, see also here so you can easily identify your files by name during tests or in your ng-Apimock UI.

I hope it helps.

[Local9]

I have this issue also but I have a different folder layout. I am adding this to a Angular-CLI project, everything else is fine if I write the whole path but this defeats the point. Example below;

root
|_.tmp/ngApimock/protractor.mock.js
|_protractor.conf.js

EDIT: Found my issue, in the require I was looking for mocking not ngApimock folder, thats what you get for copy and paste while watching Mock the Week.

So in protractor.conf.js I added const basePath = __dirname; and updated the global.ngApimock file path to;
global.ngApimock = require(basePath + '/.tmp/ngApimock/protractor.mock.js');

Having since been able to drop the basePath from the require;
global.ngApimock = require('./.tmp/ngApimock/protractor.mock.js');