How to solve problems with e2e testing of a large project on Angular (4)?

Question

Angular

Good day,
there is a fairly large project that is written in Angular (4). Now there is a task to cover the entire e2e project and unit tests. Decided to start with e2e. I looked at all the necessary dependencies and settings, putting the latest version next to it via Angular Cli. I registered a simple test, not serious, just checking the performance, but in the end even it does not work.
There are 2 files in the /e2e directory:

app.po.ts

import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return 'Welcome to app!';
  }
}

app.e2e-spec.ts

import { AppPage } from './app.po';

describe('Project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    console.log('======================');
    console.log(page.getParagraphText());
    expect(page.getParagraphText()).toEqual('Welcome to app!');
  });
});

In fact, such a script should end in success. But something goes wrong. I run ng e2e, the project builds (ng serve), the initial settings go through, the message appears: "Jasmine started". After that, the browser (test Google Chrome) opens and the application starts loading (preloader). Console.log() is output from the app.e2e-spec.ts file and everything crashes with the following errors:

E/protractor - Could not find Angular on page localhost:49152 : retries looking for angular exceeded

Project App
✗ should display welcome message
- Failed: Angular could not be found on the page localhost:49152 If this is not an Angular application, you may need to turn off waiting for Angular.

Can anyone come across this?

Answer 1

As a result, I had the following problem: the front communicates with the back through nginx, and when the application is initialized, I have a request for the back. Naturally, when running the tests, a server was raised to localhost:n-port, which could not communicate with the backend. As a result of the request, a 500 arrived during initialization and the test failed.
If anyone has the same problem because of the back, when nginx resolves everything, then for the tests you need to register a proxy. In short, next to package.json we create a file "proxy.conf.json", we write there:

{
    "/api": {
        "target": "http://НужныйАдрес:НужныйПротокол",
        "secure": false
    }
}

And in package.json you write for convenience: "e2e": "ng e2e --proxy-config proxy.conf.json" and run: npm run e2e
If you want to learn more about proxies, here is the link