How to load JS file in Angular4

Question

I am new to Angular. I have added JS files in angular-cli.json inside scripts tag. Files are loaded successfully but the problem is that on my LoginForm console showing:

zone.js:192 Uncaught ReferenceError: theWYSIWYG is not defined

it is loaded when I loggedIn successfully I route to my another component from login-form.component.ts this.router.navigate(['dashboard']); on dashboard component some of html code is

<div id="theWYSIWYG" name="theWYSIWYG" frameborder="0" contentEditable="true"  dir="rtl" ></div>

function defined inside the js file which is loaded when app was started. Why JS is not accessing dashboard components.?

in tsconfig.json, do you have "allowJs": true under compilerOptions. This will allow typescript compiler to resolve the references to .js files. — akhouri
– akhouri, Commented Apr 21, 2018 at 10:21
becasuse your .js file execute before your component initilize. so before accessing element with id theWYSIWYG add condition for undefinded. — Ravi Sevta
– Ravi Sevta, Commented Apr 21, 2018 at 13:06
When app starts all js are loaded first and it is through an console error that id=xyz not defined. while it is already defined in second component's html file. — Haider Ali Shafqat
– Haider Ali Shafqat, Commented Apr 21, 2018 at 20:11

Mohammad Daliri · Accepted Answer · 2018-04-21 10:29:27Z

1

if you want to use javascript in your component. you must be included before @Component

    declare var require: any;
    const myFunc = require('../assets/jsFile');
    @Component({ ....

and then inside your AppComponent you can call javascript function with myFunc .

ngOnInit() {
  myFunc.func1();
}

answered Apr 21, 2018 at 10:29

Mohammad Daliri

1,4067 gold badges26 silver badges44 bronze badges

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

3 Comments

Haider Ali Shafqat Over a year ago

I do not want to use these functions in component. I have js files in which all functions are already defined. But problem is that all JS are loads when app starts. At this time it does not see html file which is in another component (at this moment JS through error id=xyz is undefined while it is defined in 2nd component html file). but WHY?

Mohammad Daliri Over a year ago

What do you mean by this text ?" it is defined in 2nd component HTML file"

Haider Ali Shafqat Over a year ago

I have created 2components 1st named "LoginForm" and 2nd name "Dashboard" in this component I have dashboard.component.html. In which all these ids are.

Suhag Lapani · Accepted Answer · 2018-04-21 10:10:06Z

0

import * as _ from "<jsfile_name>"; you can import js file in your component type script file

answered Apr 21, 2018 at 10:10

Suhag Lapani

70310 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to load JS file in Angular4

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related