Folder structure for Angular and Nodejs - node.js

I am going to create an app which deals with Angular5(front-end), Nodejs(middle-end) and MongoDB(back-end).
Below is the folder structure:
Package.json: "start": "ng build & node server.js"
Now when I am start the app by npm start, It throws the following error:
"Unable to find any apps in .angular-cli.json."
I hope node server is looking for this file to load angular codes. But it lies inside angular folder.
If I place both angular and node codes in same place, it works well.
But it looks more clumsy and a bit confusing. I don't want to compromise with my folder structure.
Can anyone please help to achieve the app working on the same folder structure that I would prefer?
Thanks in advance.

it might be that your global #angular/cli installation got corrupt. You may try a cache clean and reinstall..
npm cache clean
npm -g i #angular/cli

If you use angular cli for creating the project, then looks something wrong in the package.json, (as I seen your comment on the previous answer)
first uninstall angular cli if already install by using
npm uninstall -g #angular/cli, then npm install -g #angular/cli after cli installation ng new [project name /folder name]
cd [project name /folder name]
ng serve --open
try once.

I got this same error in my current project and was confused because I'm running the application / ng serve in one terminal, but got this when I tried to generate a component from another terminal. .angular-cli.json was already there and correct. So what gives?
I realized that I used the shortcut to open VisualStudio Code's internal terminal -- which opened the terminal to the *root of the project * (like most IDEs). The project contains other things in addition to the Angular application folder that has the .angular-cli.json file in question. I just had to cd to the right folder and run ng g c again and things were fine.
In my case it was just a silly error. I thought I'd come back to share in order to save people a real headache for something so simple. I see that Shiva actually has mentioned this above, but I thought I would give a bit more detail so it doesn't get overlooked.
Reference URL: How to generate .angular-cli.json file in Angular Cli?

Related

Node.js is causing error: Missing script: "start"?

I just started studying front-end development and I'm struggling with a node.js error.
Typing 'npm start' in my VSCode terminal used to work fine for simple tutorial projects with just an index.html, script.js, and style.css file. (without a package.json file)
However after trying out React for the first time, 'npm start' now doesn't work anymore in my other non-React projects. At first it was giving me an error that it was missing the package.json (which it didn't need before?) but after trying to fix it with help of googling I now got to a point where it's giving me the error: Missing script: "start".
How can I run node without creating package.json files for every small tutorial project I've made previously, or without turning them into React apps? Also why is this happening? Did installing React-native create dependencies of some sort?
Thanks in advance!
I already tried reinstalling node.js and tried different versions. Also tried deleting package-lock.json. It still works for React apps, just not with simpler native javascript apps.
A package.json file is required if you want to install any packages or run scripts in your terminal. In your package.json file, make sure you have added scripts property. This is an example of how you can use it:
{
...
"scripts": {
"start": "react-scripts start"
}
}
Remove ... from the snippet if you're copying, this has been added to indicate that there are one or more fields in this JSON file.
After you have added this to your package file, you will be able to run the start script by typing npm run start in the terminal or if you use Yarn: yarn start.
Edit:
You said that running npm start in your React project is running fine, but on your simpler projects with only a simple HTML, CSS and JS file is not working when using the script.
You are probably confusing npm start with node file.js. Where node file.js doesn't require a package to be in your project to run a JavaScript file, using npm start requires you to have a JSON file present in your project folder with the JSON code as in my answer.
So long story short: Using npm start requires package.json with the script property available. While node file.js doesn't require you to have this file in your project.
if you are using react-native you can do the following
First you have to build your project with the command
npx react-native run-android , npx react-native run-ios
Once your project has build successfully and app is installed on your device then you your development server is started already. for some reason if your server is closed then you can run it with the command given below.
adb reverse tcp:8081 tcp:8081 this will send a signal to your device and after this run npx react-native start

Facing error while installing npm in react

I want to make a react project but when I execute npx create-react-app, it doesn't respond. Can anyone tell me what the issue I am facing here is? Screenshot.
make an empty folder then drag it over VSC, and type in terminal: npx create-react-app . (dot means in the current folder) also make sure u have node installed, type: node -v (to check what version u have)
From the official ReactJS Docs:
You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. To create a project, run:
npx create-react-app my-app
cd my-app
npm start
In the screenshot you provided, you indeed ran the command; but, it doesn’t show that you checked that the directory, visual, was created within your working directory, New folder. In addition, no error message was output; so as it stands, we know the npx command exists; and can only assume that, the command executed without error.
When using create-react-app:
A new directory will be created in the working directory (in your case, New folder) you run the command within.
This new directory will have the name of the argument you provided to create-react-app (in your case, visual).
So your directory structure you look like this:
New folder/
└─ visual/
The issue I see is that, the general output normally seen when running create-react-app (as shown here) did not appear in your screenshot; however, I’ve never ran it from MS PowerShell, as you appear to be. So you’ll want to check:
That you’re not overthinking this, and ensure that the, my-app, folder really wasn’t created;
And that your NodeJS version is either 14.0.0 or higher:
node -v
And that create-react-app was not installed globally:
To check this, run:
npm list -g
If you see create-react-app in the list, run:
npm uninstall -g create-react-app
npm install create-react-app
Or that running it from cmd (or cygwin) instead of powershell is maybe the better option.

Node JS/ Angular

I have installed Node JS and then imported an existing work project in Visual Studio Code. After that I ran npm install in the project folder, then run npm start and the app comes up fine. However, if I run an ng command I get an error telling me "ng is not valid command", even though the Angular CLI is in the modules folder.
I tried manually installing Angular CLI globally and set system path to point to the npm folder, and then the ng command works fine. What I don't understand is why do I need to install CLI globally if I just want to run that command within the project where the module is already present?
As a general rule then you will need to install globally any commands you wish to use (without NPX). This isn't really a restriction of NPM so much as it is a fundamental way in which command line programs work. The OS will only look in fixed predefined locations set in PATH. This applies to any Node based tool such as grunt or ng or whatever.
(While some systems do look for executables relative to the current working directory, or can be configured to, it's generally not a good or reliable method and NPM doesn't rely on this behaviour).
For something like the Angular CLI then installing it globally should be fine and is what many people will do. As a general rule if it is a command you want to run, rather than a dependency for a project, you can consider installing it globally. You'll notice that on the Angular CLI page the example does exactly that.
In many cases however you might want to run a command from a local project. Perhaps for a build script or something else where you want to keep it isolated. In that case you instead prefix your command with npx which will look inside the local project for commands.

Can't find the dist file

This is a noob question but when I run npm run build on a vue app I am working on, I get the following message:
rimraf dist; node build/build.js
I don't understand what that means, but worse I don't see a dist file created anywhere (which I need to run locally).
Where is it?
What does the output mean?
turns out a ";" won't work on windows, I needed to build directly through node not using a preset npm command.

Error message "ENOENT, no such file or directory"

I'm getting this error from my Node.js application:
ENOENT, no such file or directory '~/Desktop/MyApp/newversion/partials/navigation.jade'
I know the file is there because when I try to open the file using the exact copied and pasted path, it works. I also know the application is using the right directory because, well, it outputs it in the error.
I believe the previous answer is the correct answer to this problem but I was getting this error when I tried installing npm package (see below):
The fix for me was: npm init --yes
Tilde expansion is a shell thing. Write the proper pathname (probably /home/yourusername/Desktop/etcetcetc) or use
process.env.HOME + '/Desktop/blahblahblah'
I was also plagued by this error, and after trying all the other answers, magically found the following solution:
Delete file package-lock.json and the node_modules folder, and then run npm install again.
If that doesn't work, try running these in order:
npm install
npm cache clean --force
npm install -g npm
npm install
(taken from #Thisuri's answer and #Mathias Falci's comment respectively)
And then re-deleting the above files and rerunning npm install.
It worked for me!
First try npm install. If the issue is not yet fixed, try the following one after the other.
npm cache clean, then
npm install -g npm , then
npm install. Finally
ng serve --o to run the project.
__dirname
Gives you the current Node.js application's root directory.
In your case, you'd use
__dirname + '/Desktop/MyApp/newversion/partials/navigation.jade';
See this answer:
How can I get the application base path from a module in Node.js?
I had that issue using the path module:
const path = require('path');
And also do not forget to create the uploads directory first period.
Specifically, rm yarn.lock and then yarn install fixed this for me.
For those running Laravel Mix with npm run watch, just terminate the script and run the command again.
For me, it had my code folder in Dropbox on Windows 10. During the build process Dropbox would flip out over having more than 500,000 files. I moved my folder out and now it builds fine!
When this happened to me, it was when trying to run Karma tests in an Angular project. The tsconfig.spec.js file turned out to be incorrect. It was basically pointing to the wrong directory, and so the error was simply trying to tell me this.
For example, we had ../tsconfig.json instead of ./tsconfig.json, so the runner was looking for tests in the wrong folder. This may be a different use case from the OP, but the same error message brought me here and led me down the rabbit hole of trying the npm install solutions to no avail.
It usually occurs due to a mismatch in the npm version used while creating the package-lock.json that currently exist and the one you are using now.
Removing the package-lock.json and running npm install worked for me.
Sometimes you are just not in the right directory. Check that once and try "npm start" again.
Reason: I have the same issue, where a few guys work on one project and change package dependencies.
Solution: Just kill file package-lock.json and run npm i again
In my case, I was running the terminal in the wrong folder. Please make sure that you navigate to the folder containing your code (App.js and others) and then use a command prompt (for Windows) to open the code. I am using Visual Studio Code, so it is to type "code." after I have opened the command prompt in the exact folder where my code is in.
I ran into this upgrading a Phoenix app to 1.6, which does not use Node.js, so in fact it is not needed. However, elixir_buildpack.config had a reference to phoenix_static_buildpack.config, which defined node. Remove the reference, and the error goes away.
My problem was that I didn't have a package.json file in my working directory.
Another possibility is that you are missing an .npmrc file if you are pulling any packages that are not publicly available.
You will need to add an .npmrc file at the root directory and add the private/internal registry inside of the .npmrc file like this:
registry=http://private.package.source/secret/npm-packages/

Resources