Why I cannot use JS file inside Angular app?

Question

I am trying to include some js methods stored in a file in an angular application.Unfortunately i can not make the browser see the js file.
I have looked at this SO post and followed the instructions but the browser does not see the file (Sources) section.

Js file

 function  toggleModal(id) {
        var modal = document.getElementById(id);
        $("#" + id).modal('toggle');
    }

    function setPag(tableId) {
        $(tableId).DataTable();
    }

My file is located inside:

Root/
  assets/
    js/
      scr.js

Usage in Component

declare function setPag(id:string):any;
declare function toggleModal(id:string):any;

@Component({
  selector: 'index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
     public toggle(id:string){
        toggleModal(id);
     }
     public setPage(id:string)
     {
        setPag(id);
     }
}

Angular.json
-Scripts section

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/AnubisUI",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets"

            ],

            "scripts": [
              "./src/assets/js/scr.js",
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js"
            ]
          }

Tony · Accepted Answer · 2019-08-27 09:22:34Z

1

Try this to see if work for you

import * as helper from 'assets/js/scr.js'

@Component({
  selector: 'index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
     public toggle(id:string){
        helper.toggleModal(id);
     }
     public setPage(id:string)
     {
        helper.setPag(id);
     }
}

Side note: Every static file should be add into asset folder so that you can import to your angular code

edited Aug 27, 2019 at 9:22

answered Aug 27, 2019 at 8:49

Tony

20.3k7 gold badges42 silver badges62 bronze badges

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

5 Comments

Bercovici Adrian Over a year ago

The browser does not load the file ! It does not appear in the Sources section.

Tony Over a year ago

you need to put your script into asset folder

Bercovici Adrian Over a year ago

I placed it in the assets too and it still does not see it.

Tony Over a year ago

Is there any error ? If still not work can you upload your code to github so I can take a look at ?

Bercovici Adrian Over a year ago

Now it seems adding to assets and only assets made it work.You can post your answer and i will accept it.

Collectives™ on Stack Overflow

Why I cannot use JS file inside Angular app?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest