如何解决本地 JS 文件 angular 中的 BUILD ERROR

Question

我有一个名为 DatepickerComponent 的简单自定义组件。这是项目结构。

我有一个简单的 JS 文件 calendarLanguages.js，它在同一屋檐下。这是代码。

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', ...]
};

在我的 datepicker.component.ts 文件中，我将其导入为：

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;
  }
}

我只是用 ng build 构建项目。但我收到此错误：

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:\Users0050772\Documents\pinc-insights-base\node_modules\rollup\dist\rollup.js:3460:30) at C:\Users0050772\Documents\pinc-insights-base\node_modules\rollup\dist\rollup.js:21854:25

请帮帮我。

Answer 1

您应该在 angular.json 中声明 calendarLanguages.js 文件，如下所示

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

这将在全局上下文中添加 js 文件及其内容。之后像这样在组件 class 之外声明变量（名称应与 js 文件中的名称相同）：

declare const spanish: any;

@Component({
  ...
})

在此之后，您将能够像这样在运行时访问该值

this.selectedLanguage= spanish;

如何解决本地 JS 文件 angular 中的 BUILD ERROR

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

javascript

angular

ng-build