#angular-redux show state is undefined while fetching from ngRedux store - redux

I am trying to read the configuration from store, and i have returned the default state in all the reducers still not able to figure out why do i get state as undefined, can anyone please guide on this
below is the ts file line (we call below line from interceptor, and when we add the debugger at interceptor at that point in time we see that store is undefined )
getuserData(){
if (this.store.getState()?.ApplicationConfig) {} ---> state is undefined.
}
reducer
export class ApplicationConfigReducers {
static ApplicationConfigReducer: Reducer<ApplicationConfig | undefined, FSA<string,
ApplicationConfig, null>> = (state: ApplicationConfig = new ApplicationConfig(), action:
FSA<string, ApplicationConfig, null>) => {
console.log("action.Type", action.type);
switch (action.type) {
case ApplicationConfigActions.SET_APPLICATION_CONFIG:
return tassign(state, action.payload);
default:
console.log("reached default action.Type", action.type);
return state;
}
}
}
it triggers
Error
TypeError: Cannot read properties of undefined (reading 'getState')
at RootStore.getState (angular-redux-store.js:593:63)
at UserService.getUserFromSession (user.service.ts:25:20)
at UserService.isAuthenticated (user.service.ts:150:29)
at AuthorizationInterceptor.intercept (authorization.interceptor.ts:17:26)
at http.mjs:1383:60
at http.mjs:1422:16
at http.mjs:1393:76
at R3Injector.runInContext (core.mjs:7975:20)
at http.mjs:1393:57
at http.mjs:1393:127
below is my package.json lib:
   
   
"#angular-redux/store": "^10.0.0",
"#angular/animations": "^15.1.0",
"#angular/cdk": "^15.0.4",
    "#angular/common": "^15.1.0",
    "#angular/compiler": "^15.1.0",
    "#angular/core": "^15.0.4",
    "#angular/forms": "^15.1.1",
    "#angular/material": "^15.1.1",
    "#angular/platform-browser": "^15.0.4",
    "#angular/platform-browser-dynamic": "^15.1.0",
    "#angular/router": "^15.0.4",
    "#ng-idle/core": "^11.0.3",
    "#ngx-translate/core": "^13.0.0",
    "#ngx-translate/http-loader": "^6.0.0",
    "flux-standard-action": "^2.1.2",
    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
    "ng-dialog-animation": "^9.0.4",
    "ngx-device-detector": "^4.0.1",
    "redux": "4.0.1",
    "redux-devtools": "^3.5.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-observable": "^1.2.0",
    "rxjs": "^7.8.0",
    "tassign": "^1.0.0",
    "tslib": "^2.0.0",
    "typescript": "^4.8.4",
    "uuid": "^8.2.0",
    "zone.js": "^0.12.0"
  },

Related

Get code from country or zone name to set locale() moment.js

I'm using moment.js with moment timezone in it.
I was trying to find how to get code 'fr' from zone name 'Europe/Paris' all day, but with no luck.
I read all their docs and couldn't find that function either, so i need help on this one.
Closest what i found is this. I need this function but in reverse, to pass country name and get country code.
Luckily i found solution
moment.tz.zone('America/New_York').countries()
This will get you array so you guys can easily pass that value to locale()
So final code would be:
var get_locale = moment.tz.zone('America/New_York').countries();
moment.locale(get_locale);
I was trying to below code in my Angular(v12.0.5) project and get this error.
var get_locale = moment.tz.zone('America/New_York').countries();
moment.locale(get_locale);
Error -
package.json -
"dependencies": {
"#angular/animations": "^12.0.5",
"#angular/cdk": "~12.2.13",
"#angular/common": "~12.0.3",
"#angular/compiler": "~12.0.3",
"#angular/core": "~12.0.3",
"#angular/forms": "~12.0.3",
"#angular/material": "~12.2.13",
"#angular/material-moment-adapter": "^13.2.2",
"#angular/platform-browser": "~12.0.3",
"#angular/platform-browser-dynamic": "~12.0.3",
"#angular/router": "~12.0.3",
"moment": "^2.29.1",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.0.3",
"#angular/cli": "~12.0.3",
"#angular/compiler-cli": "~12.0.3",
"#types/jasmine": "~3.6.0",
"#types/moment-timezone": "^0.5.30",
"#types/node": "^12.11.1",
"typescript": "~4.2.3"
}
Then I found the solution in moment doc -
const get_country = moment.tz.guess(true); // Asia/Calcutta
const get_locale = moment.locale(get_country); // en

ionic - Firebase issue

Getting the following error while creating the build.Else not having any problem.
Any solutions to resolve this issue.
Currently using following congfiguration...'
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "5.2.11",
"#angular/compiler-cli": "5.2.11",
"#angular/core": "5.2.11",
"#angular/fire": "^5.2.3",
"#angular/forms": "5.2.11",
"#angular/http": "5.2.11",
"#angular/platform-browser": "5.2.11",
"#angular/platform-browser-dynamic": "5.2.11",
"#ionic-native/core": "~4.20.0",
"#ionic-native/in-app-browser": "^4.20.0",
"#ionic-native/splash-screen": "~4.20.0",
"#ionic-native/status-bar": "~4.20.0",
"#ionic/storage": "2.2.0",
"#ngx-translate/core": "^9.1.1",
"#ngx-translate/http-loader": "^2.0.1",
"angular-bottom-sheet": "^1.2.5",
"angular-material": "^1.1.20",
"angular2": "^2.0.0-beta.21",
"angularfire2": "^5.0.0-rc.6",
"call-number": "^1.0.1",
"cordova-android": "^7.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-inappbrowser": "^3.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^7.6.1",
"ionic-angular": "3.9.5",
"ionicons": "3.0.0",
"promise-polyfill": "^8.1.3",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.5.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"#ionic/app-scripts": "3.2.2",
"typescript": "3.2.2"
},
I got an error blow, please find it:
[20:15:04] typescript: ...e_m_pwd_app/e_i/node_modules/#firebase/database/dist/src/api/Database.d.ts, line: 44
An accessor cannot be declared in an ambient context.
L43: * We throw a exception if the url is not in the same domain as the
L44: * current repo.
L45: * #param {string} url
[20:15:04] typescript: ...m_pwd_app/e_i/node_modules/#firebase/database/dist/src/api/DataSnapshot.d.ts, line: 88
An accessor cannot be declared in an ambient context.
[20:15:04] typescript: ...m_pwd_app/e_i/node_modules/#firebase/database/dist/src/api/DataSnapshot.d.ts, line: 98
An accessor cannot be declared in an ambient context.
[20:15:04] typescript: ...nd/e_p/e_i/node_modules/#firebase/database/dist/src/api/Query.d.ts, line: 36
An accessor cannot be declared in an ambient context.
L36: * Validates that no other order by call has been made
L37: * #param {!string} fnName
[20:15:04] typescript: ...nd/e_p/e_i/node_modules/#firebase/database/dist/src/api/Query.d.ts, line: 37
An accessor cannot be declared in an ambient context.
L36: * Validates that no other order by call has been made
L37: * #param {!string} fnName
L38: * #private
i am working with firebase database with ionic framework. when i trying to connect with firebase i am getting above mentioned error in ionic framework,
please give me a solution for this issue.
please check the keyname firebase as well as your code (fnName). please share your code

Ionic 3 Firebase Google Auth redirects to localhost instead of app

Im using AngularFire2 in my Ionic 3 Project. I have implemented Facebook and Google Login which worked before but somehow it stopped working (maybe because of changes in the Firebase SDK or Google?).
The problem Im facing now is that once a user logs in through google with redirect he logs in but doesnt get redirect back in my app. Instead google just displays this page on redirect:
Here is the Code im using for SignIn:
private oauthSignIn(provider: AuthProv) {
if (!(<any>window).cordova) {
return this.afAuth.auth.signInWithPopup(provider).then((user) => {
this.user = user.user;
});
} else {
return this.afAuth.auth.signInWithRedirect(provider)
.then(() => {
return this.afAuth.auth.getRedirectResult().then(result => {
this.user = result.user;
});
});
}
}
This code is from the AngularFire2 Documentation itself so I cant find any errors.
This is my package.json:
"dependencies": {
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "5.2.11",
"#angular/compiler-cli": "5.2.11",
"#angular/core": "5.2.11",
"#angular/forms": "5.2.11",
"#angular/http": "5.2.11",
"#angular/platform-browser": "5.2.11",
"#angular/platform-browser-dynamic": "5.2.11",
"#ionic-native/admob-plus": "^5.8.0",
"#ionic-native/app-version": "^4.20.0",
"#ionic-native/core": "~4.20.0",
"#ionic-native/keyboard": "^5.8.0",
"#ionic-native/navigation-bar": "^5.8.0",
"#ionic-native/splash-screen": "~4.20.0",
"#ionic-native/status-bar": "~4.20.0",
"#ionic/storage": "2.2.0",
"#ultimate/ngxerrors": "^1.4.0",
"angularfire2": "^5.2.1",
"cordova-admob-plus": "0.30.0",
"cordova-android": "7.1.4",
"cordova-plugin-app-update": "2.0.2",
"cordova-plugin-app-version": "0.1.9",
"cordova-plugin-appversion": "1.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "4.1.1",
"cordova-plugin-navigationbar": "1.0.31",
"cordova-plugin-network-information": "git+https://github.com/apache/cordova-plugin-network-information.git",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-startapp-ads": "git+https://github.com/lreiner/cordova-plugin-startapp-ads.git",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^6.1.1",
"ionic-admob": "^0.19.6",
"ionic-angular": "3.9.5",
"ionicons": "3.0.0",
"phonegap-plugin-mobile-accessibility": "git+https://github.com/phonegap/phonegap-mobile-accessibility.git",
"promise-polyfill": "^8.1.3",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
I have already tried this Solution and added:
<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />
<allow-navigation href="http://*" />
to my config.xml which also didnt change anything.
I also have tried to downgrade
"cordova-plugin-ionic-webview": "4.1.1",
which also didnt work.
My Google WebClient has the right ClientID, Secred and Redirect URL like in the Firebase Console.
So how can I solve this behavior?

ngb-alert only works with type="success" or without type

I have this following code which works.
<ngb-alert *ngIf="alertError" class="fade animate-show animate-hide" (close)="alertError = false"><strong>{{ message }}</strong></ngb-alert>
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" type="success" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>
But if I change to the following it doesn't
<ngb-alert *ngIf="alertError" class="fade animate-show animate-hide" type="danger" (close)="alertError = false"><strong>{{ message }}</strong></ngb-alert>
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" type="primary" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>
My package.json is like this.
"dependencies": {
"#angular/animations": "^4.3.4",
"#angular/cdk": "^2.0.0-beta.8",
"#angular/common": "^4.3.4",
"#angular/core": "^4.3.4",
"#angular/forms": "^4.3.4",
"#angular/http": "^4.3.4",
"#angular/material": "^2.0.0-beta.8",
"#angular/platform-browser": "^4.3.4",
"#angular/platform-browser-dynamic": "^4.3.4",
"#angular/router": "^4.3.4",
"#ng-bootstrap/ng-bootstrap": "~1.0.0-alpha.30",
"angular-loader": "^1.6.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"primeng": "^4.1.3",
"rxjs": "^5.4.2",
"screenshot-desktop": "^1.1.0",
"underscore": "^1.8.3",
"zone.js": "^0.8.16"
},
"devDependencies": {
"#angular/cli": "^1.2.7",
"#angular/compiler": "^4.3.4",
"#angular/compiler-cli": "^4.3.4",
"#types/jasmine": "^2.5.53",
"#types/node": "^8.0.19",
"codelyzer": "^3.1.2",
"jasmine-core": "^2.7.0",
"jasmine-spec-reporter": "^4.1.1",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.1.2",
"ts-node": "^3.3.0",
"tslint": "^5.5.0",
"typescript": "^2.4.2"
}
So, can some expert please tell me what's wrong here? Why type primary or danger won't work.
I ran across a similar issue. My problem was that Angular thought I was passing it a variable from which to read the type from. Obviously there was no variable titled primary so it failed. changing things to [type]="'primary'" solved the issue altogether.
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" [type]="'primary'" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>
I think you're just not allowed to use the fade class here.
class="fade animate-show animate-hide"
If I run your code, it only shows me the success.
But if I remove the fade class, it shows both messages.
EDIT
I compared your list of dependencies to mine.
Have you tried updating your libs?
You can run this from the command line:
npm update -D && npm update -S
Dependencies that you have, that I don't :
"angular-loader": "^1.6.5",
"font-awesome": "^4.7.0",
"primeng": "^4.1.3",
"screenshot-desktop": "^1.1.0",
"underscore": "^1.8.3"
I am especially wondering about that first one angular-loader.
Do you know what it's for ? According to its documentation it's a AngularJS dependency.

TypeError: Cannot read property of Selector-Matcher

I am working on an Angular2 & ASP.NET Core project with webpack and I suddenly get an error. I didn't have this error yesterday and I didn't make any changes today. Does anyone have an idea what the problem is?
Exception: Call to Node module failed with error: TypeError: Cannot read property 'SelectorMatcher' of undefined
at Object. (C:\Users\john\Desktop\WORKSHOP...\node_modules\angular2-platform-node__private_imports__.js:21:54)
My package.json
{
"name": "Angular2Workshop",
"version": "0.1.0",
"description": "A simple application with an Angular 2 app and a Asp.Net Core Backend",
"license": "UNLICENSED",
"scripts": {
"test": "./node_modules/.bin/karma start",
"postinstall": "typings install && npm uninstall selenium-webdriver"
},
"dependencies": {
"#angular/common": "^2.0.0",
"#angular/compiler": "^2.0.0",
"#angular/core": "^2.0.0",
"#angular/forms": "^2.0.0",
"#angular/http": "^2.0.0",
"#angular/platform-browser": "^2.0.0",
"#angular/platform-browser-dynamic": "^2.0.0",
"#angular/platform-server": "^2.0.0",
"#angular/router": "^3.0.0",
"#types/node": "^6.0.38",
"angular2-platform-node": "~2.0.10",
"angular2-universal": "~2.0.10",
"angular2-universal-polyfills": "~2.0.10",
"aspnet-prerendering": "^1.0.6",
"aspnet-webpack": "^1.0.11",
"bootstrap": "^3.3.7",
"css": "^2.2.1",
"css-loader": "^0.25.0",
"es6-shim": "^0.35.1",
"es7-reflect-metadata": "^1.4.0",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^2.2.1",
"preboot": "^4.5.2",
"raw-loader": "^0.5.1",
"rxjs": "5.0.0-beta.12",
"style-loader": "^0.13.0",
"to-string-loader": "^1.1.5",
"ts-loader": "^0.8.2",
"typescript": "^2.0.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-externals-plugin": "^1.0.0",
"webpack-hot-middleware": "^2.10.0",
"webpack-merge": "^0.14.1",
"webpack-node-externals": "^1.5.4",
"zone.js": "^0.6.21"
},
"devDependencies": {
"#types/jasmine": "^2.5.35",
"copy-webpack-plugin": "^0.3.3",
"css-loader": "^0.23.0",
"exports-loader": "0.6.2",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.4",
"html-webpack-plugin": "^1.7.0",
"http-server": "^0.8.5",
"imports-loader": "^0.6.4",
"istanbul-instrumenter-loader": "^0.1.3",
"json-loader": "^0.5.3",
"karma": "^0.13.15",
"karma-chrome-launcher": "^0.2.1",
"karma-coverage": "^0.5.3",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^0.2.1",
"karma-sourcemap-loader": "^0.3.6",
"karma-webpack": "1.7.0",
"phantomjs": "^1.9.18",
"phantomjs-polyfill": "0.0.1",
"protractor": "^3.0.0",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.2",
"remap-istanbul": "^0.5.1",
"rimraf": "^2.4.4",
"style-loader": "^0.13.0",
"ts-helper": "0.0.1",
"ts-loader": "^0.7.2",
"tsconfig-lint": "^0.4.3",
"tslint": "^3.2.0",
"tslint-loader": "^2.1.0",
"typedoc": "^0.3.12",
"typescript": "^1.7.3",
"typings": "^1.4.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.12.1",
"webpack-md5-hash": "0.0.4"
}
}
My webpack.config
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var merge = require('webpack-merge');
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;
// Configuration in common to both client-side and server-side bundles
var sharedConfig = {
resolve: { extensions: [ '', '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.css$/, loader: 'to-string!css' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
]
}
};
// Configuration for client-side bundle suitable for running in browsers
var clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot-client.ts' },
output: { path: path.join(__dirname, './wwwroot/dist') },
devtool: isDevBuild ? 'inline-source-map' : null,
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
var serverBundleConfig = merge(sharedConfig, {
entry: { 'main-server': './ClientApp/boot-server.ts' },
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map',
externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules
});
module.exports = [clientBundleConfig, serverBundleConfig];
Try to use 2.0.0 version
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/platform-server": "2.0.0"
I think it is some issue with Angular2.1.1
https://github.com/aspnet/JavaScriptServices/issues/406

Resources