Angular CLI stands for Angular Command Line Interface and it’s a very good tool for creating angular applications. It will save you a lot of time when creating your projects, components and adding new controllers or services, etc.
Now that we have a basic idea of angular cli, we are going to create a small project to see how it works.
This is available as an NPM package, so the first thing we are going to do is:
npm install @angular/cli
The next step is to create a new project, using:
ng new angular-example
This will create a folder named
In that folder you’ll have the following structure:
If we look inside the src subfolder we will find the main implementation parts:
the app subfolder is where all the components, controllers and services are going to be, so lets create one of each using the next commands:
To create a new component use:
ng generate component <component-name> or ng g component <component-name>
In our example we created:
ng g component first-component
This command will create this new component but it will also import it and inject it in the app.module.ts.
Now supose, we want to create a component inside another one, for that you need to include the path where this new one has to be created, like this:
ng g component first-component/second-component
The result will be:
In a similarly way, you can create services, interfaces, etc. You only need to replace the word component like below:
ng g service my-component
Now, to run our app we only need to execute the ng serve command. Once this is finished,
we can access our app using the following url: http://localhost:4200, you will see something like this:
As you can see the default port is 4200, if you want you can change it, follow this example:
ng serve --host 0.0.0.0 --port 4201
Another useful commands are related to the deploy of your project. If you look into the enviroment folder, you will notice that there are two files:
One is for test enviroment and one is for production. In these files you can do some configurations, for example you may want to use different webapi depending on the enviroment you will do the deploy.
So, to use these files in the build process, you need to run:
and for test just: