5

I have downloaded a theme from this link. I have to define script and CSS in index.html file.

index.html (body section)

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

I have defind my function in common.js and call it from main.85741bff.js file.

common.js (function)

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

The issue is that I am able to call the function while page reloads but can't call the function while content load.

Can anyone help me to resolve this issue? Any help would be appreciated.

Improve this question
1
  • 1
    Any success ? If yes please answer, the below answer does not work for me. Commented Jul 31, 2018 at 9:29

4 Answers 4

Reset to default
24

You can use javascript in the Angular application.

Step 1. Create demo.js file in assets/javascript folder.

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

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

export declare function test1();

Step 3. Use it in 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());
  }
}

Note: js and .d.ts file name should be same

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

3 Comments

@Ameya No need to import js file in angular.json or .angular-cli.json file. For the use of first time, you can try in app.component.ts only you need to take care about directory path of assets folder. further, any problem share demo program on stackblitz
It works !!!, It worked 4 me, my bad did not concentrate on import. Deleting my older comment
It doesn't work for me, it return an error saying error TS2306: File '.../demo.d.ts' is not a module. Did I missed something ?
0

You need to change the order in which you load your JavaSciprt files. Try loading common.js before main......js. Your script tries to access a function from a file that hasn't been loaded yet. Try just switching those 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>
Improve this answer

5 Comments

Can we see the content of those js files?
Which js file common.js or main.85741bff.js ?
@Milan Both of them
@Milan The three functions that are you trying to call aren't defined in main.85.....js
Let us continue this discussion in chat.
0

In Angular4, 5 project folder, there is .angular-cli.json file.

In file, you will see 

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

push your external js file path in the array.

Improve this answer

1 Comment

Yes, I have tried before but it's not working while content load. It's working fine with page reload. Thoughts?
-1

You can call these methods by window object-

document.addEventListener("DOMContentLoaded", function (event) {
      window['navbarToggleSidebar']();
      window['navActivePage']();
 });
Improve this answer

1 Comment

It's working fine with page reload but not working with particular content load. Thoughts?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.