angular seven database connectivity error - angular7

compiler.js:2430 Uncaught Error: Unexpected value 'AngularFirestore' imported by the module
'AppModule'.
Please add a
#NgModule annotation.
at syntaxError (compiler.js:2430)
at compiler.js:18645
at Array.forEach (<anonymous>)
at CompileMetadataResolver.push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18620)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26029)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:25970)
at CompilerImpl.push../node_modules/#angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
at compileNgModuleFactory__PRE_R3__ (core.js:17619)
at PlatformRef.push../node_modules/#angular/core/fesm5/core.js.PlatformRef.bootstrapModule (core.js:17802)
syntaxError # compiler.js:2430
(anonymous) # compiler.js:18645
push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata # compiler.js:18620
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._loadModules # compiler.js:26029
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents # compiler.js:26010
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync # compiler.js:25970
push../node_modules/#angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync # platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_R3__ # core.js:17619
push../node_modules/#angular/core/fesm5/core.js.PlatformRef.bootstrapModule # core.js:17802
./src/main.ts # main.ts:9
__webpack_require__ # bootstrap:78
0 # main.ts:12
__webpack_require__ # bootstrap:78
checkDeferredModules # bootstrap:45
webpackJsonpCallback # bootstrap:32
(anonymous) # main.js:1e
I added the angular module in ng module but problem is same

You need to import AngularFireModule also into your app.module.ts
import { AngularFireModule } from '#angular/fire';
import { AngularFirestoreModule } from '#angular/fire/firestore';
....
imports: [
AngularFireModule.initializeApp({
apiKey: YOUR_API_KEY,
authDomain: YOUR_AUTH_DOMAIN,
databaseURL: YOUR_DATABASE_URL,
projectId: YOUR_PROJECT_ID
}),
AngularFirestoreModule,
...
]

Related

How do I access and print the elements in my http Response; Flutter, Dart

I am Logging in to the website using this block of code and printing the status code as well as the response body in the console.
void sendLogin() async {
var map = <String, dynamic>{
"UserName": _usernameController.text,
"Password": _passwordController.text,
};
var res = await http.post(
Uri.parse("http://192.168.1.8:8080/HongLeong/LOGIN_REQUEST.do"),
body: map,
);
print(res.statusCode);
print(res.body);
}
and this is what is being printed in the console
I/flutter ( 9739): null
I/flutter ( 9739): 200
I/flutter ( 9739): {"RESPONSE":{"BASEL_RESPONSE":{"UserDate":"0","UserTime":"0","module_config_1":"0","module_config_2":"0","ErrEntity":{"MessageID":"1110","Message":"Field Code is mandatory","last_req_id":"50029","table_id":"0","operation_id":"0"},"is_csv":"0","VersionName":"DYMA # 6.1.24.0, ORG # 2017.3.22.15.0.41, GRC # 2017.3.22.15.0.55, LDC # 2017.3.22.15.1.8, DYMA_XML # 2017.3.22.15.0.30, NAS # 2017.3.22.15.1.22 - Config: 0 - Node: OPRISK_DATACOLLECTOR","ExpiryDate":"31/01/2030","count_key":"0","id_Us":"0","is_popup":"0","tot_messages":"0","my_messages":"0","product":"0"},"RESPONSE_HEADER":{"NomeRichiesta":"LOGIN_REQUEST","ltimeStart":"23531871","ltimeStop":"23531884","ldate_null":"19900101","product":"1","server_name":"OPRISK_DATACOLLECTOR","cell_context_id":"538058","operation_key":"1000000","operation_sub_num":"-1"}}}
How do I access then print the ErrEntity with its contents from the response body
"ErrEntity":{"MessageID":"1110","Message":"Field Code is mandatory","last_req_id":"50029","table_id":"0","operation_id":"0"}
heres a better view of the response body in formatted Json
{
"RESPONSE":{
"BASEL_RESPONSE":{
"UserDate":"0",
"UserTime":"0",
"module_config_1":"0",
"module_config_2":"0",
"ErrEntity":{
"MessageID":"1110",
"Message":"Field Code is mandatory",
"last_req_id":"50029",
"table_id":"0",
"operation_id":"0"
},
"is_csv":"0",
"VersionName":"DYMA # 6.1.24.0, ORG # 2017.3.22.15.0.41, GRC # 2017.3.22.15.0.55, LDC # 2017.3.22.15.1.8, DYMA_XML # 2017.3.22.15.0.30, NAS # 2017.3.22.15.1.22 - Config: 0 - Node: OPRISK_DATACOLLECTOR",
"ExpiryDate":"31/01/2030",
"count_key":"0",
"id_Us":"0",
"is_popup":"0",
"tot_messages":"0",
"my_messages":"0",
"product":"0"
},
"RESPONSE_HEADER":{
"NomeRichiesta":"LOGIN_REQUEST",
"ltimeStart":"23531871",
"ltimeStop":"23531884",
"ldate_null":"19900101",
"product":"1",
"server_name":"OPRISK_DATACOLLECTOR",
"cell_context_id":"538058",
"operation_key":"1000000",
"operation_sub_num":"-1"
}
}
}
Thanks for the help :)
You need to use the dart:convert library to convert the JSON response into a Map. Then you can access the key/value pairs as your would with a regular Map. You'll also have to add a cast (in my example at least) for the correct type using the as keyword.
For example:
import 'dart:convert';
void main() {
final s = """
{
"RESPONSE":{
"BASEL_RESPONSE":{
"UserDate":"0",
"UserTime":"0",
"module_config_1":"0",
"module_config_2":"0",
"ErrEntity":{
"MessageID":"1110",
"Message":"Field Code is mandatory",
"last_req_id":"50029",
"table_id":"0",
"operation_id":"0"
},
"is_csv":"0",
"VersionName":"DYMA # 6.1.24.0, ORG # 2017.3.22.15.0.41, GRC # 2017.3.22.15.0.55, LDC # 2017.3.22.15.1.8, DYMA_XML # 2017.3.22.15.0.30, NAS # 2017.3.22.15.1.22 - Config: 0 - Node: OPRISK_DATACOLLECTOR",
"ExpiryDate":"31/01/2030",
"count_key":"0",
"id_Us":"0",
"is_popup":"0",
"tot_messages":"0",
"my_messages":"0",
"product":"0"
},
"RESPONSE_HEADER":{
"NomeRichiesta":"LOGIN_REQUEST",
"ltimeStart":"23531871",
"ltimeStop":"23531884",
"ldate_null":"19900101",
"product":"1",
"server_name":"OPRISK_DATACOLLECTOR",
"cell_context_id":"538058",
"operation_key":"1000000",
"operation_sub_num":"-1"
}
}
}
""";
final data = jsonDecode(s);
print((data as Map)['RESPONSE']['BASEL_RESPONSE']['ErrEntity']);
}
Prints:
{MessageID: 1110, Message: Field Code is mandatory, last_req_id: 50029, table_id: 0, operation_id: 0}
In your case, you'll ned to use:
final data = jsonDecode(res.body);
to convert the data.
I do though recommend that you use a Class model instead. You can use quicktype.io to generate one for you automatically.
See:
What does the "as" keyword do in Dart language?
How to convert Response JSON to Object in Flutter?

Dart Dev Compiler: Error: Cannot find module 'dart_sdk'

I am searching about Dart to Javascript and trying to do some node play but got stuck on this error:
internal/modules/cjs/loader.js:584
throw err;
^
Error: Cannot find module 'dart_sdk'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (C:\Users\shina\Desenvolvimento\dart_projects\tests_dart\example\main.js:2:18)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
What I did:
I have a main.dart and run the following command on it:
dartdevc --modules node -o main.js .\main.dart
After that i just run: node main.js.
This is my main.dart file:
main() {
print("Hello World!");
}
This is the main.js file generated by dartdevc:
'use strict';
const dart_sdk = require('dart_sdk');
const core = dart_sdk.core;
const dart = dart_sdk.dart;
const dartx = dart_sdk.dartx;
const main = Object.create(dart.library);
main.main = function() {
core.print("Hello World!");
};
dart.trackLibraries("minimain", {
"main.dart": main
}, {
}, null);
// Exports:
exports.minimain = main;
//# sourceMappingURL=minimain.js.map

Unable to fix Modernizr: Can't resolve 'generate' error in Webpacker Rails?

First, yarn add modernizr modernizr-loader json-loader.
Then, create config/webpack/loaders/modernizr-config.json with,
{
"minify": true,
"options": [
"setClasses"
],
"feature-detects": []
}
Then, create config/webpack/loaders/modernizr.js with,
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /modernizr-config\.json$/,
use: [
{
loader: 'modernizr-loader',
options: require('./modernizr-config.json'),
},
'json-loader'
]
},
]
},
resolve: {
extensions: [ '.js', '.json' ],
modules: [
'node_modules'
],
alias: {
modernizr$: path.resolve(__dirname, '/modernizr-config.json')
}
}
}
Finally, import the above file in config/webpack/environment.js as
const modernizr = require('./loaders/modernizr')
environment.config.merge(modernizr)
After importing the modernizr from node_modules,
import * as Modernizr from '../../../../../node_modules/modernizr';
and running ./bin/webpack, I get the following error:
ERROR in ./node_modules/modernizr/lib/build.js
Module not found: Error: Can't resolve 'generate' in '/private/var/www/project/node_modules/modernizr/lib'
# ./node_modules/modernizr/lib/build.js 151:2-72
# ./node_modules/modernizr/lib/cli.js
# ./app/assets/javascripts/packs/application.ts
ERROR in ./node_modules/modernizr/lib/build.js
Module not found: Error: Can't resolve 'lib/generate-banner' in '/private/var/www/project/node_modules/modernizr/lib'
# ./node_modules/modernizr/lib/build.js 151:2-72
# ./node_modules/modernizr/lib/cli.js
# ./app/assets/javascripts/packs/application.ts
ERROR in ./node_modules/modernizr/lib/build.js
Module not found: Error: Can't resolve 'package' in '/private/var/www/project/node_modules/modernizr/lib'
# ./node_modules/modernizr/lib/build.js 151:2-72
# ./node_modules/modernizr/lib/cli.js
# ./app/assets/javascripts/packs/application.ts
ERROR in ./node_modules/requirejs/bin/r.js
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| /**
| * #license r.js 2.1.22 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
# ./node_modules/modernizr/lib/build.js 133:18-38
# ./node_modules/modernizr/lib/cli.js
# ./app/assets/javascripts/packs/application.ts

How to handle global when format is 'es'?

I have identified an Javascript library (incremental-dom) as both a global and external. I'm loading the library in a script tag.
When the rollup format is 'iife' the library in injected into the iife and everything works.
However when I use the 'es' format, the global is never referenced and the browser throws a type error:
Uncaught TypeError: Failed to resolve module specifier 'incremental-dom'
Here's my rollup.config.js file:
const path = require('path');
const root = process.cwd();
const string = require('rollup-plugin-string');
const superviews = require('rollup-plugin-superviews');
export default [
{
input: path.resolve(root, 'src', 'idx-admin-tab', 'component.js'),
plugins: [
superviews({include: 'src/**/*.html'}),
string({include: ['src/**/*.css', 'src/**/*.svg']})
],
globals: {'incremental-dom': 'IncrementalDOM'},
external: ['incremental-dom'],
output: {
file: path.resolve(root, 'dist', 'idx-admin-tab.es.js'),
format: 'es'
}
}
];
globals only works in the context of iife or umd output — if you're creating an es bundle, it will simply be ignored.
If you wanted to just use the browser's native import support, you would have to turn the module specifier incremental-dom into one that the browser can resolve — something like this:
export default [
{
// ...
external: ['incremental-dom'],
paths: {
'incremental-dom': '/node_modules/incremental-dom/dist/incremental-dom.js'
},
// ...
}
];
Unfortunately incremental-dom doesn't have an ESM build, so you can't import it. So if you don't want to bundle it, you will have to trick Rollup into using the global IncrementalDOM even in es mode.
You should be able to do that with rollup-plugin-virtual:
export default [
{
// ...
plugins: [
superviews({include: 'src/**/*.html'}),
string({include: ['src/**/*.css', 'src/**/*.svg']}),
virtual({
'incremental-dom': 'export default window.IncrementalDOM'
})
],
// ...
}
];

ng-token-auth errors - preventing app from loading

I have an AngularJs + Ruby on Rails app and I'm trying to integrate ng-token-auth, however I am getting the following warning and errors when my app loads, preventing the app from actually loading:
jQuery.Deferred exception: Cannot read property 'validateOnPageLoad' of
undefined TypeError: Cannot read property 'validateOnPageLoad' of
undefined
-
TypeError: Cannot read property 'proxyIf' of undefined
at Object.apiUrl (ng-token-auth.self-50017ec….js?body=1:689)
at ng-token-auth.self-50017ec….js?body=1:789
at Object.invoke (angular.self-5592af5….js?body=1:4626)
at request (ng-token-auth.self-50017ec….js?body=1:786)
at processQueue (angular.self-5592af5….js?body=1:15758)
at angular.self-5592af5….js?body=1:15774
at Scope.$eval (angular.self-5592af5….js?body=1:17026)
at Scope.$digest (angular.self-5592af5….js?body=1:16842)
at angular.self-5592af5….js?body=1:17065
at completeOutstandingRequest (angular.self-5592af5….js?
body=1:5825)
-
TypeError: Cannot read property 'url' of undefined
at ng-token-auth.self-50017ec….js?body=1:815
at Object.invoke (angular.self-5592af5….js?body=1:4626)
at responseError (ng-token-auth.self-50017ec….js?body=1:813)
at processQueue (angular.self-5592af5….js?body=1:15758)
at angular.self-5592af5….js?body=1:15774
at Scope.$eval (angular.self-5592af5….js?body=1:17026)
at Scope.$digest (angular.self-5592af5….js?body=1:16842)
at angular.self-5592af5….js?body=1:17065
at completeOutstandingRequest (angular.self-5592af5….js?
body=1:5825)
at angular.self-5592af5….js?body=1:6101
-
Uncaught TypeError: Cannot read property 'validateOnPageLoad' of undefined
at Object.addScopeMethods (ng-token-auth.self-50017ec….js?
body=1:168)
at Object.initialize (ng-token-auth.self-50017ec….js?body=1:109)
at ng-token-auth.self-50017ec….js?body=1:836
at Object.invoke (angular.self-5592af5….js?body=1:4626)
at angular.self-5592af5….js?body=1:4434
at forEach (angular.self-5592af5….js?body=1:322)
at createInjector (angular.self-5592af5….js?body=1:4434)
at doBootstrap (angular.self-5592af5….js?body=1:1711)
at bootstrap (angular.self-5592af5….js?body=1:1732)
at angularInit (angular.self-5592af5….js?body=1:1617)
here's my app index and auth config:
(function(){
'use strict';
angular.module('MyApp', [
'restangular',
'ui.router',
'templates',
'ui.bootstrap',
'ng-token-auth'
]).config(authConfig);
authConfig.$inject = ['$authProvider'];
/** #ngInject */
function authConfig($authProvider) {
$authProvider.configure({
apiUrl: 'http://localhost:8000/'
});
}
})();
UPDATE
It seems that it either cannot find my config or getConfig does not exist:
addScopeMethods: function() {
return c.user = this.user,
c.authenticate = angular.bind(this, this.authenticate),
c.signOut = angular.bind(this, this.signOut),
c.destroyAccount = angular.bind(this, this.destroyAccount),
c.submitRegistration = angular.bind(this, this.submitRegistration),
c.submitLogin = angular.bind(this, this.submitLogin),
c.requestPasswordReset = angular.bind(this, this.requestPasswordReset),
c.updatePassword = angular.bind(this, this.updatePassword),
c.updateAccount = angular.bind(this, this.updateAccount),
this.getConfig().validateOnPageLoad ? this.validateUser({
config: this.getSavedConfig()
}) : void 0
},
It fails in the above code on this.getConfig().validateOnPageLoad because getConfig() is undefined. getSavedConfig() returns the expected config, however...
I'm using devise on the back end, so my understanding is that I just need a minimal config like this to get started.
Please let me know what other info I can provide!
I figured it out!
I changed my config to:
function authConfig($authProvider) {
$authProvider.configure([{
default: {
apiUrl: 'http://localhost:8000/'
},
user: {
apiUrl: 'http://localhost:8000/'
}
}]);
}
in getConfig e was undefined, so return t[this.getCurrentConfigName(e)] was returning 'user', but I had no config named 'user', so 'undefined' was returned. Adding a named config fixed this issue since t here is an object with keys that are the names of your config values.

Resources