How to resolve BUILD ERROR in angular for a local JS file

I've a simple custom component called DatepickerComponent. This is the project structure.

I've a simple JS file calendarLanguages.js and it is under the same roof. Here is the code.

calendarLanguages.js

export const spanish = {
  dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
  monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', ...],
  monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', ...]
};

In my datepicker.component.ts file I'm importing it as:

import { Component, OnInit } from '@angular/core';
import * as localeLanguage from './calendarLanguages.js';
// import * as localeLanguage from './calendarLanguages'; <--- also tried

@Component({
  ...
})
export class DatepickerComponent implements OnInit {

  ...
  selectedLanguage: any={};

  constructor() { }

  ngOnInit() {
    this.selectedLanguage=localeLanguage.spanish;
  }
}

I'm simply building the project with ng build. But I'm getting this error:

BUILD ERROR Could not resolve './calendarLanguages' from dist\pinc-insights-base-lib\esm2015\lib\datepicker\datepicker.component.js Error: Could not resolve './calendarLanguages' from dist\pinc-insights-base-lib\esm2015\lib\datepicker\datepicker.component.js at error (C:\Users\320050772\Documents\pinc-insights-base\node_modules\rollup\dist\rollup.js:3460:30) at C:\Users\320050772\Documents\pinc-insights-base\node_modules\rollup\dist\rollup.js:21854:25

Please help me.

You should declare the calendarLanguages.js file in the angular.json like below

"scripts": [
  "src/calendarLanguages.js"
]

This will add the js File and its content in global context. After that declare variable out side your component class like this (Name should be same as in js file) :

declare const spanish: any;

@Component({
  ...
})

After this you will be able to access the value at runtime like this

this.selectedLanguage= spanish;