Angular 6 with lowdb - not getting it to work - json

I'm trying to create an Electron app with Angular 6 that uses lowdb as a local database.
It's all very new to me and it's trial and error, but I don't seem to be able to figure out how to overcome the following error:
I've installed lowdb in my application by using the commands
npm install --save lowdb (edit: forgot to mention I did this already)
and
npm install --save #types/lowdb
I've created a service to communicate with this "local database".
import { Injectable } from '#angular/core';
import lowdb from 'lowdb';
import { default as FileAsync } from 'lowdb/adapters/FileAsync';
import { CurrentUserModel } from '../models/current-user';
#Injectable({
providedIn: 'root'
})
export class LowdbService {
private db: lowdb.LowdbAsync;
constructor() {
this.initDatabase();
}
set( field: string, value: any ) {
this.db.set( field, value ).write();
}
private async initDatabase() {
const adapter = new FileAsync( 'db.json' );
this.db = await lowdb( adapter );
this.db.defaults( { user: CurrentUserModel } );
}
}
But when I include the service in the constructor of a component I get errors.
ERROR in ./src/app/services/lowdb.service.ts
Module not found: Error: Can't resolve 'lowdb' in '/Users/paul/Projects/application-name/src/app/services'
ERROR in ./src/app/services/lowdb.service.ts
Module not found: Error: Can't resolve 'lowdb/adapters/FileAsync' in '/Users/paul/Projects/application-name/src/app/services'
ℹ 「wdm」: Failed to compile.
ERROR in src/app/services/lowdb.service.ts(2,12): error TS1192: Module '"/Users/paul/Projects/application-name/node_modules/#types/lowdb/index"' has no default export.
src/app/services/lowdb.service.ts(3,14): error TS2305: Module '"/Users/paul/Projects/application-name/node_modules/#types/lowdb/adapters/FileAsync"' has no exported member 'default'.
As far as I can see I'm doing the same as mentioned in this Github comment and this Stackoverflow comment. I can't find any more documentation though.
Can somebody help me out?
Update
Using import * as lowdb from 'lowdb' seemed to solve my initial errors. But it resulted in a few other errors. See below.
ERROR in ./node_modules/graceful-fs/polyfills.js
Module not found: Error: Can't resolve 'constants' in '/Users/paul/Projects/project-name/node_modules/graceful-fs'
ERROR in ./node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in '/Users/paul/Projects/project-name/node_modules/graceful-fs'
ERROR in ./node_modules/graceful-fs/fs.js
Module not found: Error: Can't resolve 'fs' in '/Users/paul/Projects/project-name/node_modules/graceful-fs'
ERROR in ./node_modules/graceful-fs/legacy-streams.js
Module not found: Error: Can't resolve 'stream' in '/Users/paul/Projects/project-name/node_modules/graceful-fs'

First of all, if you installed just #types/lowdb, that is only typings for that library, you need to install the library itself via:
npm install --save lowdb
Then, looks like there is no default export so import lowdb from 'lowdb'; also won't work. Try is like this:
import { LowdbAsync } from 'lowdb';
import * as lowdb from 'lowdb';
import * as FileAsync from 'lowdb/adapters/FileAsync';
private db: LowdbAsync<any>; // TODO provide correct schema instead of any
private async initDatabase() {
const adapter = new FileAsync('db.json');
this.db = await lowdb(adapter);
this.db.defaults({ user: any });
}
Or you can try removing those typings (as they might be outdated) and do what their docs says:
https://github.com/typicode/lowdb/tree/master/examples#browser
import low from 'lowdb'
import LocalStorage from 'lowdb/adapters/LocalStorage'
(but when you take a look at #types/lowdb, there is no such default export so again, the typings might be outdated)
As for your other issue, take a look here:
https://github.com/typicode/lowdb/issues/206#issuecomment-324884867
typicode commented on 25 Aug 2017
#DickyKwok I think it's impossible. Can you answer this, #typicode?
I confirm, to save to disk using FileSync or FileAsync adapters you need to have access to Node fs API.
Looks like you should use LocalStorage adapter instead.
Another similar issue here: How can I use node "fs" in electron within angular 5
You could also try the solution proposed in one of answers there:
https://github.com/ThorstenHans/ngx-electron
constructor(private _electronService: ElectronService) {
this.fs = this._electronService.remote.require('fs');
}

Looks like your lowdb is missing in node_modules.
try
npm install lowdb

Related

hardhat 'pragma solidity' marked as unexpected identifier

I have been working on my ethereum project when face with issue new contracts stops compiling with error message:
blockchain/contracts/Utils.sol:2
pragma solidity ^0.8.9;
^^^^^^^^
SyntaxError: Unexpected identifier
I simply can not create a new contract anymore. It looks like there is some break in the environment.
Have you ever face with this issue? Do you have any thoughts what is wrong here?
Hardhat config is:
import { HardhatUserConfig } from "hardhat/config";
import "#nomicfoundation/hardhat-toolbox";
const config: HardhatUserConfig = {
solidity: "0.8.9",
};
export default config;
The issue was in import in .ts file.
My current import for test is shown below:
import { expect } from "chai";
import { ethers } from "hardhat";
import { utils, BigNumber } from "ethers";
import { time, loadFixture } from "#nomicfoundation/hardhat-network-helpers";
import "../contracts/Utils.sol";
Remove import "../contracts/Utils.sol"; from import solves the issue.
It is redundant import, hardhat is able to evaluate type of the contract just by its name in the factory. The root cause though is unclear.
In Hardhat, this error occurs while running .sol Hardhat this error occurs while running .sol contract instead of .js deployment script

Got TypeError: expect(...).toBeInTheDocument is not a function even after proper setup

I use Create React App and already declare this on src/setupTests.js:
import '#testing-library/jest-dom';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
But every time I use expect(anything).toBeInTheDocument() on test file, when running the test I get:
TypeError: expect(...).toBeInTheDocument is not a function
To make sure that the setupTests.js is actually run, I try to use enzyme shallow on test file and it works. So what is the problem with jest-dom actually and how to solve it?
Solved with:
import '#testing-library/jest-dom/extend-expect';
on src/setupTests.js
It is easier to add in your jest.config.js
module.exports = {
...,
"setupFilesAfterEnv": [
"<rootDir>/jest.setup.js"
]
}
and to create jest.setup.js with the content
import '#testing-library/jest-dom'
With that you don't have to import the jest-dom in every test file

How to import an npm package into Polymer 3

I often find packages on npm that I want to include in a Polymer3 element.
the instructions to install the package are often to use npm with something like npm install fingerprintjs2
Below I included the basic Polymer 3 elementas an example. but i get the error
Uncaught TypeError: Cannot read property 'exports' of undefined
I dont understand how I should import from https://github.com/Valve/fingerprintjs2
import {html, PolymerElement} from '#polymer/polymer/polymer-element.js';
import './node_modules/fingerprintjs2/dist/fingerprint2.min.js';
class FingerPrint extends PolymerElement {
static get template() {
return html`
<style>
:host {display: block;}
</style>
<h2>Finger Print</h2>
`;
}
ready() {
super.ready();
setTimeout(function () {
Fingerprint2.get(function (components) {
console.log(components)
})
}, 5000)
}
} window.customElements.define('finger-print', FingerPrint);
if I try to import it with
import Fingerprint2 from './node_modules/fingerprintjs2/dist/fingerprint2.min.js';
then I get the error Uncaught SyntaxError: The requested module '../fingerprintjs2/dist/fingerprint2.min.js' does not provide an export named 'default'
I also tried
import {Fingerprint2} from './node_modules/fingerprintjs2/dist/fingerprint2.min.js';
and get Uncaught SyntaxError: The requested module '../fingerprintjs2/dist/fingerprint2.min.js' does not provide an export named 'Fingerprint2'
very simple:
import Fingerprint2 from 'fingerprint2'

CKEditor 5 throws Cannot read property 'create' of undefined in Angular6 project

I've created a project using JHipster and trying to create a WYSIWYG rich text editor using CKEditor 5. I've done the below steps by using the following link to create an editor.
npm install --save-dev #ckeditor/ckeditor5-angular
npm install --save-dev #ckeditor/ckeditor5-build-classic
Imported #ckeditor/ckeditor5-angular and added in imports in my module.js
Imported #ckeditor/ckeditor5-build-classic and created a variable public Editor: ClassicEditor; in my component
Used following code in html
Blockquote
<ckeditor [editor]="Editor" data="<p>Hello world!</p>"></ckeditor>
When I go to the page I added throws the following error which I got it from the browser developer tools console.
ERROR TypeError: Cannot read property 'create' of undefined
at CKEditorComponent.createEditor (ckeditor-ckeditor5-angular.js?076d:187)
at eval (ckeditor-ckeditor5-angular.js?076d:96)
at ZoneDelegate.invoke (zone.js?d135:388)
at Zone.run (zone.js?d135:138)
at NgZone.runOutsideAngular (core.js?09c9:3784)
at CKEditorComponent.ngAfterViewInit (ckeditor-ckeditor5-angular.js?076d:95)
at callProviderLifecycles (core.js?09c9:9568)
at callElementProvidersLifecycles (core.js?09c9:9542)
at callLifecycleHooksChildrenFirst (core.js?09c9:9532)
at checkAndUpdateView (core.js?09c9:10468)
I'm just wondering if that's an issue with CKEditor 5 or did I miss any steps?
You have the following code under the link:
export class ArticleUpdateComponent implements OnInit {
public Editor: ClassicEditor;
// ...
}
While you should actually set the ClassicEditor to the Editor property, you only set it's type (which is actually wrong too, since the editor can have type typeof ClassicEditor).
What you should do is simple property assignment public Editor = ClassicEditor;, which will make the ClassicEditor available in the template under the Editor property.
This error can be also thrown when the import is incorrect - depending on the TypeScript configuration the import should look like import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic'; or import ClassicEditor from '#ckeditor/ckeditor5-build-classic';.
Created a file src/app/typings.d.ts with below code
declare module '#ckeditor/ckeditor5-build-classic' { // or other CKEditor 5 build.
const ClassicEditorBuild: any;
export = ClassicEditorBuild;}
Inside your main app module, import CKEditorModule as below:
import { CKEditorModule } from '#ckeditor/ckeditor5-angular';
#NgModule({imports: [CKEditorModule]})
Now, add import to the component where that issue was occurring in say x.component.ts
import * as ClassicEditorBuild from '#ckeditor/ckeditor5-build-classic';
export class x implements OnInit { public Editor = ClassicEditorBuild;constructor() { } ngOnInit(): void {}}
Finally, add below code in your x.component.html
<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>
My solution was roughly the same as above, but as these didn't quite solve it, I tried:
public Editor: any = ClassicEditorBuild;
(adding : any)
which worked
If you have this issue even if you have this:
public Editor = BalloonEditor;
Check if you have in your template any call to the ckeditor component
For example:
<ckeditor formControlName="contenido"></ckeditor>
If you not set [editor]="Editor" it will produce same error.
try declaring this
public Editor: any = ClassicEditorBuild;
and in
file
../../../../node_modules/#ckeditor/ckeditor5-angular/ckeditor.component.d.ts
change CKEDITOR_VERSION: to any from string.

How can I install separate mixpanel projects for development and production in angular5/angularitics

I have already configured mixpanel in my angular 5 app. Now I want to separate mixpanel project for production and development. I have already added mixpanel script snippet in index.html in head section containing token of production project. Now I need to add another token and select one based upon selected environment, but environment variable is not accessible in index.html. I don't want to have two separate index.html in my project. In another way as suggested here (How to integrate mixpanel with angular2).I set token from main.ts, but it is unable to access environment variable.Is there any way to set token in index.html based upon selected environment?
I am getting following error:
ERROR in /home/Project/src/main.ts (9,27): Property 'mixpanel' does not exist on type '{ production: boolean; }'.
exported api key from environment.ts:
export const mixpanel= {
apikey: 'MY_PROJECT_TOKEN_HERE'
}
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
declare const mixpanel: any;
enableProdMode();
mixpanel.init(environment.mixpanel.apikey);
platformBrowserDynamic().bootstrapModule(AppModule);