Is this Angular 2 project structure compatible with angular cli? - node.js

I'm using the following tutorial: http://jasonwatmore.com/post/2017/02/22/mean-with-angular-2-user-registration-and-login-example-tutorial
When I tried to use ng serve (instead of npm start as the tutorial suggests) I ran into the following error:
'Unable to find "#angular/cli" in devDependencies.'
Essentially I'm asking if it's possible to make this project compatible with the angular cli and if so how?
My end goal is to try and see if I could host this on heroku, and I'd like to use the "ng build" command. Is there maybe a way to get around this and host not using the angular cli?
Thank you!

ng serve is angular cli command. Angular CLI is a command line interface created for simplifying angular project setup.
Your project has to be Angular CLI project to be compatible with Angular CLI:)
Setup is very easy:
Install Angular CLI more info here. For you the one important command is npm install -g #angular/cli which will install Angular CLI globally.
Run ng new project_name which will create and setup all you need for angular 5 project (if you use the current angular cli).
From the project folder run ng serve
If you want to generate new component run ng g c component-name
If you want to generate new module run ng g m module-name
If you want to generate new service run ng g s service-name

Related

Cannot create a React Native + TypeScript app by following official directions

With the following context:
$ node -v
v14.8.0
$ npm -v
6.14.7
$ yarn -v
1.21.1
$ tsc -v
Version 4.0.2
and following the instructions here: https://reactnative.dev/docs/typescript
I tried to create a React Native + TypeScript app with the following command:
$ npx react-native init app --template react-native-template-typescript
but got the following file structure:
where you can see I don't get any .tsx file (I was actually expecting that) even when I used the correspnding TypeScript template on the creation command above.
Later on they have the section: Adding TypeScript to an Existing Project, but I didn't do the the steps there because what I want to do is not exactly add TypeScript to an existing React Native project, but just creating a React Native project with TypeScript from the beginning.
Is there anything wrong I'm doing here?
Thanks for you attention.
I'm using expo for create and develop react-native apps.
Try to install globally on your PC using this command: npm install -g expo-cli.
Then type expo init projectname and you will have this options :
Choose a template:
----- Managed workflow -----
blank a minimal app as clean as an empty canvas
blank (TypeScript) same as blank but with TypeScript configuration
tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started
minimal (TypeScript) same as minimal but with TypeScript configuration
and that will works !

Folder structure for Angular and Nodejs

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?

ng is not recognised as an internal or external command. Jenkins + Angular CLI

I am trying to setup Jenkins for an Angular CLI project. I have installed node and Angular Cli on the Jenkins server under a specific user account.
if I open a command prompt on the server an execute the following commands to verify they are installed properly, this is the result:
I have configured the project with Jenkins, and i created two build steps two execute two bat files.
One runs: npm install
and the second one runs: ng build --prod
Then I build Jenkins, it runs the npm install but it fails running ng build --prod because it says " 'ng' is not recognised as an internal or external command".
Am I doing something wrong? Is there another way to probably use the angular cli on the node_modules folder, So it does not need to use the angular cli installed on the server. It seems like Angular CLI is installed only for my user on the server but not for the user Jenkins use to build.
PS: I installed Angular CLI globally using:
npm i -g #angular/cli
No need to install angular cli on server, just run
npm run ng -- build
That will run the local version from your project devDependencies
This way you can pass any flag to your local cli npm run ng -- test, npm run ng -- lint, etc
You can pass additional flags to ng just like that
run ng -- build --prod
More details at https://docs.npmjs.com/cli/run-script
Just for further clarification when someone searches for the same problem and finds this question (as I did):
If you want to use the --prod flag while running the build command, as asked in this question, you can use:
npm run ng -- build --prod
Important are the "--" between "ng" and "build" with spacing. This is due to the syntax of "npm run", more information can be found here: https://docs.npmjs.com/cli/run-script
This also solves the problem described in a comment below the accepted answer: "This is working but its excluding the additional parameters like --test when running the build"
npm run ng -- build
we can use as this without installing angular cli
If it is working on the Local command prompt, Restart the Jenkin server.
Restart Jenkins --> http://host-name:port/base-url/restart
ex:- http://localhost:8080/jenkins/restart
If it is not working on local command as well install angular CLI globally and set the environment settings and do the previous step.
try as below.
BUILD_ID=dontKillMe nohup ng serve
The only issue with npm run ng build is it omits any other parameter like --prod or --test after build.
Following are the commands what i am using to run my angular build successfully from Jenkins.The last command is executed the dirty way by setting up the path variables. Don't know if there is a cleaner way to do this. This does execute the commands properly without omitting anything.
#echo on
cmd /c npm install -g #angular/cli#latest
echo yarn Install
cmd /c yarn
echo Build
set PATH=%PATH%;C:\Users\Administrator\AppData\Roaming\npm;C:\Users\Administrator\AppData\Roaming\npm\node_modules\#angular\cli\bin;
ng build --prod --aot=true

Angular 4, ng new doesn't create node_modules in project directory?

Just re-installed Angular and started a new project using ng new, but I couldn't execute ng serve after I made the new project and cd into it. In my Mac Mini after I ng new a new project, I can just cd into the project folder and do ng serve, in my Windows 10 I need to execute npm install first cause straight ng serve gave me error.
After I checked the project folder, its because ng new doesn't make a node_moodules in the new project and download all the required packages ( ng new executed very fast ).
Based on the documentation and most setup guides out there, after ng new we can go straightly to ng serve after change the directory to the project directory. Is there something wrong with my installation ( Node, angular, npm, etc... ) or this is normal ?
https://angular.io/guide/quickstart
I use Angular CLI 1.2.1 in the Windows 10 and Angular CLI 1.2.0 in OSX.
I am doing Angular 2 and having the same issues
Everyone out there is trying to solve the issue by suggesting solutions that worked with previous versions or maybe AngularJS
Its true you have to do npm install every time you create a new project because that creates the node_modules folder

Angular 2 Quickstart - where the files

I'm pretty new to Angular 2 and I just started to learn it. After doing this:
npm install -g angular-cli - I couldn't find on the hard drive this folder: src/app / ./src/app/app.component.ts.
My question is - in order to open the files in notepad++ - how can I locate it on my hard drive? I looked in program files / nodejs but it wasn't there
Thanks
npm install -g angular-cli has installed the angular command line.
You don't have any created project yet.
What you need to do next is run the following commands:
ng new your-app-name // create the app with angular-cli
cd your-app-name // change directory to your new angular app
ng serve // run your new angular app
Check the official site here: https://cli.angular.io/

Resources