Angular Import Javascript files into one Javascript File

Question

In Angular 8, I am importing bootstrap css files into my styles.css file like so:

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";

However I have a js file called main.js and I want to do the same for the js dependencies but the browser says there is a syntax error on line 1. main.js looks like this:

@import "~jquery/dist/jquery.slim.min.js";
@import "~popper.js/dist/popper.min.js";
@import "~bootstrap/dist/js/bootstrap.min.js";

And then I plan on just using main.js in the scripts section of angular.json. How do I do imports of javascript files into another javascript file with the @import statement?

Answer 1

You should put the global scripts in your angular.json, property "scripts".

 "scripts": [
          {
            "input": "node_modules/jquery/dist/jquery.min.js"
          }, 
          {
            "input": "node_modules/bootstrap/dist/js/bootstrap.min.js"
          }]