adonis js and angular 6 csrf

Question

I am creating an SPA using Angular 6 for front end and Adonisjs for backend.

And now I got stuck in the problem csrf. If I disable csrf in adonis/config/shield.js I have complete my task. But, I don't want to disable csrf.

I have followed some suggestions on internet about using Angular HttpInterceptor but still not work.

here is csrf config in shield.js

csrf: {
enable: true,
methods: ['POST', 'PUT', 'DELETE'],
filterUris: ['/api/auth/signin'],
cookieOptions: {
  httpOnly: false,
  sameSite: true,
  path: '/',
  maxAge: 7200
}
// compareHostAndOrigin: true}

And here is my token-interceptor.service.ts

    import { Injectable } from '@angular/core';
import {
  HttpClientXsrfModule,
  HttpInterceptor,
  HttpXsrfTokenExtractor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class TokenInterceptorService implements HttpInterceptor {
  constructor(private tokenExtractor: HttpXsrfTokenExtractor) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const headerName = 'XSRF-TOKEN';
    const respHeaderName = 'X-XSRF-TOKEN';
    const token = this.tokenExtractor.getToken() as string;
    if (token !== null && !req.headers.has(headerName)) {
      req = req.clone({ headers: req.headers.set(respHeaderName, token) });
    }
    return next.handle(req);

  }
}

And I don't know if the Angular intercept the Http. because from my request, I don't see any X-XSRF-TOKEN header.

And I still confuse about the token Adonisjs uses. because when I log in and console.log(request.csrfToken) I got a value but the value is different from token in database (I use mongoDB).

Should I got csrf from the beginning I open my app? or something else?

Please suggest me how to fix it.