I am using Angular 12 and I wanted to use custom JavaScript files in one of my ts components. To get this working I understood I need to add my custom.js file to the "Scripts" section in the angular.json and declare this in my ts component:
My custom.js file
function test() {
alert("Hello!");
}
In the app.component.ts
import { Component, OnInit } from "@angular/core";
import { Subject, Observable } from "rxjs";
declare function test(): void;
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
....
...
test();
and in the angular.json file i added the path to my custom.js
.....
"scripts": [
"src/assets/js/custom.js"]
.....
This works fine and the alert message is displayed correctly when de app is served.
Let say now I want to use some Javascript library in my custom.js file, for example "sharp":
import {sharp} from "sharp";
function test() {
alert("Hello!");
const image = sharp("file.jpg");
}
Now when I serve the app via the "ng s", I can see the following error in the console of my browser:
Cannot use import statement outside a module
This points to the "import {sharp} from "sharp"" line of my custom.js file of course.
I have alreayd tried to:
My question is then the following:
where and how in my Angular project should I declare the need/use of the sharp library in order to let my custom.js work?
Thanks
To import another js file into another js sharp.js should export function sharp() and test.js should import { sharp } from './main.js';. Then test can use sharp() and your Angulr project is only using declared function test(). https://www.tutorialrepublic.com/faq/how-to-include-a-javascript-file-in-another-javascript-file.php
First, export the function test.
export function test() {
alert('custom js');
}
Import it into your app.component.
import {Component} from '@angular/core';
import * as yourlib from 'src/custom.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
yourlib.test();
}
}