I am currently working on creating a CRUD app using Angular6 with MSSQL.
I have successfully retrieved data from my local database and created the desired routes but I am having trouble displaying the data in the frontend.
//masterList.service.ts
import {
Injectable
} from '#angular/core';
import {
HttpClient
} from '#angular/common/http';
import {
MasterList
} from './MasterList';
#Injectable({
providedIn: 'root'
})
export class MasterListService {
uri = 'http://localhost:4000/masterList';
constructor(private http: HttpClient) {}
getMasterList() {
console.log(this);
return this
.http
.get(`${this.uri}/`);
}
}
//package.json
"name": "ng6crud",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "nodemon server.js && ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Running:
npm start
This returns the service with the data but the app is not compiled, and reversing the order does the opposite, with the error:
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:4000/masterList/", ok: false, …}
How do I get data from my service: 4000 and have it published: 4200 at the same time?
If you have your server hosted on port 4000, you need to specify proxy for your angular app so it will redirect all api calls to port 4000, even if it's hosted on port 4200.
Add proxy.conf.json next to your package.json:
{
"/": {
"target": "http://localhost:4000",
"secure": false
}
}
in MasterListService do something like:
getMasterList() {
return this
.http
.get(`/masterList`);
}
and finally change your package.json npm start script:
...
"scripts": {
...
"start": "nodemon server.js && ng serve --proxy-config proxy.conf.json",
...
}
Hope that helps.
Ended up doing a number of steps to get this to work, most important being using concurrently which allowed both ports to run
npm install concurrently --save
//proxy.conf.json
{
"/masterList": {
"target": "http://localhost:4000",
"secure": true, //or false when cors is not in use with express
"logLevel": "debug"
}
}
//package.json
"scripts": {
"ng": "ng",
"start": "concurrently \"npm run serve-api\" \"npm run serve\"",
"serve": "ng serve --proxy-config proxy.conf.json",
"serve-api": "nodemon server.js --watch server",
"build": "ng build",
"test": "ng test"...
}
//service.ts
import {
Injectable
} from '#angular/core';
import {
HttpClient
} from '#angular/common/http';
import {
MasterList
} from './MasterList';
#Injectable({
providedIn: 'root'
})
export class MasterListService {
uri = '/masterList';
constructor(private http: HttpClient) {}
getMasterList() {
return this
.http
.get(`${this.uri}`);
}
}
Related
I'm using Vite. I installed the npm plugin called 'vite-plugin-zip-file' in order to archive the dist folder. How can I run a separate from 'build' script in package.json specifically for this task?
vite.config.js below
import { defineConfig } from 'vite';
import { resolve } from 'path';
import { viteZip } from 'vite-plugin-zip-file';
export default defineConfig({
build: {
outDir: 'build',
},
plugins: [
viteZip({
folderPath: resolve(__dirname, 'build'),
outPath: resolve(__dirname),
zipName: 'Test.zip',
}),
],
});
package.json 'scripts' (I don't know what to write in 'zip' here)
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
"zip": ?
},
I tried adding the environmental variable, but I don't know exactly how to do it. So, there's probably another better way.
I've been trying fix for this a week now but can't really seem to find the problem.
I've followed this tutorial but instead of having that project structure I've my own (see image below)
In the esm.js:
require = require("esm")(module);
module.exports = require("./vickie.js");
Then i've changed vickie.js:
From const { app, BrowserWindow, ipcMain } = require('electron')
To import { app, BrowserWindow, ipcMain } from 'electron'
Then I got this error
In package.json:
{
"name": "vickie",
"type": "module",
"version": "0.0.1",
"description": "",
"main": "./vickie.js",
"scripts": {
"start": "electron ./vickie.js"
},
"author": "Arijanit",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"dotenv": "^8.2.0",
"electron": "^8.2.3",
"electron-builder": "^22.5.1",
"esm": "^3.2.25",
"mysql2": "^1.7.0"
}
}
Why am I getting the error? Should I type in something extra in package.json to enable esm?
Thanks in advance
I created a build tool that lets you use ESM in your own Electron code and modules installed from npm:
https://github.com/mifi/build-electron
To use it:
yarn add -D build-electron concurrently wait-on
Put your Electron main ESM source code in src/main/index.js and preload source in src/preload/index.js.
Add to your package.json:
{
"main": "build/main.js",
"build": {
"files": [
"build/**/*"
]
},
"scripts": {
"start": "concurrently -k \"build-electron -d\" \"wait-on build/.build-electron-done && electron .\"",
"build": "build-electron"
}
Now create a configuration file in your project root build-electron.config.js:
module.exports = {
mainEntry: 'src/main/index.js',
preloadEntry: 'src/preload/index.js',
outDir: 'build',
mainTarget: 'electron16.0-main',
preloadTarget: 'electron16.0-preload',
}
Now you can start developing:
npm run start
And to build your production app:
npm run build && npm exec electron-builder --mac
I just discovered electron and I found it interesting, so I want to implement it on my jhipster angular project (lastest jhipster version)
I tried following this tutorial and adapt it but I believe since Jhipster uses Webpack my build is not fine
here is what I have done
I declared a main.js file in src/main/webapp folder as below
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
let win;
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
// load the dist folder from Angular
win.loadURL(
url.format({
pathname: path.join(__dirname, `/dist/index.html`),
protocol: "file:",
slashes: true
})
);
// The following is optional and will open the DevTools:
// win.webContents.openDevTools()
win.on("closed", () => {
win = null;
});
}
app.on("ready", createWindow);
// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
// initialize the app's main window
app.on("activate", () => {
if (win === null) {
createWindow();
}
});
Then I tried updating my config files as below
package.json
{
"name": "boxing",
"version": "0.0.1-SNAPSHOT",
"main": "main.js", <-- added this
"description": "Description for boxing",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"#angular-devkit/build-angular": "^0.803.14", <-- installed using npm
...
"scripts": {
"electron": "ng build --base-href ./ && electron .",
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"boxing": {
"root": "",
"sourceRoot": "src/main/webapp",
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"skipTests": true,
"style": "scss"
},
"#schematics/angular:directive": {
"skipTests": true
},
"#schematics/angular:guard": {
"skipTests": true
},
"#schematics/angular:pipe": {
"skipTests": true
},
"#schematics/angular:service": {
"skipTests": true
}
},
"prefix": "jhi",
"architect": {
<-- added this lines
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist"
}
}
<-- end of add
}
}
},
"defaultProject": "boxing",
"cli": {
"packageManager": "npm"
}
}
I updated finally my index.html href to ./
but when I run the command in terminal I m getting this error
npm run electron
boxing#0.0.1-SNAPSHOT electron /home/housseyn/Desktop/projects/salle-de-sport
ng build --base-href ./ && electron .
Schema validation failed with the following errors:
Data path "" should have required property 'main'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! boxing#0.0.1-SNAPSHOT electron: ng build --base-href ./ && electron .
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the boxing#0.0.1-SNAPSHOT electron script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output >above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/housseyn/.npm/_logs/2019-10-25T16_00_19_675Z-debug.log
You have to build your project using this commande npm run electron-build after that you add it in a script to your package.json
check in this doc until the end
I hope that can help you,
Use this configuration :
{
"name": "angular-electron-demo",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:electron": "ng build --base-href ./ && electron ."
},
// [...]
}
After add this, you can use the start:electron script to execute the ng build --base-href ./ && electron . which first builds the project and then run electron from the current folder.
Go back to your terminal and run:
npm run start:electron
I'm trying to do some simple snapshot testing with jest and enzyme—moving to react-testing-library—for some react components that I am building.
When I run my tests the output contains a number of errors pointing to ES6/7 class properties.
My assumption was that I was missing babel-jest. I have followed the instructions to set that up but I am still receiving a number of errors from different components referring to a missing the babel transform...
See below:
Example Test:
import React from 'react';
import { render } from 'react-testing-library';
import HRWrapper from '.';
test('<HRWrapper> snapshot', () => {
const { container } = render(<HRWrapper>P.Body AaBbCc</HRWrapper>);
expect(container.firstChild).toMatchSnapshot();
});
Example Error:
● Test suite failed to run
.../packages/Tooltip/src/index.js: Missing class properties transform.
126 |
127 | class ToolTip extends React.Component {
> 128 | state = {
| ^
129 | active: false,
130 | style: {}
131 | }
Here is my configuration:
package.json:
{
...
"scripts": {
"postinstall": "npm run bootstrap",
"bootstrap": "lerna bootstrap",
"build": "lerna exec -- node ../../scripts/build.js",
"clean": "lerna clean",
"predev": "npm run alias",
"dev": "NODE_ENV=development start-storybook -p 9001 -c .storybook",
"docs": "for f in packages/*; do react-doc-generator $f/src -o $f/docs/README.md -e [*.story.js]; done",
"publish": "lerna --no-verify-registry publish",
"start": "npm run dev",
"test": "jest --json --outputFile=.jest-test-results.json",
"test:update": "jest --updateSnapshot",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"lint": "eslint .",
"fix": "eslint --fix",
"alias": "node scripts/alias.js"
},
"repository": {
"type": "git",
...
.babelrc:
{
"presets": [
"stage-1",
"react",
[
"env",
{
"modules": false
}
]
],
"plugins": ["transform-class-properties"],
"env": {
"test": {
"presets": ["env", "react"],
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
jest.config.js:
module.exports = {
"setupTestFrameworkScriptFile": "<rootDir>/config/setup-test.js",
"moduleNameMapper": {
[`#myLibrary/(.*)$`]: "<rootDir>/packages/$1/src"
},
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
};
setup-test.js:
// this is the jest setupTestFrameworkScriptFile
/*
* use mocked classNames instead of unique hashed className generated by
* styled-components for snapshot testing
*/
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-styled-components';
configure({ adapter: new Adapter() });
// here we set up a fake localStorage because jsdom doesn't support it
// https://github.com/tmpvar/jsdom/issues/1137
if (!window.localStorage) {
window.localStorage = {};
Object.assign(window.localStorage, {
removeItem: function removeItem(key) {
delete this[key];
}.bind(window.localStorage),
setItem: function setItem(key, val) {
this[key] = String(val);
}.bind(window.localStorage),
getItem: function getItem(key) {
return this[key];
}.bind(window.localStorage),
});
}
It's possible you also need stage-2 or stage-0.
See: https://github.com/tc39/proposals
Also remember that plugins are applied BEFORE presets, and presets are applied in order of last to first.
My colleague spotted the issue, one of those obvious ones staring me in the face...
transform-class-properties was missing from the plugins in my test environment configuration in my .babelrc.
I made the following changes and it now works properly.
.babelrc:
{
"presets": [
"stage-1",
"react",
[
"env",
{
"modules": false
}
]
],
"plugins": ["transform-class-properties"],
"env": {
"test": {
"presets": ["env", "react"],
"plugins": ["transform-class-properties", "transform-es2015-modules-commonjs"]
}
}
am working with angular version 6.1.0 and electron 2.0,on running the app in browser it but on running npm run electron-build was successful but the app could not launch. thus, no browser window is displayed.
Here is the package.json file:
{
"name": "front",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build":"ng build --prod"
}
...
}
Here is the main.js file:
const {app, BrowserWindow} = require('electron');
let win;
function createWindow (){
win = new BrowserWindow({
height: 600,
width:600,
backgroundColor:'#ffffff'
})
win.loadURL(`file://${__dirname}/dist/index.html`)
win.on('closed',function(){
win=null;
})
}
app.on('ready',createWindow())
app.on('windows-all-closed',()=>{
if(process.platform!=='darwin'){
app.quit();
}
})
app.on('activate',function(){
if(win==null){
createWindow()
}
})
It's because you're calling the createWindow function when the app first loads since in the ready event it thinks it should call the createWindow function straight away since it has the two brackets at the end.
To fix it just take the brakets off so it becomes:
app.on('ready',createWindow)
Thanks to #KirkLarkin for spotting the bug.