CODEWITHSUNDEEP
javascriptjqueryangular
Sta-Dev
Sta-Dev

Reputation: 305

How to manage js files in angular

I am developing a MEAN app and my folder structure is as follows:

enter image description here

I have added a js file under /angular/src/assets/js for some jQuery things.

For that I have installed jQuery using npm.

Now I need to call that js file through angular.cli.json file.

angular.cli.json:

"apps": [
{
  "root": "angular/src",
  "outDir": "angular/dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css"
  ],
  "scripts": [
     "../node_modules/jquery/dist/jquery.min.js",
     "../src/assets/js/custom.js"
  ],

Since I am pointing the root to "angular/src", there is a problem of including the jquery.min.js in the scripts part which is located under "mean/node_modules/" and ends in "not found" error.

angular.cli.json file looking for "node_modules/jquery/dist/jquery.min.js" inside the "angular/src" root path.

Is there any way to solve this without changing my folder structure?

Need someone's valuable help.

Upvotes: 0

Views: 1423

Answers (2)

Pradeep
Pradeep

Reputation: 140

Easiest way would be linking js files directly in index.html.

If you want it to be compiled and maintained by angular, check this link

How to include external js file in Angular 4 and call function from angular to js

https://www.thepolyglotdeveloper.com/2016/01/include-external-javascript-libraries-in-an-angular-2-typescript-project/

Upvotes: 1

bereket gebredingle
bereket gebredingle

Reputation: 13016

Yes. Remove the scripts link from the angular.cli.json then include it in your index html with script tag.

It works fine.

Upvotes: 0

Related Questions