Question

我正在尝试在angular 6项目中设置jquery，但是在将其导入ts文件时，得到以下信息

错误：只能使用ECMAScript引用此模块通过打开“ allowSyntheticDefaultImports”标志来导入/导出并引用其默认导出

运行时错误为：

模块'“ / 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导入。下面是我的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的脚本部分=>构建angular.json文件时，为jquery lib添加路径

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

然后最后将jQuery添加到tsconfig.app.json的类型部分。如果我们需要在angular.json文件中，则可以更改为另一个tsconfig文件（architect => build => tsConfig部分）

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

因此您不必像这样在组件中的任何地方使用

declare var $: any;

在角度项目中设置jQuery

2 个答案: