Setup jquery in angular project

Question

I'm trying to setup jquery in angular 6 project, but while importing it in the ts file, I get the following

error: This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export

The run time error is:

Module '"/types/jquery"' resolves to a non-module entity and cannot be imported using this construct.

Here is my typescript code:

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-anim',
  templateUrl: './anim.component.html',
  styleUrls: ['./anim.component.css']
})


export class AnimComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    $(function() {
      $('.intro').addClass('go');

      $('.reload').click(function() {
        $('.intro').removeClass('go').delay(200).queue(function(next) {
          $('.intro').addClass('go');
          next();
        });

      });
  });

  }

}

I've added allowdefault imports also to my tsconfig.json as mentioned by some guys.Below is my tsconfig.

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": { "*": ["types/*"] },
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
      "node_modules/@types"
    ],

Anguar.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "textAnimation": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/textAnimation",
            "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": ["./node_modules/jquery/dist/jquery.min.js"],
            "es5BrowserSupport": true
          },

I can't seem to figure out what else I need to do for jquery to run.Please help. Thanks in advance

Answer 1

You already imported jquery using angular.json scripts so i think you can use jquery with just declaring variable.

import { Component, OnInit } from '@angular/core';
declare var $: any;
...

Answer 2

First you need to install these 2 package

npm install jquery --save
npm install @types/jquery --save

Then in scripts section in architect => build of angular.json file add path for jquery lib

"scripts": [
  "node_modules/jquery/dist/jquery.min.js"
]

Then finally add jquery into types section of tsconfig.app.json. You can change to another tsconfig file if we want in angular.json file ( architect = > build => tsConfig section)

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

so you dont have to use everywhere in your component like this

declare var $: any;