在角項目中設置jquery

Question

我正在嘗試在angular 6項目中設置jquery，但是在ts文件中導入它時，我得到以下內容

錯誤：此模塊只能通過打開'allowSyntheticDefaultImports'標志並引用其默認導出來引用ECMAScript導入/導出

運行時錯誤是：

模塊'“/ types / jquery”'解析為非模塊實體，無法使用此結構導入。

這是我的打字稿代碼：

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();
        });

      });
  });

  }

}

我已經在我的tsconfig.json中添加了allowdefault導入，正如一些人所提到的.Below是我的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
          },

我似乎無法弄清楚我還需要做什么才能讓jquery運行。請幫忙。 提前致謝

Answer 1

你已經使用angular.json腳本導入了jquery，所以我認為你可以使用jquery來聲明變量。

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

Answer 2

首先，您需要安裝這兩個包

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

然后在architect => build of angular.json文件的腳本部分為jquery lib添加路徑

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

然后最后將jquery添加到tsconfig.app.json的types部分。 如果我們想要angular.json文件，你可以改為另一個tsconfig文件（architect => build => tsConfig section）

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

所以你不必像你這樣在你的組件中使用

declare var $: any;