My goal: use a fa-icon which as not been imported yet by JHipster
My try: add the fa-icon GrinHearts manually in the app.vendor.ts file using the following code and then run yarn run webpack:build command
/* after changing this file run 'yarn run webpack:build' */
/* tslint:disable */
import '../content/css/vendor.css';
// Imports all fontawesome core and solid icons
import { library } from '#fortawesome/fontawesome-svg-core';
import {
faUser,
faSort,
faSync,
faEye,
faBan,
faTimes,
faArrowLeft,
faSave,
faPlus,
faPencilAlt,
faBars,
faThList,
faUserPlus,
faRoad,
faTachometerAlt,
faHeart,
faList,
faBell,
faBook,
faHdd,
faFlag,
faWrench,
faClock,
faCloud,
faSignOutAlt,
faSignInAlt,
faCalendarAlt,
faSearch,
faTrashAlt,
faAsterisk,
faTasks,
faHome,
faGrinHearts
} from '#fortawesome/free-solid-svg-icons';
// Adds the SVG icon to the library so you can use it in your page
library.add(faUser);
library.add(faSort);
library.add(faSync);
library.add(faEye);
library.add(faBan);
library.add(faTimes);
library.add(faArrowLeft);
library.add(faSave);
library.add(faPlus);
library.add(faPencilAlt);
library.add(faBars);
library.add(faHome);
library.add(faThList);
library.add(faUserPlus);
library.add(faRoad);
library.add(faTachometerAlt);
library.add(faHeart);
library.add(faList);
library.add(faBell);
library.add(faTasks);
library.add(faBook);
library.add(faHdd);
library.add(faFlag);
library.add(faWrench);
library.add(faClock);
library.add(faCloud);
library.add(faSignOutAlt);
library.add(faSignInAlt);
library.add(faCalendarAlt);
library.add(faSearch);
library.add(faTrashAlt);
library.add(faAsterisk);
library.add(faGrinHearts);
// jhipster-needle-add-element-to-vendor - JHipster will add new menu items here
My issue: I get this error
ERROR in /src/main/webapp/app/vendor.ts
(41,5): Module '"/node_modules/#fortawesome/free-solid-svg-icons/index"' has no exported member 'faGrinHearts'.
Could somebody help me please?
Thanks!
You need to update your #fortawesome/free-solid-svg-icons package, the FaGrinHearts icon is not included in v5.1.0-8, only in v5.1.0+. I'd recommend using the latest version, which is v5.2.0. You can see the versions and the order they were released on npmjs
Related
I have been trying to make a music visualizer app using Vue and P5, and after tinkering with P5 using this article as my guide (https://medium.com/js-dojo/experiment-with-p5-js-on-vue-7ebc05030d33), I managed to get a Canvas rendered with some cool looking graphics.
Now, I am trying to create a link between the waveform/amplitude of a given song and the visuals rendered in the canvas. I have been trying to get the constructors/functions from the P5.sound library to load a song from a file path, and then use the output from a FFT object to control the visuals rendering in the canvas.
Now, my research has indicated that the P5 library must be run in instance mode in order to function (https://github.com/processing/p5.js/wiki/Global-and-instance-mode), and I have done my very best to adhere to this approach in my Vue project. But although the visual rendering works, none of the P5.sound functionalities do.
Here is the code to my model which sets up the P5 objects:
import P5 from 'p5';
import P5sound from "p5/lib/addons/p5.sound";
let p5;
let fft;
let sound;
export function main(_p5) {
p5 = _p5;
p5.setup = () => {
p5.createCanvas(500, 500);
p5.background(100);
fft = new p5.FFT();
fft.setInput("../assets/sawtooth.mp3")
sound.amp(0.2);
};
p5.draw = () => {
p5.background(220);
let spectrum = fft.analyze();
noStroke();
fill(255, 0, 255);
for (let i = 0; i < spectrum.length; i++) {
let x = map(i, 0, spectrum.length, 0, width);
let h = -height + map(spectrum[i], 0, 255, height, 0);
rect(x, height, width / spectrum.length, h);
}
let waveform = fft.waveform();
noFill();
beginShape();
stroke(20);
for (let i = 0; i < waveform.length; i++){
let x = map(i, 0, waveform.length, 0, width);
let y = map( waveform[i], -1, 1, 0, height);
vertex(x,y);
}
endShape();
};
}
Then, in my MusicVisualization.vue component, I call this model in the mounted() section of the component:
import P5 from 'p5';
var musicVisualizerModel = require("../models/musicVisualizerModel.js");
export default {
name: "MusicVisualization",
data(){
return{
message: ""
}
},
mounted() {
new P5(musicVisualizerModel.main);
}
};
No matter how I try to import my P5.sound library, the line fft = new p5.FFT() always yields an error p5.FFT is not a constructor. I have checked the P5.js module in my node_modules, and I can clearly see the P5.sound.js library present in the p5/lib/addons/p5.sound file path, but I cannot utilize any of its functionality. I should note that when I remove all P5.sound functionality from the model's code, and only have a canvas with some simple shapes, it works fine.
I installed P5 using npm install --save p5, and have tried numerous approaches to getting P5.sound to work, such as the P5-manager package (https://www.npmjs.com/package/p5-manager/v/0.1.0) and the Vue-P5 wrapper (https://www.npmjs.com/package/vue-p5). I have also tried implementing some of the proposed solutions given in this similar question (Using p5.sound.js in instance mode: 'p5.Amplitude() not a constructor'). None of these work, although I may be implementing incorrectly. Does anybody know how I can import the P5.sound library into my Vue project?
UPDATES
Another error that I noticed if I did not run the fft= new p5.FFT() line was the error ReferenceError: p5 is not defined. This error occurred whenever I tried to import the P5.sound library (with either import P5sound from "p5/lib/addons/p5.sound"; or with import "p5/lib/addons/p5.sound";). I looked deeper into this problem and found others had experienced it as well (https://github.com/processing/p5.js-sound/issues/453). Apparently, one user resolved the issue by "downgrading to 0.9, copying the sound.js into project folder, boosted back into 1.0 and just linked imports to the local, 0.9 version of sound." Sadly, I am unsure how to carry out this solution. Would anybody know how?
Thanks to help I received on the Github issues page (https://github.com/processing/p5.js-sound/issues/453), I figured out how to get the P5.sound library to import.
First, I uninstalled the P5.js in the node_modules, then installed P5.js version 0.9.0:
npm uninstall p5
npm install p5#0.9.0
Next, after locating the P5 module in node_modules, I copied the P5 sound lib file and pasted it into my project's src directory, and then replaced the import P5sound from "p5/lib/addons/p5.sound" with import "../p5.sound.js" (which represented my relative file path). Then I installed the latest version of P5.js in the terminal with the following command:
npm install p5#1
And now I can import the sound library without getting the errors ReferenceError: p5 is not defined or p5.FFT is not a constructor.
The problem is that p5-sound relies on p5 globally available.
If you are using webpack, that can be solved easily by using webpack's ProvidePlugin, like so:
plugins: [
new webpack.ProvidePlugin({
p5: 'p5',
})
]
Then you should be able to import via:
import p5 from 'p5';
import 'p5/lib/addons/p5.sound';
I had a similar problem using p5 in react, but I was able to get this working (for the time being 😅) by including the p5 scripts in my html file.
<script src="https://cdn.jsdelivr.net/npm/p5#1.3.1/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5#1.3.1/lib/addons/p5.sound.min.js"></script>
And then when creating my p5 instance in React I call:
new window.p5(sketch, node);
My sketch file looks something like:
const sketch = (p, props) => {
p.preload = () => {
...
};
p.setup = function () {
...
};
p.draw = () => {
...
};
};
export default sketch;
In my sketch logic, I use the instance p variable for the standard p5.js functionality like drawing shapes. Whenever I need to use a constructor of a p5 class like AudioIn, Amplitude, SoundFile, etc., I create it using the global p5 variable. For example:
new window.p5.AudioIn()
I believe this is necessary because the p5 sound addon library adds functions and classes onto the global p5 variable. When I was using es6 imports, there must have been some mess where the sound addon was not being added correctly to the imported p5 class.
One day there will hopefully be a better es6 module system for p5.js, but this seems to do the trick for me.
I have installed AnimeJS with the following commands in my Ionic 4 project:
npm i animejs --save
npm i #types/animejs --save
I then attempted to reference it by using:
import * as anime from 'animejs'
Doing the above gives me the following error when calling anything from animejs:
Error: Uncaught (in promise): TypeError: Object is not a function
(near '...animejs__WEBPACK_IMPORTED_MODULE_1__...')
However, if I import by referencing the anime.js within the node_modules directory, everything will work just as expected. I thought by installing #types/animejs this would allow me to use just a simple import * as anime from 'animejs' without having to directly reference the file within the node_modules directory.
Why can I import using the node_modules folder but not import * as anime from 'animejs'
After importing I call it like so:
openModal(modalPage) {
// Define modal to open
switch (modalPage) {
case 'login' : {
modalPage = LoginPage;
break;
}
case 'register' : {
modalPage = RegisterPage;
break;
}
}
// Open modal
this.modalCtrl.create({
component: modalPage,
cssClass: 'intro-modal',
showBackdrop: true,
enterAnimation: this.animations.modalEnter
}).then(modal => {
// Hide intro buttons
anime({
targets: ['.intro-buttons'],
translateX: '-100%',
duration: 150,
easing: 'linear'
});
// Animate slide back
modal.onWillDismiss().then(() => {
anime({
targets: ['.intro-buttons'],
translateX: '0%',
duration: 150,
easing: 'linear'
});
});
// Present the modal
modal.present();
});
}
Update your import to the following:
import anime from 'animejs'
This will import the default export from animejs which is actually a function that take the params/object that you are attempting to pass.
Here is an example in action showing the import and passing the expected object to anime() without the error triggering.
With your existing import * as anime, if you log anime, you'll see a property default of that object that is the actual function you are needing. Also you will see that import is bringing in various other properties/functions including penner, stagger, and timeline. You were simply targeting the wrong property with your previous import.
Hopefully that helps!
I am building an Angular application with typescript, where I would like to display the force directed network graph from Mike Boston build with d3 shown here.
I have copied and translated most of the code to type script without trouble but the line
. force("link", d3.forceLink().id(function(d) { return d.id; }))
fails with the error {} has no property id.
Only the following lines referring to d.source.x works fine?
I have installed d3 with npm and also types/d3 but still no luck, even though the typings.d.ts has an interface defining the id.
Thank you for your help!
Maybe that is something related to versioning, if you are using TypeScript 2.4.1, try to downgrade to 2.3.4 and give it a go.
As a workaround you could use any:
const forceLink: any = d3.forceLink();
. force("link", forceLink.id(function(d) { return d.id; }))
The example given at http://plnkr.co/edit/qcESHb3cCwD6NZL1yuhX?p=preview helped me, with focus on code shown here:
this.simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
this.render(miserables);
This is the best rendition I have seen. Works for me.
I was adding a snapshot test to a piece of React code, and I incurred in this error:
Unexpected node type: SequenceExpression (This is an error on an internal node. Probably an internal error. Location has been estimated.)
The code transpiles and works just fine, and the AST explorer doesn't warn me about anything.
Before this new test, no other test gave me any sort of similar error, and we have quite a few of them in our codebase.
I tried to reinstall jest, reinstall babel-jest, remove and reinstall all modules (using yarn --pure-lock), upgraded both jest and babel-jest to the latest version (20.0.1 for both), rinsed and repeated.
Nothing worked.
This occurs only when I try to collect the coverage (with --coverage), while the minimal snippet it occurs with is:
import { tint } from 'polished'
import styled from 'styled-components'
export default styled.label`
background: ${({ x, y }) => (x ? tint(0.3, y.a) : y.b)};
`
Here's what i've found:
This is an issue with jest code coverage being able to understand styled components and polished. I am using babel-plugin-polished with the following in my babelrc:
"plugins": [ "polished" ]
But still if you call export on a value, and do not also use that value in an object or exported object, it will fail.
Fails:
export const charcoalBlue = rgb(104, 131, 145);
Doesn't fail:
export const charcoalBlue = rgb(104, 131, 145);
const colors = { charcoalBlue }
So my solution has been to ignore my style files, or simply ensure I'm using the values I create and not just exporting them.
One way to ignore the style files, place this in your package.json:
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/*.styles.js",
]
}
And name your style files {ComponentName}.styles.js
Hope this helps!
I came across the same issue!
I fixed it by working around it:
import styled, {css} from 'styled-components';
styled.label`
${({x,y}) => x
? css`background: tint(0.3, y.a);`
: css`background: ${y.b};`
}
`;
I am going thru a book tutorial to learn TypeScript and AngularJS 2.0:(Become_a_Ninja_with_Angular2).
At some point it explains how to make your own Pipe and goes thru an implementation of moment.js.
In the folder where my project is located I do in CLI: npm install moment
(FYI: The book also tells to do typings install --save --ambient moment-node, but that throws an error even if I change --ambient by --global, also this error happens to not be a problem to use moment.js as the rest of the code I describe below runs).
Then, as a result of previous CLI, it creates under my project folder: [my project folder]\node_modules\moment
Then in [my project folder]\main.html, I have a <script> tag with: `
<script>
System.config({
defaultJSExtensions: true,
map: {
... [plenty of stuff starting with #angular]..
'#angular/platform-browser-dynamic':'node_modules/#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'rxjs': 'node_modules/rxjs',
'moment':'node_modules/moment/moment'
}
});
System.import('main');
</script>
My custom Pipe looks like this:
import { PipeTransform, Pipe } from '#angular/core';
import * as moment from 'moment';
import 'moment/../locale/fr';
#Pipe({name: 'fromNow'})
export class FromNowPipe implements PipeTransform {
transform(value,args){
let mydate = moment(new Date(value));
console.log(moment.locales());
return mydate.fromNow();
}
}
As you can see in my custom pipe code, to access the locale 'fr', I had to add import 'moment/../locale/fr (what I found by looking at already existing solution on StackOverflow). If this tag was not implemented I had access to 'en' only. Which means that adding other languages will require to add import 'moment/../locale/[the locale I want available].
Anyone has any ideas how to have all the locale from the lib moment.js with just the single import * as moment from 'moment'; statement?
PS: And I added to [My project folder]\app.module.ts:
import { FromNowPipe } from './custom_pipes/fromnow.pipe';
...
#NgModule({
...
declarations: [...,FromNowPipe],
...
})
...
And somewhere in one of my component I have:
[#Component({
selector: 'ns-mycomponent',
template:`
.. <div>{{ '2016/05/01'|fromNow }}</div>..
`
})
I found a workaround:
Based on what I wrote in the question, in [my project folder]\main.html:
System.config({
defaultJSExtensions: true,
map: {
...
}
});
I substitued: 'moment':'node_modules/moment/moment' with 'moment':'node_modules/moment/min/moment-with-locales.min.js'
In my Pipe file I just kept: import * as moment from 'moment';at the beginning of the file and it works: all languages are available.