Импорт внешнего JS в Angular 8

Question

Я пишу приложение в Angular 8 (8.0.3), и мне нужно импортировать внешний файл JS, который будет содержать ссылку на URL для API, который может и будет изменяться. Проблема, с которой я сталкиваюсь, заключается в том, что изменения, которые я делаю в этом файле после того, как я скомпилировал Angular приложение (с помощью ng build --prod), изменения не собираются внутри Angular, но он сохраняет данные такими, какими они были при приложение было построено.

Это внешний JS файл:

export function apiUrl() {
    return 'http://www.localhost.local/api/v1/';
}

apiUrl() возвращает правильное значение, но если я его изменю, обновленное значение не будет отражено внутри Angular приложение.

Я также создал .d.ts. файл:

export declare function apiUrl();

Импортировал внешний файл JS в индекс. html:

<script type="module" src="assets/js/api_url.js"></script>

Использовал его в angular сервисе:

import {apiUrl} from '../../assets/js/api_url';
export class ApiService {

    private api_url: string = apiUrl();

    constructor(...) {
        console.log(apiUrl());
    }
}

Я НЕ импортировал этот файл в angular.json, и даже если я это сделал, ничего не изменилось.

Итак, как создать и затем импортируйте внешний JS файл, который после его изменения приложение Angular обнаружит, что он изменился?

РЕДАКТИРОВАТЬ: Заметьте, что мне не нужна перезагрузка живого приложения при изменении этого файла, но я необходимо, чтобы файл загружался с сервера каждый раз при запуске приложения Angular.

РЕДАКТИРОВАТЬ 2: Чтобы объяснить, зачем мне это нужно. Приложение Angular будет использоваться во внутренней сети, к которой у меня нет доступа. В настоящее время клиент не знает URL-адрес API, и, даже если он узнает, он может измениться в любой момент. Вот почему мне нужно, чтобы это работало.

Answer 1

В этом случае вы должны использовать окружения

. Вы можете найти их в каталоге src/environments.

Для локального развития у вас есть environment.ts файл, для производства environment.prod.ts

Пример environment.ts:

export const environment = {
  production: false,
  apiUrl: 'http://www.localhost.local/api/v1/'
};

environment.prod.ts:

export const environment = {
  production: true,
  apiUrl: 'http://www.producitonurl.com/api/v1/'
};

Чтобы использовать это apiUrl значение, которое вы необходимо импортировать файл окружения в машинописный файл следующим образом: Вам нужно импортировать environment.ts, а не любой другой файл окружения, потому что angular заменяет его при сборке приложения

import {environment} from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class MyApiService {
    apiUrl = environment.apiUrl;
}

Но если вы хотите использовать метод из <script type="module" src="assets/js/api_url.js"></script>, просто используйте window объект, подобный этому:

private api_url: string = (window as any).apiUrl();