typescript - Kan inte lägga till jQuery till ett Angular CLI-projekt


Jag vill använda jQuery i mitt Angular CLI-projekt. Jag har försökt instruktionerna här: https://www.gurustop.net/blog/2016/11/18/3821/jquery-angular2-angularcli-how-to

  1. Installera jQuery

    npm install --save jquery;
    
  2. Installera jQuery-typsdefinition för typkontroll.

    npm install --save-dev @types/jquery
    
  3. Lägg till en referens till jquery-filen i "scripts"-arrayen i angular-cli.json-filen.

    "scripts": [
       "../node_modules/jquery/dist/jquery.min.js"
    ]
    
  4. Importera jquery i min app.component.ts-fil

    import { Component } from '@angular/core';
    import * as jQuery from 'jquery';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      title = 'app';
      test = jQuery("body");
    }
    

Men när jag gör ett ng build får jag följande fel:

ERROR in ./src/app/app.component.ts (2,25): Module ''jquery'' resolves
to a non-module entity and cannot be imported using this construct.

Om jag tar bort import * as jQuery from 'jquery'; och kör `ng build` får jag:

ERROR in ./src/app/app.component.ts (10,10): Cannot find name 'jQuery'.

Inte säker på vart jag ska gå härifrån.

Uppdatering 1

Baserat på vad @Saravana postade. Om jag bara gör declare const $: JQueryStatic och ng build, får jag felet:

ERROR in ./src/app/app.component.ts (2,19): Cannot find name 'JQueryStatic'.

men om jag gör som Saravana föreslog i sitt första inlägg innan han raderade det.

import "jquery"; 
declare const $: JQueryStatic;

Det byggs utan klagomål. Så jag tycker att Saravana ska återställa ditt inlägg.

Svar #1

Eftersom jQuery-biblioteket lägger till de globala variablerna $ och jQuery, kan du helt enkelt deklarera variabeln:

import "jquery"; 
declare const $: JQueryStatic;

Svar #2

Uppgraderade till den senaste CLI, skapade ett nytt projekt och flyttade in mina filer, och instruktionerna som beskrivs ovan fungerade alldeles utmärkt.

npm uninstall -g angular-cli

npm cache clean

npm install -g @angular/cli@latest

Relaterade artiklar