I am using asp.net core and React.js for an application.Everything is happeing in visual studio. I am trying to create a schedule but I have an error when I use 'let ajax = new Ajax('Home/GetData', 'GET', false); '. The error:
Unexpected token. a constructor method accessor or property was
expected
Scheduler.tsx
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '#syncfusion/ej2-react-schedule';
import { RouteComponentProps, withRouter } from 'react-router';
import { connect } from 'react-redux';
import { Ajax } from '#syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '#syncfusion/ej2-data';
export default class Scheduler extends React.Component<RouteComponentProps<{}>, {}> {
private dataManager: object = [];
let ajax = new Ajax('Home/GetData', 'GET', false); //here
render() {
<h1>nerge</h1>
return <ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: dataManager }}>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>;
}
}
package.json
{
"name": "WebApplication",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "4.6.0",
"#types/react": "15.0.35",
"#types/react-dom": "15.5.1",
"#types/react-hot-loader": "3.0.3",
"#types/react-redux": "4.4.45",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/react-router-redux": "5.0.3",
"#types/webpack": "2.2.15",
"#types/webpack-env": "1.13.0",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"domain-task": "^3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"history": "4.6.3",
"jquery": "3.2.1",
"node-noop": "1.0.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-router-dom": "4.1.1",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0"
},
"dependencies": {
"#syncfusion/ej2-react-schedule": "^18.1.44"
}
}
How can I solve this problem? Thank you.
Related
I have created a next.js app in there I have a custom server dir. I am using koa.js as my custom server. It works fine on development but, when I build the app, the api routes show 404 not found error. Below is my package.json
{
"name": "dogs",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=18.7.0",
"yarn": ">=1.22.17",
"npm": "please-use-yarn"
},
"scripts": {
"dev": "nodemon ./server/index.js",
"ngrok": "ngrok http 3000",
"build": "next build",
"start": "next start",
"lint": "next lint",
"prettier": "prettier --write .",
"prepare": "husky install",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.20.2",
"#babel/register": "^7.18.9",
"#fireworks-js/preact": "^2.10.1",
"#koa/cors": "^4.0.0",
"#next/font": "13.1.1",
"#react-email/button": "^0.0.6",
"#react-email/container": "^0.0.7-canary.1",
"#react-email/head": "^0.0.4",
"#react-email/hr": "^0.0.4",
"#react-email/html": "^0.0.4",
"#react-email/img": "^0.0.4",
"#react-email/link": "^0.0.4",
"#react-email/preview": "^0.0.5",
"#react-email/render": "^0.0.6",
"#react-email/section": "^0.0.7-canary.1",
"#react-email/text": "^0.0.4",
"#sendgrid/mail": "^7.7.0",
"TagCloud": "^2.3.2",
"autoprefixer": "^10.4.13",
"aws-sdk": "^2.1300.0",
"babel-polyfill": "^6.26.0",
"bcryptjs": "^2.4.3",
"daisyui": "^2.47.0",
"dotenv": "^16.0.3",
"eslint": "8.30.0",
"eslint-config-next": "13.1.1",
"express": "^4.18.2",
"framer-motion": "^9.0.1",
"gsap": "^3.11.4",
"isomorphic-fetch": "^3.0.0",
"jsonwebtoken": "^9.0.0",
"koa": "^2.14.1",
"koa-body": "^6.0.1",
"koa-cache-control": "^2.0.0",
"koa-combine-routers": "^4.0.2",
"koa-conditional-get": "^3.0.0",
"koa-cookie": "^1.0.0",
"koa-etag": "^4.0.0",
"koa-mongo": "^1.9.3",
"koa-multer": "^1.0.2",
"koa-router": "^12.0.0",
"koa-session": "^6.2.0",
"koa-static": "^5.0.0",
"koa-static-cache": "^5.1.4",
"mongodb": "^4.13.0",
"mongoose": "^6.8.2",
"multer": "^1.4.5-lts.1",
"next": "13.1.1",
"postcss": "^8.4.20",
"primereact": "^8.7.3",
"react": "18.2.0",
"react-confetti": "^6.1.0",
"react-dom": "18.2.0",
"react-icons": "^4.7.1",
"react-multi-select-component": "^4.3.4",
"react-particles": "^2.8.0",
"react-select": "^5.7.0",
"react-tsparticles": "^2.8.0",
"split-type": "^0.3.3",
"tailwindcss": "^3.2.4",
"tsparticles": "^2.8.0",
"tsparticles-engine": "^2.8.0",
"tsparticles-preset-fireworks": "^2.8.0",
"winston": "^3.8.2"
},
"devDependencies": {
"#babel/core": "^7.20.7",
"#commitlint/cli": "^17.3.0",
"#commitlint/config-conventional": "^17.3.0",
"#storybook/addon-actions": "^6.5.15",
"#storybook/addon-essentials": "^6.5.15",
"#storybook/addon-interactions": "^6.5.15",
"#storybook/addon-links": "^6.5.15",
"#storybook/builder-webpack5": "^6.5.15",
"#storybook/manager-webpack5": "^6.5.15",
"#storybook/react": "^6.5.15",
"#storybook/testing-library": "^0.0.13",
"babel-loader": "^8.3.0",
"cross-env": "^7.0.3",
"husky": "^8.0.2",
"ngrok": "^4.3.3",
"nodemon": "^2.0.20",
"prettier": "^2.8.1"
},
"resolutions": {
"webpack": "^5"
}
}
Below is my server code
import '#babel/polyfill';
import dotenv from 'dotenv';
import 'isomorphic-fetch';
import next from 'next';
import Koa from 'koa';
import Router from 'koa-router';
import UserRouter from './routes/user';
import DataRouter from './routes/data';
import EmailRouter from './routes/emails';
import MongoClientConnection from './db';
import cookie from 'koa-cookie';
dotenv.config();
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const server = new Koa();
const router = new Router();
// Initialize NextJs instance and expose request handler
const app = next({ dev });
const handler = app.getRequestHandler();
(async () => {
try {
await app.prepare();
router.get('/custom-page', async (ctx) => {
await app.render(ctx.req, ctx.res, '/', ctx.query);
ctx.respond = false;
});
const db = await MongoClientConnection.Get();
server.context.db = db;
const handleRequest = async (ctx) => {
await handler(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
};
router.get('/_next/webpack-hmr', handleRequest); // Webpack content is clear
router.get('(.*)', async (ctx) => {
await handleRequest(ctx);
});
server.use(cookie());
server.use(UserRouter.routes()).use(UserRouter.allowedMethods());
server.use(DataRouter.routes()).use(DataRouter.allowedMethods());
server.use(EmailRouter.routes()).use(EmailRouter.allowedMethods());
server.use(router.routes());
server.listen(port, (_) => console.log(`App running on port ${port}`));
} catch (e) {
console.error(e);
process.exit();
}
})();
How can I build my next.js app so my api routes work on production?
I need to get my accessToken and my refreshToken when I authenticate with fireabse. I have read a lot of the documentation and I can't understand how to get the refreshToken.
I get the accessToken from the GoogleSignIn.getTokens() method.
But I can't get the refreshToken from any method or function that these libraries provide me.
I need accessToken and refreshToken to send it to my backend. In other applications I am already receiving it, through other methods, but what would be the problem here? is the library wrong? I am not understanding the documentation? Why can't I really understand where to get it from or if the idToken updates itself or maybe the refreshToken is not sent anymore?
my code =>
import { GoogleSignin } from '#react-native-google-signin/google-signin';
import auth from '#react-native-firebase/auth';
GoogleSignin.configure({
webClientId:
'xxxxxxxxxxxxxxxxxxxxx',
});
const onGoogleButtonPress = async () => {
// Get the users ID token
const { idToken } = await GoogleSignin.signIn();
// Create a Google credential with the token
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
// Sign-in the user with the credential
return auth().signInWithCredential(googleCredential);
};
export { onGoogleButtonPress };
React Native Info =>
react: 18.1.0 => 18.1.0
react-native: 0.70.6 => 0.70.6
Package.json ->
{
"name": "asset_management_mobile",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#invertase/react-native-apple-authentication": "^2.2.2",
"#react-native-firebase/app": "^15.4.0",
"#react-native-firebase/auth": "^15.4.0",
"#react-native-google-signin/google-signin": "^8.0.0",
"#react-native-masked-view/masked-view": "0.2.0",
"#react-navigation/bottom-tabs": "^6.5.2",
"#react-navigation/native": "^6.0.12",
"#react-navigation/stack": "^6.2.3",
"#types/react-native-background-timer": "^2.0.0",
"convert-string": "^0.1.0",
"depcheck": "^1.4.3",
"deprecated-react-native-prop-types": "^2.3.0",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-android-open-settings": "^1.3.0",
"react-native-background-timer": "^2.4.1",
"react-native-ble-manager": "^8.4.3",
"react-native-bluetooth-state-manager": "^1.3.4",
"react-native-gesture-handler": "^2.6.0",
"react-native-gradle-plugin": "^0.70.2",
"react-native-linear-gradient": "^2.6.2",
"react-native-permissions": "^3.6.1",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.3",
"react-native-screens": "^3.17.0",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^13.1.0",
"react-native-swiper": "^1.6.0",
"react-native-vision-camera": "^2.15.2",
"vision-camera-code-scanner": "^0.2.0"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/runtime": "^7.14.6",
"#react-native-community/eslint-config": "^3.0.0",
"#types/convert-string": "^0.1.1",
"#types/jest": "^29.0.0",
"#types/react": "^18.0.18",
"#types/react-native": "^0.69.6",
"#types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.0.1",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^8.23.0",
"jest": "^29.0.1",
"metro-react-native-babel-preset": "^0.72.1",
"react-native-svg-transformer": "^1.0.0",
"react-native-typescript-transformer": "^1.2.13",
"react-test-renderer": "^18.2.0",
"ts-jest": "^28.0.8",
"typescript": "^4.3.5"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"testPathIgnorePatterns": [
"\\.snap$",
"<rootDir>/node_modules/"
],
"cacheDirectory": ".jest/cache"
}
}
I need your help!! Thanks!
I'm working on a NextJS application with PurgeCSS. I have to restart the server every single time I change the classname of a component.
Here are my postcss.config.js:
plugins: [
[
'#fullhuman/postcss-purgecss',
{
content: [
'./src/pages/**/*.{js,jsx,ts,tsx}',
'./src/pages/*.{js,jsx,ts,tsx}',
'./src/components/**/*.{js,jsx,ts,tsx}',
'./src/containers/**/*.{js,jsx,ts,tsx}',
],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ['html', 'body'],
enableDevPurge: false,
},
],
'postcss-preset-env',
],
};
My package.json dependencies:
"dependencies": {
"date-fns": "^2.29.3",
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.7.1",
"sass": "^1.57.1"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^5.0.0",
"#types/node": "18.11.18",
"#types/react": "18.0.26",
"#types/react-dom": "18.0.10",
"#typescript-eslint/eslint-plugin": "5.48.0",
"#typescript-eslint/parser": "5.48.0",
"autoprefixer": "^10.4.13",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-next": "^0.0.0",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.3",
"lint-staged": "13.1.0",
"next-purge-css-modules": "1.1.0",
"postcss": "^8.4.20",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.8.3",
"prettier": "^2.8.1",
"typescript": "4.9.4"
}
I'm using global styles, not module styles, and scss instead of css.
This is my _app.tsx:
import '../styles/Global.scss';
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
Say I have these two styles:
.bg-blue { background-color: blue; }
.bg-red { background-color: red; }
If I had bg-blue used on a div's className, and I change it to bg-red, its ruleset is missing from the stylesheet.
I'm assuming purgecss doesn't update the stylesheet and does only one purge on server start.
It's definitely not ideal, but I don't care if I can just disable the whole purge functionality. However, can't find a way for that either.
Any tips?
I am currently working on a Angular2+/Typescript/Bootstrap project generated with JHipster in which I have an entity "CalendarEvent" that has a startTime field of Java type Instant.
Today this field looks like this :
My problem is that I cannot know if that time is am or pm.
For instance, when I tried :
const startMoment = moment(this.startTime, DATE_TIME_FORMAT);
startMoment.set({hour: 18});
this.startTime= moment(startMoment).format(DATE_TIME_FORMAT);
in order to force the startTime hour to 18h (6pm), the form field showed 06:49. I therefore have no way to know if a time is in the morning or in the afternoon.
Now JHipster generated the entity creation/update form, in which the html code of this field is :
<label class="form-control-label" jhiTranslate="myApp.calendarEvent.startTime" for="field_startTime">Start Time</label>
<div class="d-flex">
<input id="field_startTime" type="datetime-local" class="form-control" name="startTime" max="endTime" [(ngModel)]="startTime" required/>
</div>
and the Typescript code (from which I removed few unrelated code):
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { HttpResponse, HttpErrorResponse } from '#angular/common/http';
import { Observable } from 'rxjs';
import * as moment from 'moment';
import { DATE_TIME_FORMAT } from 'app/shared/constants/input.constants';
import { JhiAlertService } from 'ng-jhipster';
import { ICalendarEvent } from 'app/shared/model/calendar-event.model';
import { CalendarEventService } from './calendar-event.service';
#Component({
selector: 'jhi-calendar-event-update',
templateUrl: './calendar-event-update.component.html'
})
export class CalendarEventUpdateComponent implements OnInit {
private _calendarEvent: ICalendarEvent;
isSaving: boolean;
startTime: string;
constructor(
private jhiAlertService: JhiAlertService,
private calendarEventService: CalendarEventService,
private activatedRoute: ActivatedRoute
) {}
ngOnInit() {
this.isSaving = false;
this.activatedRoute.data.subscribe(({ calendarEvent }) => {
this.calendarEvent = calendarEvent;
});
}
previousState() {
window.history.back();
}
save() {
this.isSaving = true;
this.calendarEvent.startTime = moment(this.startTime, DATE_TIME_FORMAT);
if (this.calendarEvent.id !== undefined) {
this.subscribeToSaveResponse(this.calendarEventService.update(this.calendarEvent));
} else {
this.subscribeToSaveResponse(this.calendarEventService.create(this.calendarEvent));
}
}
private subscribeToSaveResponse(result: Observable<HttpResponse<ICalendarEvent>>) {
result.subscribe((res: HttpResponse<ICalendarEvent>) => this.onSaveSuccess(), (res: HttpErrorResponse) => this.onSaveError());
}
private onSaveSuccess() {
this.isSaving = false;
this.previousState();
}
private onSaveError() {
this.isSaving = false;
}
private onError(errorMessage: string) {
this.jhiAlertService.error(errorMessage, null, null);
}
getSelected(selectedVals: Array<any>, option: any) {
if (selectedVals) {
for (let i = 0; i < selectedVals.length; i++) {
if (option.id === selectedVals[i].id) {
return selectedVals[i];
}
}
}
return option;
}
get calendarEvent() {
return this._calendarEvent;
}
set calendarEvent(calendarEvent: ICalendarEvent) {
this._calendarEvent = calendarEvent;
this.startTime = moment(calendarEvent.startTime).format(DATE_TIME_FORMAT);
}
}
Now you can see that the component has a startTime string attribute instanciated like this :
this.startTime = moment(calendarEvent.startTime).format(DATE_TIME_FORMAT);
(with calendarEvent.startTime of type Instant). Now in a config file, I saw :
export const DATE_TIME_FORMAT = 'YYYY-MM-DDThh:mm';
I thought that by changing the value of DATE_TIME_FORMAT to something like LLLL (found on Moment.js documentation) I would easily get a clearer format, but unfortunately, not only it does not change the form format, but it also appears uninitialized by default :
I also join my package.json and .yo-rc.json that are often asked to people requesting support (if any help) :
package.json
{
"name": "platform-overview-2",
"version": "0.0.0",
"description": "Description for platformOverview2",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"#angular/common": "6.0.0",
"#angular/compiler": "6.0.0",
"#angular/core": "6.0.0",
"#angular/forms": "6.0.0",
"#angular/platform-browser": "6.0.0",
"#angular/platform-browser-dynamic": "6.0.0",
"#angular/router": "6.0.0",
"#fortawesome/angular-fontawesome": "0.1.0-9",
"#fortawesome/fontawesome-svg-core": "1.2.0-11",
"#fortawesome/free-solid-svg-icons": "5.1.0-8",
"#ng-bootstrap/ng-bootstrap": "2.0.0",
"bootstrap": "4.0.0",
"core-js": "2.5.3",
"jquery": "3.3.1",
"moment": "2.21.0",
"ng-jhipster": "0.5.4",
"ngx-cookie": "2.0.1",
"ngx-infinite-scroll": "0.5.1",
"ngx-webstorage": "2.0.1",
"reflect-metadata": "0.1.12",
"rxjs": "6.1.0",
"rxjs-compat": "6.1.0",
"swagger-ui": "2.2.10",
"tslib": "1.9.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.1.1",
"#angular/compiler-cli": "6.0.0",
"#ngtools/webpack": "6.0.0",
"#types/jest": "22.2.3",
"#types/node": "9.4.7",
"angular-router-loader": "0.8.2",
"angular2-template-loader": "0.6.2",
"browser-sync": "2.24.4",
"browser-sync-webpack-plugin": "2.2.2",
"cache-loader": "1.2.2",
"codelyzer": "4.2.1",
"copy-webpack-plugin": "4.5.1",
"css-loader": "0.28.10",
"exports-loader": "0.7.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "1.1.11",
"fork-ts-checker-webpack-plugin": "0.4.1",
"friendly-errors-webpack-plugin": "1.7.0",
"generator-jhipster": "5.1.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"husky": "0.14.3",
"jest": "22.4.3",
"jest-junit": "5.1.0",
"jest-preset-angular": "5.2.2",
"jest-sonar-reporter": "2.0.0",
"lint-staged": "7.0.0",
"merge-jsons-webpack-plugin": "1.0.14",
"moment-locales-webpack-plugin": "1.0.5",
"prettier": "1.11.1",
"proxy-middleware": "0.15.0",
"raw-loader": "0.5.1",
"rimraf": "2.6.1",
"simple-progress-webpack-plugin": "1.1.2",
"style-loader": "0.20.3",
"tapable": "1.0.0",
"thread-loader": "1.1.5",
"to-string-loader": "1.1.5",
"ts-loader": "4.0.1",
"tslint": "5.9.1",
"tslint-config-prettier": "1.9.0",
"tslint-loader": "3.6.0",
"typescript": "2.7.2",
"uglifyjs-webpack-plugin": "1.2.5",
"webpack": "4.8.0",
"webpack-cli": "2.1.3",
"webpack-dev-server": "3.1.4",
"webpack-merge": "4.1.2",
"webpack-notifier": "1.6.0",
"webpack-visualizer-plugin": "0.1.11",
"workbox-webpack-plugin": "3.2.0",
"write-file-webpack-plugin": "4.2.0",
"xml2js": "0.4.19"
},
"engines": {
"node": ">=8.9.0",
"yarn": ">=1.3.2"
},
"lint-staged": {
"src/**/*.{ts,css,scss}": [
"prettier --write",
"git add"
]
},
"scripts": {
"precommit": "lint-staged",
"prettier:format": "yarn prettier --write 'src/**/*.{ts,css,scss}'",
"lint": "tslint --project tsconfig.json -e 'node_modules/**'",
"lint:fix": "yarn run lint --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/{aot,www}",
"clean-www": "rimraf target//www/app/{src,target/}",
"start": "yarn run webpack:dev",
"serve": "yarn run start",
"build": "yarn run webpack:prod",
"test": "yarn run lint && jest --coverage --logHeapUsage -w=2 --config src/test/javascript/jest.conf.js",
"test:watch": "yarn test --watch --clearCache",
"webpack:dev": "yarn run webpack-dev-server --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",
"webpack:dev-verbose": "yarn run webpack-dev-server --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --profile --progress --env.stats=normal",
"webpack:build:main": "yarn run webpack --config webpack/webpack.dev.js --env.stats=normal",
"webpack:build": "yarn run cleanup && yarn run webpack:build:main",
"webpack:prod:main": "yarn run webpack --config webpack/webpack.prod.js --profile",
"webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www",
"webpack:test": "yarn run test",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
},
"jestSonar": {
"reportPath": "target/test-results/jest",
"reportFile": "TESTS-results-sonar.xml"
}
}
.yo-rc.json
{
"generator-jhipster": {
"promptValues": {
"packageName": "com.worldline.app",
"nativeLanguage": "en"
},
"jhipsterVersion": "5.1.0",
"applicationType": "monolith",
"baseName": "platformOverview2",
"packageName": "com.worldline.app",
"packageFolder": "com/worldline/app",
"serverPort": "8080",
"authenticationType": "jwt",
"cacheProvider": "ehcache",
"enableHibernateCache": true,
"websocket": false,
"databaseType": "sql",
"devDatabaseType": "h2Disk",
"prodDatabaseType": "mysql",
"searchEngine": false,
"messageBroker": false,
"serviceDiscoveryType": false,
"buildTool": "maven",
"enableSocialSignIn": false,
"enableSwaggerCodegen": false,
"jwtSecretKey": "455e1315207269bf7ba9685bdba93b4ff0224ba0",
"clientFramework": "angularX",
"useSass": false,
"clientPackageManager": "yarn",
"testFrameworks": [],
"jhiPrefix": "jhi",
"enableTranslation": true,
"nativeLanguage": "en",
"languages": [
"en",
"fr",
"de",
"es",
"ro",
"zh-cn",
"pl"
]
}
}
Please let me know if you need more information.
Thanks in advance for any help you can provide :) !
I am trying to use FCM Cordova plugin to implement Push notifications. However I am facing this weird issue.
I followed this URL https://ionicframework.com/docs/native/fcm/ and installed it and also imported it correctly in app.component.ts(this where I am trying to use ) and app.module.ts
This is my app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import {Facebook} from 'ionic-native';
import { StudentPage } from '../pages/student/student';
import { ContactPage } from '../pages/contact/contact';
import { TutorPage } from '../pages/tutor/tutor';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { ProfilePage } from '../pages/profile/profile';
import { ChatPage } from '../pages/chat/chat';
import { UserChatPage } from '../pages/userchat/userchat';
import { NativeStorage } from '#ionic-native/native-storage';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { GooglePlus } from '#ionic-native/google-plus';
import { IntroPage } from '../pages/intro/intro';
import { NotifyPage } from '../pages/notification/notification';
import { FCM } from '#ionic-native/fcm';
#NgModule({
declarations: [
ClassetteApp,
StudentPage,
ContactPage,
TutorPage,
TabsPage,
LoginPage,
ProfilePage,
ChatPage,
IntroPage,
UserChatPage,
NotifyPage,
FCM
],
imports: [
BrowserModule,
IonicModule.forRoot(ClassetteApp,{tabsPlacement:'top',tabsLayout:'icon-right',tabsHideOnSubPages:true})
],
bootstrap: [IonicApp],
entryComponents: [
ClassetteApp,
StudentPage,
ContactPage,
TutorPage,
TabsPage,
LoginPage,
ProfilePage,
ChatPage,
IntroPage,
UserChatPage,
NotifyPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Facebook,
NativeStorage,
GooglePlus,
FCM
]
})
export class AppModule {}
this my package.json
{
"name": "myapp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"start": "node ./bin/www"
},
"dependencies": {
"#angular/common": "4.1.2",
"#angular/compiler": "4.1.2",
"#angular/compiler-cli": "4.1.2",
"#angular/core": "4.1.2",
"#angular/forms": "4.1.2",
"#angular/http": "4.1.2",
"#angular/platform-browser": "4.1.2",
"#angular/platform-browser-dynamic": "4.1.2",
"#ionic-native/core": "3.10.2",
"#ionic-native/facebook": "^3.10.2",
"#ionic-native/fcm": "^4.1.0",
"#ionic-native/google-plus": "^3.12.1",
"#ionic-native/native-storage": "^3.10.3",
"#ionic-native/splash-screen": "3.10.2",
"#ionic-native/status-bar": "3.10.2",
"#ionic/storage": "2.0.1",
"body-parser": "^1.17.2",
"cordova-android": "^6.2.3",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-facebook4": "^1.9.0",
"cordova-plugin-fcm": "^2.1.2",
"cordova-plugin-googleplus": "^5.1.1",
"cordova-plugin-nativestorage": "^2.2.2",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.2",
"cordova-plugin-whitelist": "^1.3.1",
"express": "^4.15.3",
"ionic-angular": "3.3.0",
"ionic-native": "^2.5.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"mongoose": "^4.11.4",
"morgan": "^1.8.2",
"rxjs": "5.1.1",
"serve-favicon": "^2.4.3",
"socket.io": "^2.0.3",
"socket.io-client": "^2.0.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.11"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-cordova": "1.6.2",
"#ionic/cli-plugin-ionic-angular": "1.4.1",
"ionic": "3.7.0",
"typescript": "2.3.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-facebook4": {
"APP_ID": "3xxxxxxxx75862",
"APP_NAME": "myapp"
},
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": "4xsdsdxxxxxxx7dsgct91usuntkmomme1n8rq5i7oipq8.apps.googleusercontent.com"
},
"cordova-plugin-fcm": {}
},
"platforms": [
"android"
]
},
"main": "index.js",
"keywords": [
"server"
],
"license": "ISC"
}
Note: I have tried adding FCM under imports in app.module.ts but then I get a different error
Unexpected value 'FCM' imported by the module 'AppModule'. Please add
a #NgModule annotation.
You don't need to import FCM to declarations array, in there you'll only declare modules (like pages, pipes, services, and more). All plugins must be declared only in providers.