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?