0

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.

A. Tran
  • 333
  • 1
  • 5
  • 13
Sta-Dev
  • 305
  • 5
  • 17

2 Answers2

1

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/

Pradeep
  • 140
  • 9
  • I have followed the same . I have installed jquery using npm. I have included it in the scripts in angular.cli.json file. Also I have added "import * as $ from 'jquery';" in my component.ts file. But still am getting, "$ is not defined" error. – Sta-Dev Apr 17 '18 at 05:48
  • You might have missed adding the typings. JQuery will not have typings by default. So angular compiler will not know what to do with those files. Refer this link https://angular.io/guide/typescript-configuration – Pradeep Apr 17 '18 at 06:06
0

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

It works fine.

bereket gebredingle
  • 12,064
  • 3
  • 36
  • 47