What is the process of invoking an external JavaScript function in Angular 5?

Question

What is the process of invoking an external JavaScript function in Angular 5?

I recently downloaded a theme from this source. I need to specify script and CSS in the index.html file.

The body section of index.html looks like this:

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/main.85741bff.js"></script>
  <script type="text/javascript" src="./assets/js/common.js"></script>
</body>

In common.js, I have defined my function and called it from main.85741bff.js file.

This is the function in common.js:

document.addEventListener("DOMContentLoaded", function (event) {
     masonryBuild();
     navbarToggleSidebar();
     navActivePage();
});

However, I am facing an issue where I can call the function when the page reloads but not when the content loads dynamically.

If anyone has any suggestions on how to resolve this problem, your help would be greatly appreciated.

javascript angular typescript angular5

Answer 1

Answer №1

You have the ability to incorporate javascript within your Angular application.

Begin by following these steps:

Step 1. Create a demo.js file in the assets/javascript directory.

export function test1(){
    console.log('Executing test 1 function');
}

Step 2. Create a demo.d.ts file in the assets/javascript folder.

export declare function test1();

Step 3. Implement it within your component

import { test1 } from '../assets/javascript/demo'; 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(test1());
  }
}

Please ensure that both the .js and .d.ts files have the same name.

Answer 2

You have the ability to incorporate javascript within your Angular application.

Begin by following these steps:

Step 1. Create a demo.js file in the assets/javascript directory.

export function test1(){
    console.log('Executing test 1 function');
}

Step 2. Create a demo.d.ts file in the assets/javascript folder.

export declare function test1();

Step 3. Implement it within your component

import { test1 } from '../assets/javascript/demo'; 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(test1());
  }
}

Please ensure that both the .js and .d.ts files have the same name.

Answer 3

Answer №2

To resolve the issue, make sure to adjust the sequence in which your JavaScript files are loaded. It is advisable to load common.js before main......js. This way, your script will be able to access functions from files that have already been loaded. Simply swap the order of these two lines of code:

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/common.js"></script>
  <script type="text/javascript" src="./assets/js/main.85741bff.js">/script>
</body>

Answer 4

To resolve the issue, make sure to adjust the sequence in which your JavaScript files are loaded. It is advisable to load common.js before main......js. This way, your script will be able to access functions from files that have already been loaded. Simply swap the order of these two lines of code:

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/common.js"></script>
  <script type="text/javascript" src="./assets/js/main.85741bff.js">/script>
</body>

Answer 5

Answer №3

When working on an Angular 4 or 5 project, you'll come across the .angular-cli.json file in the project folder.

Within this file, there is a section that looks like this:

"apps": [
  {
    "scripts": []
  }
]

To include external JavaScript files in your project, simply add the path to your script within the "scripts" array.

Answer 6

When working on an Angular 4 or 5 project, you'll come across the .angular-cli.json file in the project folder.

Within this file, there is a section that looks like this:

"apps": [
  {
    "scripts": []
  }
]

To include external JavaScript files in your project, simply add the path to your script within the "scripts" array.

Answer 7

Answer №4

To access these functions, you can utilize the window object:

document.addEventListener("DOMContentLoaded", function (event) {
      window['toggleSidebar']();
      window['activatePage']();
 });

Answer 8

To access these functions, you can utilize the window object:

document.addEventListener("DOMContentLoaded", function (event) {
      window['toggleSidebar']();
      window['activatePage']();
 });

What is the process of invoking an external JavaScript function in Angular 5?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Fade-in a new, revised text after fading-out the original text in ReactJS

What is the alternative to using toPromise() when utilizing await with an Observable?

What are the steps to kick off my React App once I've cloned it?

Guide on merging non-modular JavaScript files into a single file with webpack

What is the best approach for creating a test that can simulate and manage errors during JSON parsing in a Node.js

Learn how to trigger an event or API call in Angular 8 when the browser is closed with the help of HostListener

What is the best way to refine React Component's props with Typescript?

Puppeteer: Easier method for managing new pages opened by clicking a[target="_blank"]; pause for loading and incorporate timeout controls

Reaching the maximum request threshold

Tips for creating multiple files using nodejs and express

Typescript: parameter must be included if another is also required

Ways to display pictures by invoking an API within the antd item list container

The Mat table is not updating on its own

Adding a new element with Jquery when a dropdown option is selected

Angular Universal experiences issues with route functionality after page reloads

Tips for preventing hcaptcha from displaying image challenges during web scraping with puppeteer

Error encountered while sending a post request from Angular to NodeJS with JSON data

jquery mobile popup message will fade away within a short time interval

Is there a way to make an angular component reuse itself within its own code?

Attempting to use vue-test-utils-getting-started with the standard configuration results in a "Preset Not Found" error during