Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72416

How to load local widget file in Angular?

$
0
0

I have a widget called employee-widget and this employee-widget.js file located in my Angular application folder(just added for src reference). I am calling employee-widget.js as below, but widget is not loading.

Option 1:

<div>
    <h4>Calling employee widget</h4>
      <script type="text/javascript" src="/src/assets/employee-app.0.1.0.js"></script>

       <employee-widget></employee-widget>
</div>

Note: no errors in console log and just displaying "Calling employee widget"

Option 2:

EmployeeContainer.ts

export class EmployeeContainerComponent implements OnInit {
  constructor() {
    console.log("Registration");
     this.addWidget("/src/assets/employee-app.0.1.0.js");
  }

  ngOnInit() {}

  addWidget(url: string) {
    console.log("running registraion page");
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
    const widget = document.createElement("employee-widget");

    // The widgets element is a simple <div> with id="widgets"
    const widgets = document.getElementById("widgets");
    if (!widgets) {
      return;
    }
    widgets.appendChild(widget);
  }
}

employeecontainer.html

<div>
        <h4>Calling employee widget</h4>
</div>

Error at line document.body.appendChild(script);

*

component.ts:21 GET http://localhost:4400//src/assets/employee-app.0.1.0.js net::ERR_ABORTED 404 (Not Found)

*

Please suggest what I am doing wrong here?


Viewing all articles
Browse latest Browse all 72416

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>