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

Question

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.

sarfrazanwar · Accepted Answer · 2021-02-01 07:49:01Z

2

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;

answered Feb 1, 2021 at 7:49

sarfrazanwar

3832 gold badges5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tanzeel Over a year ago

In this case, where do i keep my calendarLanguages.js file. I mean in which directory.

sarfrazanwar Over a year ago

You can place it anywhere and just provide the path. As a good practice, you should use a structure like this "src/assets/js/calendarLanguages.js" to store js files. You can create a directory if not present already.

Tanzeel Over a year ago

things are working as expected. let me show this to my tech lead, run some test cases. I'll get back to you. thanks

sarfrazanwar Over a year ago

It this works fine , You can accept the answer. Thanks

Tanzeel Over a year ago

From here we can make changes but yes, for now, i got my answer :-)

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related