I have published a git repo (https://github.com/GeorgeFlorian/Forkify-App) to Netlify (https://forkify-jorje.netlify.app/) after following an Udemy tutorial:
Everything works locally, but when I deploy it I get
Uncaught ReferenceError: Fraction is not defined
at View.js:96
Fraction is not even inside View.js module: https://github.com/GeorgeFlorian/Forkify-App/blob/main/src/js/views/View.js
It is inside another one: https://github.com/GeorgeFlorian/Forkify-App/blob/main/src/js/views/recipeView.js
I don't know how to recreate this bug. All I did was follow the tutorial. The tutor's deployment worked, mine did not.
This is package.json:
{
"name": "forkify-app",
"version": "1.0.0",
"description": "",
"default": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html --dist-dir ./dist"
},
"repository": {
"type": "git",
"url": "git+https://github.com/GeorgeFlorian/Forkify-App.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/GeorgeFlorian/Forkify-App/issues"
},
"homepage": "https://github.com/GeorgeFlorian/Forkify-App#readme",
"devDependencies": {
"#parcel/transformer-sass": "^2.0.1",
"parcel": "^2.0.1"
},
"dependencies": {
"core-js": "^3.19.2",
"fractional": "^1.0.0",
"regenerator-runtime": "^0.13.9"
}
}
I can't find anything relevant online and that's why I've posted here.
I got the same error, did the same JS Udemy course by Jonas lol. I found out the problem has to do something with parcel hoisting. Insert --no-scope-hoist in front of the build command like this & try
parcel build index.html --no-scope-hoist
Use a different package Fracty instead of Fractional
For some reason, none of those 2 packages mentioned are working at this time. For those encountering the same issue, uninstall Fractional and deploy again. It will work, but another solution needs to be applied to cover for the uninstalled package
npm un Fractional
then
git add -A
git commit -m 'Removed Fractional'
then
git push origin master
Test and all app functions should be back to normal, as tested on local, but the fractional features that you'll have to replace.
i'm trying to upload a javascript nodejs project to Heroku.
Localhost works perfectly but when i try to upload it gives me a unable to parse error at :
...
"engines" : { "node" : ">0.11.9" },
...
The Error Message : Invalid numeric literal at line 12, column 0
Full JSON File:
{
"name": "browsergameprojecz",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"express": "^4.16.3",
"mongojs": "^2.6.0",
"socket.io": "^2.1.1"
},
"engines" : { "node" : ">0.11.9" },
"devDependencies": {},
"scripts": {
"start": "node app.js"
},
"author": "",
"license": "ISC"
}
there are Linters for that, eg. the Package JSON Validator
... which lets one inspect the validity of such JSON files.
besides Node 0.11.9 is roughly 5 years old and tagged as unstable
... consider upgrading, while this is possible in combination with the rest.
there might be Windows line-ending in that file ...as it often is the case, when "everything looks fine", but still not works are excepted. dos2unix can be used to fix them.
https://techblog.dorogin.com/writing-cross-platform-npm-scripts-on-windows-79c510339ea6 hints for, that when files have a UTF-8 BOM 0x EF BB BF at the beginning, this also makes it un-parse-able. unless checking this with a hex-editor, one can not know. simply creating a new package.json with UTF-8 endoding and UNIX \n line-endings should resolve the issue.
This is from the official npm docs. It looks like you need a range for a version not just a lower limit. Or an approximate version. However from my experience with Heroku I have never needed this it seems heroku will probably use a node version much higher. Also if you need a specific version there is such a thing called engineStrict which you can have a look at in the official npm docs.
When the data is upload to the client from the server side in JSON format, some special characters can not be displayed directly when the JS is displayed on the HTML page. As the background is passed through the <b>msg</b>, it is displayed in the HTML page msg by JS, and it is not msg. This is due to the content between < and > as HTML. Tagging, and start with HTML as entity, so the display is not normal.
The solution is simple, and can be rendered before JS is rendered to HTML pages.
Issue
When I include any 'require' statements in a google cloud function, I get the warning: "Function is active, but the last deploy failed"
Solution ?
I'm pretty sure I need to include dependencies in the package.json file, but I don't know what dependencies to include, or how to write that.
Background
I've built an android app in Java and I'm trying to integrate stripe payments. Stripe requires me to have a server handle the requests, but I'm trying to use google cloud functions instead (so I don't have to pay / manage a server).
I'm trying to follow this example, but it's not working. The author didn't include the package.json file and I'm not sure what dependencies to put in there. I've never written java script before, my background is in python, c++, java.
I've looked at this tutorial from google as well as the google docs on writing cloud functions. I've also searched S.O. and can't find a solution. The problem may be that I'm not a javascript developer. I'm trying to just plug and play someone else's code to make one specific part of my android (java) app work.
Troubleshooting
To troubleshoot, I used the "helloWorld" example provided by google. The Hello World function works find by itself. If I add any of these three require statements at the top, I get the warning: "Function is active, but the last deploy failed"
Code
-- index.js
var app = require('express')();
var http = require('http').Server(app);
var stripe = require('stripe')(
"your_stripe_key"
);
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
//initiate a one-off charge for a customer
exports.chargeCustomer = app.get(".../charge/:customerid/:token/:amount", function chargeCustomer (req,res){
stripe.charges.create({
customer: req.params.customerid,
source: req.params.token,
currency: 'usd',
amount:req.params.amount
},function(err, charge) {
if(err) {
return res.send(JSON.stringify(err));
}
res.send(JSON.stringify(charge));
});
});
-- package.json
{
"name": "sample-http",
"version": "0.0.1"
}
Notes
If you know what I'm doing wrong, please remember I've never written javascript. I don't think I'm asking a duplicate question, I've searched, but its possible the answer is in another question and I'm just not understanding it because I've never written javascript.
I wrote the repo that you referenced in your question above. The problem is that you are not formatting your package.json file correctly.
When you deploy your functions, you will need to deploy your index file and a corresponding package.json. You can deploy either through command line, or by simply using the Google in-line editor in the Cloud Functions product.
The package.json file specifies the dependencies that your code needs to run. Basically, your index file needs to know which 3rd party libraries to require for it's functionality. You will notice in my example code below includes a small node for "dependencies", which will tell Google Cloud Functions which packages to install with your code.
The specific index file you reference is creating a charge via Stripe. I use a variation of this code in many production products, and the package.json file looks like this:
{
"name": "createCharge",
"version": "1.0.0",
"description": "create and charge in Stripe",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Your Name",
"license": "ISC",
"dependencies": {
"express": "^4.14.0",
"stripe": "^4.4.0",
"body-parser": "~1.13.3",
"async": "^2.0.1",
"promise": "^7.1.1"
},
"engines": {
"node": "4.1.1"
},
"repository": {
"type": "git",
"url": "<path/to/your/repo.git>"
}
}
Also, just so that you are aware, the "repository" chunk of the above javascript is not required, so if you don't have a hosted repo for this specific function, feel free to delete it.
Hope this helps!
Here is an example with a package.json, it's mentioned in this documentation. I will past an example of its contents:
{
"nyc": {
"exclude": [
"build/src/apis",
"build/test"
]
},
"license": "Apache-2.0",
"dependencies": {
"google-auth-library": "^1.1.0",
"qs": "^6.5.1",
"string-template": "1.0.0",
"uuid": "^3.1.0"
},
...
}
also consider reading npm.js' documentation as package.json is generic and isn't Cloud Function specific.
I am trying to open, build and run someone else's Angular 4 project but I am not able to view the project when I run it my way. I don't see what is going wrong or what I should do now. I already had everything in place to use NPM and NodeJS
The steps I took were:
Open up the project
npm install
ng serve
The project compiles the right way. (I have an own Angular app and I know how this looks like) The console is showing:
'** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **'.
Then, when I opened up a web browser, I navigated to localhost:4200 and a web page with the following text were shown:
'Cannot GET /'
And on the console was the following text:
'GET http://localhost:4200/ 404 (Not Found)'
The project should work fine but I am not able to navigate to a working URL on the web page. Routing is set-up another way as I am used to doing this. In app.module.ts the following is implemented:
app.module.ts
const appRoutes: Routes = [
{ path: '', redirectTo: 'tree', pathMatch: 'full' },
{ path: 'admin', component: AdminPanelComponent, canActivate: [AuthGuard],
children: [{path:'', component: PanelComponent},{path: 'add', component:
AddTreeComponent}, {path:'manage-trees', component:ManageTreesComponent},
{path:'manage-users', component: ManageUsersComponent}, {path:'view-trees',
component: ViewTreeComponent}]},
{path:'tree', component: TreeComponent},
{path:'error', component: ErrorComponent},
{path:'unauthorized', component: UnauthorizedComponent},
{path:'login', component: LoginComponent},
{path:'entire-tree', component: EntireTreeComponent},
{ path: '**', component: PageNotFoundComponent },
];
Also opening up a web page like; localhost:4200/tree does not work. When I let angular stop serving the web page, the web page displays: "this site can't be reached'. So I think there is running something at localhost:4200... Also, another project of this person behaves the same way.
Does anybody know what is going on?
EDIT
app.module.ts
RouterModule.forRoot(appRoutes, { useHash: true })
Package.json
{
"name": "xxx",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.0",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"angular-oauth2-oidc": "^1.0.20",
"angular-polyfills": "^1.0.1",
"angular2-jwt": "^0.2.3",
"angular2-spinner": "^1.0.10",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ngx-bootstrap": "^1.8.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.2.4",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "2.5.45",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
I also see an icon next to the tab name with the label: "Error".
OBSERVATION:
New observation:
After I ran npm install -g angular-cli I wasn't able to run ng serve. (You have to be inside an angular-cli project in order to use the build command after reinstall of angular-cli)
Then I ran npm install -g #angular/cli#latest and I was able to use ng serve again.
OBSERVATION 2:
After building the app with: 'ng build ...' there is no index.html in the 'dist' folder... When I set the website online, there is just a folder structure instead of a nice website. I think that's because there is no index.html.
The way I resolved this error was by finding and fixing the error that the console reported.
Run ng build in your command line/terminal, and it should display a useful error, such as the example in red here: Property 'name' does not exist on type 'object'.
For me it also was problem with path, but I had percentage sign in the root folder.
After I replaced %20 with space, it started to work :)
The problem was that I ran the commands within the folder /project/src/app. Navigating back to the project folder so to /project and running ng serve from there solved my problem.
I had the same error caused by build errors. I ran ng build in the directory of my application which helped me correct my errors
I had the same problem with an Angular 9.
In my case, I changed the angular.json file from
"aot": true
To
"aot": false
It works for me.
Check if in index.html base is set
<head>
<base href="/">
...
</head>
I was using export class TestCalendar implements OnInit{} but i did not write the function
ngOnInit() {
/* Display initial */
}
. After running the command ng serve , i found out that i was not using ngOnInit(){} . Once i implemented, it started working fine. Hope it helps someone.
Just figured out the reason when we type "ng serve" INSIDE OUR PROJECT..
for example C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve
could not resolve module C:\Users\EdgeTech1\Desktop\C
results: failed compiled
root cause:
My folder name was C# Project..
Note: I tried to remove the # in my Project Name, I rename C# Project to CSharp instead and I tried to open cmd prompt again, typed the same thing..
for example:
C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve
and my project compiled successfully.. so as much as possible avoid ASCII characters in naming projects files.
I had the same problem with an Angular 6+ app and ASP.NET Core 2.0
I had just previously tried to change the Angular app from CSS to SCSS.
My solution was to go to the src/angularApp folder and running ng serve. This helped me realize that I had missed changing the src/styles.css file to src/styles.scss
I was referring to one of my provider with two different casing. One of them was wrong but only the webpack compiler was complaining. I had to step into the ClientApp folder and use ng build or ng serve to see the errors. (ASP.NET Core SPA with Angular 5)
Check baseHref is set to "/" ( angular.cli )
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"baseHref": "/"
if it didn't work, check if your base href in your index.html is set to "/"
For me the issue was with #Component Selector path was pointing to wrong path. After changing it solved the issue.
#Component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html',
providers: [ToolbarService, GroupService, FilterService, PageService, ExcelExportService, PdfExportService]
})
This error can apparently happen for a number of reasons. Here is my experience for those who land here after searching for "Cannot GET /"
I experienced this error when I installed ng-bootstrap v6 into an Angular 8 project. I downgraded ng-bootstrap to v5 and it seems to be okay now, since ng-bootstrap v6 is only compatible with Angular 9.
This happened while working in Visual Studio 2019 with the Angular .NET Core template. At the same time, the output panel of Visual Studio displayed this esoteric sounding error: "TS1086: An accessor cannot be declared in ambient context," which led me here, which, after a little reading, made me think it was a versioning issue. It appears that it was.
I fixed it by changing "#ng-bootstrap/ng-bootstrap": "^6.0.0"," to "#ng-bootstrap/ng-bootstrap": "^5.0.0" in the package.json file and rebuilding.
if you changed any name or file component , check if it is the right name
#NgModule({
declarations: [
NewNameComponent
],
imports: [
CommonModule,
],
exports:[
NewNameComponent
]
})
export class YourModule { }
Generally it is a versioning issue. Node.js v8 cannot compile with angular-cli 6.0 or later. angularcli v6 and above will work for lastest node versions. Please make sure if your node version is v8, then you need to install angular-cli upto 1.7.4.
enter ng -v command in cmd and check the cli and node versions.
See this answer here. You need to redirect all routes that Node is not using to Angular:
app.get('*', function(req, res) {
res.sendfile('./server/views/index.html')
})
You can see the errors after stopping debbuging by choosing the option to display ASP.NET Core Web Server output in the output window.
In my case I was pointing to a different templateUrl.
First, delete existing files package.lock.json and node_modules from your project.
Then, the first step is to write npm cache clean --force. Second, also write this command npm i on the terminal. This process resolve my error. :D
Many answers dont really make sense but still have upvotes, makes me currious why that would still work in some cases.
In angular.json
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"deployUrl": "/",
"baseHref": "/",
worked for me.
For me the problem was that I had saved my project folder under C:\Users\... which indeed is a problem. After I saved it under C:\ then npm install and ng serve --open it worked just fine!
In my angular.json file the deployUrl was set to static/ang.
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"deployUrl": "/static/ang/",
....
This was causing my application to get served from localhost:4200/static/ang
Removing deployUrl fixed it for me.
EDIT:
I shifted deployUrl to under configurations since it was important when building for production. (Since my lazy loaded chunks were not getting served on the static url).
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
....
....
},
"configurations": {
"deployUrl": "/static/ang/",
Bumped into same issue, I tried this:
-ng build
And it worked!
Another problem may be that you're importing the component instead of it's module.
imports: [
YourComponent, // <-- Should be YourComponentModule
]
For me the problem was that the Angular project was not getting compiled when executing because of some undelared variable in the ts file which was binded to an html tag.
You can use ng serve --verbose true to display the build log in terminal to check where the application is breaking.
The weird thing that I was experiencing was that I could make changes to the components in Visual Studio 2019 while the app was running and see my changes but, when I restarted the app, I got the Cannot Get / error. Instead of running IIS Express, I chose to run the app using Angular JS and the build window showed me that there was an error in app.component.ts. It turned out to be an extra } at the end of the file. Not sure how it got there but, when I removed it, the app works fine.
For me the issue was that my local CLI was not the same version as my global CLI - updating it by running the following command solved the problem:
npm install --save-dev #angular/cli#latest
Deleting node modules folder worked for me.
Delete the node modules folder
Run npm install.
Re-run the application and it should work.