Cors issue on ngx-translate of externally loaded js in Angular project

Question

First a bit of context: we've got an Angular project (call it "project X") that has its own json translation files (loaded with ngx-translate). This project is then ported as Angular Elements (the whole thing is ported to a single js file, call it "my-lib.js"). Another project ("project Y") dynamically loads this script so the Angular Elements of project X can be used inside it. Project Y also makes use of its own json translation files loaded with ngx-translate.

Project X is built to a /dist and the json translation files for project X are copied inside /dist/i18n. This /dist folder is then served with lite-server on port 3003 (i.e. http://localhost:3003). In a bs-config.json file this port is specified and also "cors: true":

{
    "port": 3003,
    "files": ["./src/**/*.{html,htm,css,js,json}"],
    "server": { "baseDir": "./dist" },
    "cors": true
}

Then project Y is also served ("ng serve"). The default language is English. So the en.json file inside project Y is loaded correctly! But... the en.json file of project X is not... "en.json" is hosted on http://localhost:3003/i18n/en.json and I can access it by url. But within project Y, I get a cors error as in:

Inside project X ngx-translate module is imported inside AppModule as follows:

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, environment.production ? '/objt-lib/assets/i18n/' : (environment.staging ? 'http://localhost:3003/i18n/' : '/assets/i18n/'), '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserTransferStateModule,
    BrowserModule,
    AppRoutingModule,
    ...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      }
    }),
    BrowserAnimationsModule
  ],
  providers: [
    ...
  ],
  bootstrap: environment.production ? [] : [AppComponent]
})
// export class AppModule { }
export class AppModule implements DoBootstrap {
   ....
}

Inside project Y it is imported as follows:

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    AppRoutingModule,
    ...
    BrowserAnimationsModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    HttpClientModule
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
  }
}

Why am I getting a cors error? Thanks in advance!

score 0 · Answer 1 · answered Mar 04 '20 at 13:43

Luckily found the answer myself! I appears I had an HttpInterceptor that added extra HttpHeaders, which is why it was sending a preflight request (which was causing the cors issue)! A preflight request isn't sent when it's a simple GET request, but when you add certain HTTP Headers to the request, the browser sends a preflight request. So TLDR: removed the extra http header from the HttpInterceptor et voila! Worked like a charm :-)!

Cors issue on ngx-translate of externally loaded js in Angular project

1 Answers1