Angular 5 externnal javascript file not working

Question

I am new to angular and started learning angular5 from this tutorial.

I am converting normal HTML template to Angular5 version now I am facing difficulties when adding external JS files to angular5 project.

I included Javascript files in angular project in angular.json file but my javascript files seems not working.

Can anyone help in that ? Am I going in right way by writing custom jquery code on main.js file ?

I am saying now working in terms of jQuery code see example code below.

/**
   * Typing effect Not working
   */
jQuery('.typing__module').each(function (index) {
	var self = jQuery(this),
		    _wrapper = jQuery('.typed', self)[0],
		    optData = eval('(' + self.attr('data-options') + ')'),
		    optDefault = {
		stringsElement: self.find('.typed-strings')[0],
		typeSpeed: 50,
		backSpeed: 500,
		fadeOut: true,
		loop: true
	},
		    options = jQuery.extend(optDefault, optData);
	var typed = new Typed(_wrapper, options);
});

/*angular.json*/

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "minimus-master": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/minimus-master",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/vendors/jquery/jquery.min.js",
              "src/assets/vendors/imagesloaded/imagesloaded.pkgd.js",
              "src/assets/vendors/isotope-layout/isotope.pkgd.js",
              "src/assets/vendors/jquery-one-page/jquery.nav.min.js",
              "src/assets/vendors/jquery.easing/jquery.easing.min.js",
              "src/assets/vendors/jquery.matchHeight/jquery.matchHeight.min.js",
              "src/assets/vendors/magnific-popup/jquery.magnific-popup.min.js",
              "src/assets/vendors/masonry-layout/masonry.pkgd.js",
              "src/assets/vendors/jquery.waypoints/jquery.waypoints.min.js",
              "src/assets/vendors/swiper/swiper.jquery.js",
              "src/assets/vendors/menu/menu.js",
              "src/assets/vendors/typed/typed.min.js",
              "src/assets/js/main.js"            
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "minimus-master:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "minimus-master:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "minimus-master:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "minimus-master-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "minimus-master:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "minimus-master:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "minimus-master"
}

We have no idea what "not working" means. It's also a mystery to me what you would be trying to accomplish by pouring old jQuery wine into new Angular bottles. If you continue down this path, figuring out why scripts aren't loading will be the least of your problems. I suggest throwing away the old app and rewriting it in Angular, salvaging whatever code snippets or utilities you can. By the way, you should learn the names of the tools you are using. There is no such thing as "AngularJS5". "AngularJS" is an old framework. I suppose you mean "Angular". — user9315861
– user9315861, Commented Jul 6, 2018 at 11:23
What does "not working" mean? See stackoverflow.com/help/mcve. Does ng serve produce build output or does that report that it can't find the files? — J.P.
– J.P., Commented Jul 6, 2018 at 11:24
Not working in terms of jquery code. for example /** * Typing effect */ jQuery('.typing__module').each(function (index) { var self = jQuery(this), _wrapper = jQuery('.typed', self)[0], optData = eval('(' + self.attr('data-options') + ')'), optDefault = { stringsElement: self.find('.typed-strings')[0], typeSpeed: 50, backSpeed: 500, fadeOut: true, loop: true }, options = jQuery.extend(optDefault, optData); var typed = new Typed(_wrapper, options); }); — Ronak Chauhan
– Ronak Chauhan, Commented Jul 6, 2018 at 11:26
I am not getting any errors while "ng serve" . But see the jquery files I included is that correct ? As I am converting HTML template to angular version so I have to include that all. — Ronak Chauhan
– Ronak Chauhan, Commented Jul 6, 2018 at 11:29

Taranjit Kang · Accepted Answer · 2018-07-06 13:13:55Z

0

Declare Jquery,

import * as $ from 'jquery'; Also import Typed import * as Typed from 'typed.js'

If they are installed via npm or yarn, you should be okay without adding to angular.json.

Then you should be able to correctly reference both without any errors.

answered Jul 6, 2018 at 13:13

Taranjit Kang

2,6103 gold badges24 silver badges41 bronze badges

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

Comments

Debojyoti · Accepted Answer · 2018-07-06 19:04:35Z

Declare Jquery

In your component typecript file, declare jquery outside of the component class

After imports, before @Component decorator

import { Component } from '@angular/core';

declare var $: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

And then inside the component class, use

$('.typing__module').each(function (index) {
    var self = $(this),
            _wrapper = $('.typed', self)[0],
            optData = eval('(' + self.attr('data-options') + ')'),
            optDefault = {
        stringsElement: self.find('.typed-strings')[0],
        typeSpeed: 50,
        backSpeed: 500,
        fadeOut: true,
        loop: true
    },
            options = $.extend(optDefault, optData);
    var typed = new Typed(_wrapper, options);
});

Navjyot · Accepted Answer · 2019-06-10 10:20:43Z

0

You can load html templates main.js i.e. src/assets/js/main.js at the end of all compiled js files by Angular

<html>
<head>
</head>
<body>
<div>
<!--All Code here-->
</div>
<script src="~/dist/Infotech/runtime.js"></script>
<script src="~/dist/Infotech/polyfills.js"></script>
<script src="~/dist/Infotech/styles.js"></script>
<script src="~/dist/Infotech/vendor.js"></script>
<script src="~/dist/Infotech/main.js"></script>
**<script src="~/src/assets/js/main.js"></script>**
</body>
</body>
</html>

Hope this might help :)

answered Jun 10, 2019 at 10:20

Navjyot

1181 silver badge11 bronze badges

Collectives™ on Stack Overflow

Angular 5 externnal javascript file not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related