I am relatively new to MEAN stack development having been working with it for the past few months. I have an issue I am trying to resolve that I have been researching extensively but cannot seem to get to the bottom of.
So, I have a MEAN stack application that I scaffolded using Yeomen. I created a route which has a view that I would like to show a record set using Angulars ng-repeat directive. I get the dataset via an http get call via an Angular service. However, when I run the app using Grunt I get the error:
Error: [$injector:nomod] Module 'Records' is not available!
I have put a reference to the service in my controller:
angular.module('recordsApp').controller('RecordsCtrl', function ($scope, $http, $filter, Records) {
I have also injected into it the app within the app.js file:
angular.module('recordsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'Records'
])
Can anyone please help point me in the right direction here as to what I am missing?
Thank you.
You don't need to include 'Records' module as your module dependancy, as you only have a service called Records in the same module
angular.module('recordsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
Related
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.
A Brief Backstory
I have been implementing several upgrades to an Angular 8 application such as server-side rendering, and Google Analytics. As most developers do, I would code then test then move on to the next task. Typically I use ng serve to run the application as I am developing.
With Server-side rendering, to test speed, lazy-loaded images, etc, you need to use a node express server running on a generated JS file. After building, etc, I use Node prerender (my js file is prerender.js) to see what the application will look like prerendering on the server.
When I run this command, I should not get any errors, and I know my prender file will start a local server on port 4000.
The Problem
I get errors when running a node express server that I do not get when running with ng serve I recently got an error that said:
Unhandled Promise rejection: Cannot read property 'subscribe' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'subscribe' of undefined
at new ApplicationRef (C:\4towerdevelopment\dist-stage\server\main.js:45910:37)
at _createClass (C:\4towerdevelopment\dist-stage\server\main.js:37184:20)
at _createProviderInstance (C:\4towerdevelopment\dist-stage\server\main.js:37138:26)
at initNgModule (C:\4towerdevelopment\dist-stage\server\main.js:37044:32)
at new NgModuleRef_ (C:\4towerdevelopment\dist-stage\server\main.js:38176:9)
at Object.createNgModuleRef (C:\4towerdevelopment\dist-stage\server\main.js:38159:12)
at NgModuleFactory_.create (C:\4towerdevelopment\dist-stage\server\main.js:50821:25)
at C:\4towerdevelopment\dist-stage\prerender.js:29175:43
at ZoneDelegate.invoke (C:\4towerdevelopment\dist-stage\prerender.js:481:26)
at Object.onInvoke (C:\4towerdevelopment\dist-stage\prerender.js:28683:33) TypeError: Cannot read property 'subscribe' of undefined
at new ApplicationRef (C:\4towerdevelopment\dist-stage\server\main.js:45910:37)
at _createClass (C:\4towerdevelopment\dist-stage\server\main.js:37184:20)
at _createProviderInstance (C:\4towerdevelopment\dist-stage\server\main.js:37138:26)
at initNgModule (C:\4towerdevelopment\dist-stage\server\main.js:37044:32)
at new NgModuleRef_ (C:\4towerdevelopment\dist-stage\server\main.js:38176:9)
at Object.createNgModuleRef (C:\4towerdevelopment\dist-stage\server\main.js:38159:12)
at NgModuleFactory_.create (C:\4towerdevelopment\dist-stage\server\main.js:50821:25)
at C:\4towerdevelopment\dist-stage\prerender.js:29175:43
at ZoneDelegate.invoke (C:\4towerdevelopment\dist-stage\prerender.js:481:26)
at Object.onInvoke (C:\4towerdevelopment\dist-stage\prerender.js:28683:33)
The closest this gets me to figuring what actually is causing the problem is letting me know that a provider somewhere is causing this error. Looks like something should be an observable rather than a subscription. Beyond that, I guess I just start looking through my providers. My question is:
How can I force Angular to possibly throw this error when developing using ng serve?
If I can't, is there a better way to debug this current error besides combing through each provider? Or at least a way to tell what service is causing the issue?
Thank you.
UPDATE: Basic repo with problem here. I made a new angular project, made sure dependencies were up to date, installed ngUniversal per this post, and received this same Unhandled promise message when running node prerender
Verbatim I went to to the Angular cli website, made a new project (default Angular version installed was 8.3), installed Angular Universal, and tried to build. Same error message as above.
This looks like it was ApplicationRef that triggered the error, and that class is provided internally by the Angular core.
It could be failing in the constructor of the class, and there are a few calls to subscribe on Zone observables. I don't think you're going to find anything in your source code that directly relates to this error. It looks like a build configuration problem.
https://github.com/angular/angular/blob/bb52fb798c8578c461d21aee2b7623232184a5d3/packages/core/src/application_ref.ts#L562
I do not know what could possibly produce this problem, but I would start a new project with SSR and compare the differences to your current project.
Eventually, I dropped the angular 6 approach using pre-render, and went with the latest universal package. There seems to be no problem building using npm run build:ssr and serving dist/server.js in an express server. I am not sure what the problem was with the pre-render approach, but it seems to be outdated anyways. #Reactgular thanks for the feedback.
Using ArangoDB documentation version 3.3 or version 3.4 for the Getting Started section of Foxx Microservices, I can't get past this error:
Failed to load API definition.
NetworkError when attempting to fetch resource. http://192.168.1.1:8529/_db/_system/_admin/aardvark/foxxes/docs/swagger.json?mount=/getting-started
That error is shown on the API tab of the service. After installing my service according to the tutorial, I get the service's card as described. I click that card and then click the API tab and the above error is shown.
To eliminate typos, I have tried copying and pasting the exact file contents from the ArangoDB documentation and following every step exactly, and I still get the same error.
The Info tab of my newly created getting-started service contains this info:
Author:
Mount: /getting-started
Mode: Development
Version: Unknown
Version License: Unknown License
Path: /var/lib/arangodb3-apps/_db/_system/getting-started/APP
The example contains only two files and they are:
manifest.json
{
"engines": {
"arangodb": "^3.0.0"
},
"main": "index.js"
}
index.js
'use strict';
const createRouter = require('#arangodb/foxx/router');
const router = createRouter();
module.context.use(router);
router.get('/hello-world', function (req, res) {
res.send('Hello World!');
})
.response(['text/plain'], 'A generic greeting.')
.summary('Generic greeting')
.description('Prints a generic greeting.');
The canned demo services, such as the hello-fox example, work correctly. I collected more error information:
Navigating to http://192.168.1.1:8529/getting-started
404: errorMessage "unknown path '/getting-started'"
Navigating to http://192.168.1.1:8529/_db/_system/getting-started
404: errorMessage "unknown path '/getting-started'"
The console also shows:
WARNING File not found "/getting-started": file "" does not exist in "/var/lib/arangodb3-apps/_db/_system/getting-started/APP/files".
The tutorial doesn't indicate another file named getting-started or another location for the two specified files. What am I missing?
This issue was resolved based on the helpful comments by #camba1. There was no problem with Arango, just a problem with me understanding the tutorial. For others in my position, here are the things I did not understand properly and that, when addressed, resolved my problems.
The API tab, in contrast to what the tutorial says, will give the error "Failed to load API definition" even for a correctly working service. Ignore that error message. I am not yet using the API tab at all.
the tutorial refers to two paths, '/hello-world' and '/getting-started'. These are used on the endpoint (URI) and in creating the router like below:
router.get('/hello-world', function (req, res) { ...
The tutorial wasn't as clear as it could have been on this point, but as #camba1 pointed out, the service endpoint would end up incorporating both of those elements:
192.168.1.1:8529/_db/_system/getting-started/hello-world .
this very basic demo is easier and better in my opinion when the router is created without a path:
router.get(function (req, res) {
In this case it defaults to a path of '/'. I think this may avoid confusion for raw beginners like me. The service endpoint then becomes one element simpler. In my case, the endpoint (with Arango running on another computer on the LAN) becomes:
192.168.1.1:8529/_db/_system/getting-started
The tutorial would be improved if it either added a couple extra sentences to explain how the endpoint is constructed, or alternatively, did as I suggested above and simplified things by one step.
I have an application in MVC 4.5 using VS 2015.
To this existing application, a new module has to be developed and what I'm trying is to develop this using Aurelia framework.I had fair bit of experience in aurelia framework.Hence I want to integrate our existing MVC application with Aurelia but unable to achieve this while routing.Hence posting this here in this platform.
These are the links that I went through for this purpose :
- Link1
- Link2
- Link3
- Link4
- Link5
To some extent I'm able to achieve this.From my partial view when the request is sent to main.js setRoot to app.html, this routes to app.js, but any kind of code written there results in Invalid Token Syntax error even if I write just one line of code in app.js.
Also, trying to set route in app.js results in route not found error :
This is what I tried:
Created an standalone aurelia app, wrote code in app.ts and was able
to render grid chart in corresponding html(app.html).
Created an MVC application(followed one of the above link) by adding one view , then routing to app.js through main and was able to render the page.
Also, I tried with normal routing like this in app.js.It resulted in error as cant find route.
What I'm ultimately trying to achieve is , when I click on any sub-tab(as I've Tab/Sub-tab views) and my partial view(cshtml) gets rendered, it should route to the aurelia app and render the content in that particular section with result.
Is this feasible or am I missing something here?? Any help would be highly appreciated..
In my nwjs application i am using React to build my UI. Currently, React is being loaded via a <script> tag in the main file, index.html. index.html has another <script> tag which loads main.js containing code which defines and renders my React components as well as requiring (require()) a few Node modules such as "fs" and "McFly".
This all seems to be working, however when i try using another node module (react-inlinesvg) i get an error, "document is undefined".
Having looked online for help, i have come to the conclusion that React now believes that it is being run on the server? Which is odd, as before i started using the react-inlinesvg module it was happily rendering components using React.render (clientside rendering).
If you need any more context or information then please ask.
It could be that you are rendering on the server side, or also that you are rendering both sides. In the second case you could simple nest the line that is causing you error with:
if (process.env.BROWSER) {
the line causing the error
}
If the error disappears, it means that you are on the server side also!
I hope this helps...
Basically if you code is universal (or isomorphic, if you want...) with this check you can execute the code only on client side, you want to do this to use a particular style-sheet for example:
if (process.env.BROWSER) {
require("../style/main.scss");
}
Naturally if you want to do stuff server-side you can check
if (!process.env.BROWSER) {
}
if any one face this he can solve it in 2 ways:
Solution 1: if you are using nw.js 15 or above try to enable mix context mode:
in your package.json add this flag:
"chromium-args": "--mixed-context"
Solution 2: expose document to the global object using this hack:
global.document = window.document;