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?

Rafael Lucini · Accepted Answer · 2019-06-11 20:10:05Z

6

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"
          }]

edited Jun 11, 2019 at 20:10

answered Jun 11, 2019 at 19:54

Rafael Lucini

5993 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bmoe Over a year ago

What does "input" do?

Rafael Lucini Over a year ago

Load your script first of all and keep them avaliable on whole system.

Bmoe Over a year ago

It is not working. See what I have here. I get same syntax error in browser.

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

Bmoe Over a year ago

Nevermind, I had third-party angular library called ngx-bootstrap which conflicts with vanilla bootstrap.

Collectives™ on Stack Overflow

Angular Import Javascript files into one Javascript File

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related