About the introduction of third-party plugins or frameworks (jquery) in angular2

About the introduction of third-party plugins or frameworks (jquery) in angular2

Since I also entered Angular 2 not long ago, many problems may have been solved, but I don't know the reason, and there are some problems, and the same error will come out after the solution. Please forgive me about these.

Regarding this issue, I have been thinking about it for a long time, and finally I can use it.

If you want to reference jquery in angular2, one of the tallest methods is to write in the dependencies in package.json and execute cnpm i; install;

 "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "tinymce": "4.5.3",
    "jquery": "^3.1.1",
    "zone.js": "^0.8.4"
  },

Then declare in the components that need to use jquery: declare var $:any;

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


@Component({
    moduleId: module.id,
    selector:'myIndex',
    styleUrls:['../../assets/css/index.css'],
    templateUrl:'index.component.html'
})

Or it can be declared and introduced in typings.d.ts, so that it can be used directly in all components without repeating the declaration in each component:

code show as below:

declare var JQuery: any;
declare var jQuery: any;
declare var $: any;

The last step is to introduce the jquery.min.js file in .angular.cli.json; there may be many people who ask, if it is already installed, why do you need to introduce it? I also solve it! However, there is no step, $ is undefined!

The last step can also be done.In the index.html under the src on the home page, it is also possible to directly introduce jquery.min.js, but this is a bit Low!

Welcome to discuss!

Reference: https://cloud.tencent.com/developer/article/1148227 About the introduction of third-party plugins or frameworks (jquery) in angular2-云+社区-Tencent Cloud