I am trying to create a custom dashboard on the angular app I am building. I want to use the data from Google Analytics 4 using Google Analytics Data API. I've successfully ran the scripts provided in their tutorial Using Node.JS client libraries (https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries?hl=en_US).
I've ran the quickstart script they have provided using Node.JS and was able to get the expected response. However, when I try to ran the same script on my angular app via importing the script to fetch returned values, "ng serve" returns webpack 5 errors.
The issue was importing the BetaAnalyticsDataClient. Whenever I import it, the nodemon returns webpack errors.
The structure is like this:
simple component structure
I have a 'site-statistics.component' with its html and scss files.
I have a script named 'google-analytics.ts' inside the subfolder "services".
site-statistics.component imports an exported function from google-analytics.ts
If the issue is my usage of the Google Analytics Data API client library, I want to know how I would be able get the response from the script and send it to my angular component.
Options I've tried, but failed:
Tried adding a resolve.fallback on webpack.config.ts. However, issue still persists.
Tried setting paths to each packages on my TSCONFIG.JSON.
Tried using react-scripts-rewired
If the issue is the way I use the Google Analytics Data API client library, I want to know how I would be able get the response from the script and send it to my angular component.
Related
I'm new to the web developing stuff and currently watching on udemy a 70h course.
I like to practice new learned stuff in real world applications. Therefore I've setted up an httpd container (https://hub.docker.com/_/httpd) with a bootstrap template in it (https://startbootstrap.com/theme/sb-admin-2)
My question: how do I add new node.js modules to this template? I want to add a module to connect the website to my postgres database.
The volume I made for the httpd container is as follows: /usr/local/apache2/sb/src/:/usr/local/apache2/htdocs/
In this directory I have installed the postgres module via npm and wrote a simple javascript code in index.js. If I call index.js via node index.js from the terminal it works fine. If I try to call it from the website it doesnt work. I know I missed something important to get this module work but I can't figure it out.
Edit
It was a really simple example of using extern modules in node.js shown in udemy. I've tried to use this example in my website.
index.js
var superhero = require('superheroes');
var hero = superhero.random();
function testCall(){
// alert("just a test!");
alert(hero);
}
In index.html I call the "testCall" function as follows
<body id="page-top" onload="testCall()">
This part works well, If I put a simple string as alert, for instance "alert("just a test!");"
I want to build a dashboard to display some values stored in postgres
I'm currently building a react native app which uses async storage. I've got conditionals within the components to decide whether to make requests to the API or use the data stored in memory. So to test out these conditionals I regularly have to clear the AsyncStorage using AsyncStorage.clear().
This works if I have it in one of the components, however it would be more practical to have it in a seperate script - which brings me to my question:
I want to have a script as below:
import AsyncStorage from '#react-native-community/async-storage';
AsyncStorage.clear();
console.log('STORAGE CLEARED');
and then run it using a command like node clearStorage.js (and later an npm script).
However I'm getting an error saying 'Cannot use import statement outside a module'.
Am I missing anything glaringly obvious/trying to do something I shouldn't? I've tried changing the file type to .mjs with no luck.
If you need to do this, you can't use a nodejs script because the node script will never get to the native side, because async-storage is a native library and it connects directly to Android or IOS.
Another solution may be at the start of the application, you can run that code, or create a Button just for dev mode and when click clean the data.
and the error 'Cannot use import statement outside a module'. it's because nodeJs don't understand the syntax import AsyncStorage from '#react-native-community/async-storage'; they need a transpiler like babel.
I am writing automation using Nightwatch node js. I have a test for uploading a file in my application and testing it locally works perfectly. However, when I test it using BrowserStack, BrowserStack cannot access the file in my local machine.
I have also tried setting FileDetector but it gives error saying setFileDetector is not a function on browser object.
I know this function is available for selenium driver object but I am javascript browser object for writing test scripts.
browser.setFileDetector(new remote.FileDetector());
I see that you want to perform the File Upload Operation for a file available on your local machine. You can review the link: https://www.browserstack.com/automate/node#enhancements-uploads-downloads for more details.
In the angular2 5 min tutorial they use "system" as the module in the tsconfig. I have systemjs as a node_module but when trying to start my server I get System is not defined, from the first line of the compile js-file which looks like this:
System.register(['http', 'express', './config/index', 'path'], function(exports_1) {
Why is System undefined even though I have it as a node dependency?
I was trying to change it to commonjs, then the compiled js looks much simpler. But then I get errors in the angular application.
What am I missing in order for it to work with SystemJs?
Edit
I think I was bad at explaining my problem. When changing from importing modules into my server.ts file "javascript style" (var http = require('http');) to I guess "typescript style" (import * as http from 'http';) I start getting the error specified above. When doing it javascript style the compiled js looks just the same as the ts (var http = require('http');) however when doing it "typescript style" it gets compiled with modules being imported using System (the line of code specified above). So i'm getting this error when trying to start the node server and not in the browser.
I tried changing the compilerOption "module" to "commonjs" instead of "system" in tsconfig.json, doing that causes errors in the browser (this error, only the solutions doesn't seem to fit) for some weird reason so i figured i'd try with "system". But then I ran into the problem of not have System defined. So how do I get access to System when starting the node server?
It looks like you are missing reference to system.js in your index.html. Angular is meant to be run by browsers so its not enough to have it as node dependency, browser will not load it automatically. And of course do not try to run angular application on server side in node.js. What you want to do on server-side (node.js) is to run some web server that will serve content to the browser (http-server, lite-server, etc). And then open your index.html served by web server in browser that in turn will run angular2 application using system.js for module loading.
If you do have system.js referenced in index.html and you are not trying to run it on node.js server side - make sure the path is correct and it does get loaded - by using development tools of any modern browser.
I am working on an AngularJS application that is delivered by a SocketStream/node.js server.
I have an AngularJS service that calls api functions on the SocketStream server and progress has been good so far.
But now the time has come to start writing the first tests and the first testing framework that came to mind is Karma/Jasmine, since this is the recommend AngularJS set up.
So far so good, but since my AngularJS modules are imported using 'require' (SocketStream's version, not require.js) and server api calls are part of the test, I need to configure Karma to load SocketStream (at least its client side).
I took a good look at 'https://github.com/yiwang/angular-phonecat-livescript-socketstream' but when I run this example I get run time errors, possibly because I have later versions of variuous dependencies installed.
I managed to get 'required' resolved by packing my SocketStream app by adding 'ss.client.packAssets()' to app.js and run 'SS_PACK=1 node app.js', but when I start karma it logs an error message saying:
'Chrome 23.0 (Linux) ERROR
Uncaught TypeError: undefined is not a function
at /the...path/client/static/assets/app/1368026081351.js:25'
'1368026081351.js' is the SocketStream packed assets file. If I don't load it the error message is something like 'require is undefined', so my best guess is that the error is happening somewhere inside the SocketStream require code. Also because I run karma in DEBUG mode and can see all the files being served.
I have been trying different approaches as to find out what is happening but to now avail. So my questions are:
Is anybody else successfully testing AngularJS/SocketStream using Karma?
Does anybody have any suggestions as to how I can fix, or at least debug this problem?
Are there any alternatives/better solutions?
Time to answer, sort of, my own question:
Sort of, because I came to the conclusion that Karma and node.js/SocketStream have a lot of overlap, so I decided to see if I can omit Karma altogether and deliver the Jasmine testing platform through SocketStream. It turns out that that is possible and here's how I did it:
I defined a new SocketStream route and client in my 'app.js' file:
ss.client.define( 'test', {
view: 'SpecRunner.html',
css: ['libs/test'],
code: ['libs', 'tests', 'app'],
tmpl: 'none'
});
ss.http.route( '/test', function(req, res) {
res.serveClient( 'test' );
});
I downloaded jasmine-standalone-1.3.1.zip and copied 'SpecRunner.html' to the 'client/views' folder. I then edited it to make it load AngularJS and all SocketStream client files, like all other views:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
<SocketStream/>
I removed the 'script' tags that import the sample source files ( 'Player.js' and 'Song.js' ) and specs but let the last 'script' block in place unmodified.
I then created a new folder inside 'client/css/libs' called 'test' and copied 'jasmine.css' in there unmodified.
Then I copied 'jasmine.js' and 'jasmine-html.js' renamed to '01-jasmine.js' and '02-jasmine-html.js' but otherwise unmodified, into '/client/code/libs'.
Now Jasmine is in place and will be invoked by using the '/test' route. The slightly unsatisfactory bit is that I haven't found an elegant place to store my spec files. They only work so far if I place them inside the 'libs' folder. Anywhere else and they are served by SocketStream as modules and are not run.
But I can live with that for now. I can run Jasmine tests without having to configure a special Karma setup.