我正在尝试在Angular项目中实现Particules.js，但似乎未加载Json文件。
import { Component, OnInit } from '@angular/core';
import Typed from 'typed.js';
declare var particlesJS: any;
@Component({
selector: 'app-slide-presentation',
templateUrl: './slide-presentation.component.html',
styleUrls: ['./slide-presentation.component.css']
})
export class SlidePresentationComponent implements OnInit {
ngOnInit(): void {
particlesJS.load('particles-js', 'particlesjs-config.json', function() {
console.log('callback - particles.js config loaded');
});
}
}
的HTML
<div class="bar" id="particles-js" ></div>
我已经在index.html中导入了patricles.js文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Siteperso</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
我将json文件放在html文件的同一文件夹中。
当我运行项目时，出现此错误
GET http://localhost:4200/particlesjs-config.json 404 (Not Found)
particles.min.js:9 Error pJS - XMLHttpRequest status: 404
particles.min.js:9 Error pJS - File config not found
更新：
我已经尝试了JGFMK给出的解决方案：
我在其中放置了一个vendor.ts文件：
import * particlesJS from 'particlesjs';
window['particlesJS'] = particlesJS;
现在我得到了这个错误：
Uncaught SyntaxError: Unexpected token import
at eval (<anonymous>)
at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
at Object.../../../../script-loader/index.js!../../../../../vendor.ts (vendor.ts?693f:1)
at __webpack_require__ (bootstrap b0854f7…:54)
at Object.2 (scripts.bundle.js:93)
at __webpack_require__ (bootstrap b0854f7…:54)
at webpackJsonpCallback (bootstrap b0854f7…:25)
at scripts.bundle.js:1
webpackJsonp.../../../../script-loader/addScript.js.module.exports @ addScript.js:9
../../../../script-loader/index.js!../../../../../vendor.ts @ vendor.ts?693f:1
__webpack_require__ @ bootstrap b0854f7…:54
2 @ scripts.bundle.js:93
__webpack_require__ @ bootstrap b0854f7…:54
webpackJsonpCallback @ bootstrap b0854f7…:25
(anonymous) @ scripts.bundle.js:1
material.es5.js:3311 Could not find HammerJS. Certain Angular Material components may not work correctly.
GestureConfig @ material.es5.js:3311
_createClass @ core.es5.js:9509
_createProviderInstance$1 @ core.es5.js:9484
resolveNgModuleDep @ core.es5.js:9469
_callFactory @ core.es5.js:9556
_createProviderInstance$1 @ core.es5.js:9487
resolveNgModuleDep @ core.es5.js:9469
_createClass @ core.es5.js:9516
_createProviderInstance$1 @ core.es5.js:9484
resolveNgModuleDep @ core.es5.js:9469
_createClass @ core.es5.js:9516
_createProviderInstance$1 @ core.es5.js:9484
resolveNgModuleDep @ core.es5.js:9469
_callFactory @ core.es5.js:9551
_createProviderInstance$1 @ core.es5.js:9487
resolveNgModuleDep @ core.es5.js:9469
webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get @ core.es5.js:10555
debugCreateRootView @ core.es5.js:12770
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create @ core.es5.js:9856
webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create @ core.es5.js:3333
webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4762
(anonymous) @ core.es5.js:4545
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4545
(anonymous) @ core.es5.js:4507
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
(anonymous) @ zone.js:818
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:584
AppComponent.html:2 ERROR ReferenceError: $ is not defined
at MnFullpageDirective.webpackJsonp.../../../../ngx-fullpage/components/fullpage/mnFullpage.directive.js.MnFullpageDirective.ngOnInit (mnFullpage.directive.js:72)
at checkAndUpdateDirectiveInline (core.es5.js:10834)
at checkAndUpdateNodeInline (core.es5.js:12330)
at checkAndUpdateNode (core.es5.js:12269)
at debugCheckAndUpdateNode (core.es5.js:13130)
at debugCheckDirectivesFn (core.es5.js:13071)
at Object.eval [as updateDirectives] (AppComponent.html:8)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13056)
at checkAndUpdateView (core.es5.js:12236)
at callViewAction (core.es5.js:12601)
最佳答案
三件事：
1）请像这样导入：
import * as particlesJS from 'particlesjs';
代替
import * particlesJS from 'particlesjs';
2）您是否已将particlesJS安装为节点模块？如果没有，请先安装
npm i -save "particlejs".
并从您的html中删除particlejs的cdn参考。
3）您应该直接使用js对象作为配置，而不是使用json文件将config导入particleJS。要以适当的方式执行此操作-首先创建一个文件/assets/particlesjs-config.ts。在此文件中，编写您的配置对象，与particlesjs-config.json相同（也许只是将其复制）。如果我假设您的particlesjs-config.json是这样的：
{
"particles": {
"number": {
"value": 380,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
然后使您的particlesjs-config.ts文件如下所示：
export const myFirstParticle = {
"particles": {
"number": {
"value": 380,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
然后，在“ SlidePresentationComponent”文件中，只需将其导入，如下所示：
import { myFirstParticle } from 'assets/particlesjs-config.ts'
并使用如下的particlesJS：
particlesJS.load('particles-js', myFirstParticle, function() {
console.log('callback - particles.js config loaded');
});