CODEWITHSUNDEEP
htmlangularwidget
Shakeer Hussain
Shakeer Hussain

Reputation: 2526

How to load local widget file in Angular?

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?

Upvotes: 1

Views: 1412

Answers (2)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

the assets folder will be available after building the project in the same place of the project files so you just need to remove the src from the path

export class EmployeeContainerComponent implements OnInit {
  constructor() {
    console.log("Registration");
     this.addWidget("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);
  }
}

the first option will not work because you can't include the script tag in the body of the component template so you need to use the second option by create the tag dynamically

👉 demo 🚀🚀

Upvotes: 1

Reactgular
Reactgular

Reputation: 54771

Add the following to your EmployeeContainer.ts

import "../../assets/employee-app.0.1.0.js";

Nothing else you're doing seems necessary without you explaining what a widget is or why you're trying to use it inside an Angular framework.

Upvotes: 1

Related Questions