Как включить файл JS в ionic 3

Это решение помогло только мне

Поместите импорт js в тег заголовка src/index.html перед build/polyfills.js и build/main.js (они находятся в теге body);

Пример: я создал файл src/assets/test.js с var testvar, импортировал в src/index.html, а затем в src/app/app.component.ts объявил declare var testvar;.

test.js

var testvar = "Hello from external js";

index.html

...
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <script src="assets/js/test.js"></script> //here, not in body
...

app.componet.ts

declare var testvar;

@Component({
   templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  constructor(private statusbar : StatusBar,  splashScreen: SplashScreen) {
   alert(testvar);
...

Чтобы расширить ответ misha130. Вам нужно будет импортировать его в нужный файл следующим образом:

import * as test from '../assets/data/test'

Таким образом, у вас есть доступ к тестовой переменной.

console.log(test.testvar);

Удалите его из index.html и используйте следующим образом:

import '../assets/data/test';

Это решение, которое работает для меня на ionic 3.20.0:

1. Создайте этот файл src/assets/data/test.js. В этом файле объявите эти переменные:

   testvar = "Hello from external js"; // notes: there is no var keywork testvar2 = "Hello from external js"; // notes: there is no var keywork var testvar3 = "Hello from external js"; // this will not work

2. В app.component.ts добавьте эти строки, чтобы импортировать файл javascript и объявить его переменные:

   import * as test from '../assets/data/test'; // check correct path declare var testvar: any; // each declaration should be on separate line declare var testvar2: any; declare var testvar3: any;

3. Теперь в app.component.ts вы можете получить доступ к этим переменным следующим образом:

   console.log(testvar); // not test.testvar console.log(testvar2); console.log(testvar3); // will be undefined because of the var keywork

Заключительные слова: нет необходимости добавлять ссылку на test.js в src/index.html, если мы делаем, как указано выше.

Ни одно из вышеперечисленных решений не сработало для меня. В первом решении файл js загружается во время загрузки приложения, что не является идеальным решением, когда у вас есть объемный файл js.

Я искал динамическое решение для загрузки внешней библиотеки, и есть библиотека для загрузки асинхронных файлов JavaScript. https://www.npmjs.com/package/scriptjs

Установите пакет:

npm i scriptjs

Затем используйте его в любом месте, как показано ниже:

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}

OR

Вы можете просто использовать метод jquery для добавления или удаления тега script в вашем заголовке.

Чтобы добавить файл .js, вызовите строку ниже в ngOnInit():

$('head').append('<script async src="assets/js/search.js"></script>');

Удалить файл .js:

document.querySelector('script[src="assets/js/search.js"]').remove();