The angular-cli is a command-line interface that comes with the Angular framework. It allows you to generate new projects with a single command, and it has many other useful features as well.
It also has its own built-in server that can be started with the serve command. This server is lightweight and incredibly quick to start, making it perfect for developing projects.
The only problem is that you have to be inside of an Angular-Cli project in order to use the serve command. If you are trying to use the serve command in your root project directory, then you are out of luck. There is no server for you!
You have to create an individual subdirectory within your project in order to use the serve command. This can get a little tricky if you are not aware of it.
How to use the serve command
The create command creates an application structure for you. You can then use the serve command to test your application. The serve command requires the Node Package Manager to be installed.
You must be inside of the project directory in order to run the serve command. This is because it needs the package.json file, which is in the root directory.
To test your application, simply type ng serve into the terminal, and NPM will install all of the dependencies needed for your app. It will then start up a web server on your specified port and display a welcome page. You can then navigate to your website using your browser and see if it works!
If you would like to see what files are created by the create command, you can check out this article.
Creating a new Angular project
To create a new Angular project, you need to go into your projects directory and use the ng new command. This will create a new folder with the name you specify and set up the needed files for an Angular project.
You must be in the project directory in order to use the ng serve command. If you are in a parent directory, the server will not be able to find the files it needs to run.
The best way to solve this is to add a .gitignore file with an entry for the dist folder. This will prevent Git from checking it into your repository, which will then prevent others from having to download it when they try to set up your project.
You can also add an entry for the index.html file in the dist folder so that you do not have to delete it when adding it to git.
Using the serve command
The next thing you need to know about the serve command is how to use it. You can use the serve command in two ways:
With a project directory as an argument- this will start a development server at your project directory URL. For example, if your project directory is /my/project/ , then the URL will be /my/project/.
as an argument- this will start a development server at your project directory URL. For example, if your project directory is , then the URL will be /my/project/. With a dist (short for distribution) folder as an argument- this will start a production server using the assets in your dist folder. For example, if your dist folder is /my/distribution/folder/ , then the URL will be /my/distribution/folder/.
As mentioned before, you can either run npm run watch or npm run build to go through the asset compilation process.
Understanding the structure of an Angular project
Now that you know how to create a new Angular project, let’s take a look at the structure of an Angular project. As mentioned before, you have to be inside of an Angular-cli project in order to use the serve command.
The default location for your projects is the Projects folder in your user directory. When you create a new project using the angular-cli, it creates a new folder with the name you specified and adds several files and folders.
The main components of an Angular project are:
src: contains all of the source code for your application including components, services, models, and routes; index.html: the file that is loaded in a browser when your app is launched; tsconfig.json: configuration for TypeScript compilations including target browsers and excludeFiles; ts: contains all of your TypeScript files; assets: contains all non-code files such as images or JavaScript files that will be compiled into bundles during the compilation process; node_modules: contains all external dependencies required by your app.
Understanding the generate command
The generate command is used to create files and services within an Angular project. It is also used to create components, routes, and classes.
The generate command uses the following syntax: ng generate [name] [filename] [route|component|class|service].
For example, to create a file called person.service.
Understanding the new .angular-cli.yml file
The new .angular-cli.yml file is the file in which you set up and configure your app. It replaces the old .angular-cli.json file, which only configured the app.
This file is where you set up your environments, build configurations, and project dependencies. Dependencies are added via yarn or npm, depending on which you use for package management.
The environment section of this file lists all of the environments that your app supports, such as development, testing, and production. You can also add custom environments if needed.
Configuration for tools such as Test Driven Development, Code Coverage, and End to End Testing are also set in this file. These are all enabled by default so that you do not have to put in additional work to disable them.
Understanding the build process
The next stage of the workflow is understanding the build process. The build process takes your code and runs it through a series of pre-defined steps to produce the final, deployed app.
These steps include things like optimizing your code, adding source maps, creating a server application using the Express framework, adding environment variables, and more. You can read more about these steps here.
The important thing to note is that the build process doesn’t actually deploy the app to a server – it only creates the file that contains the app. The deploy step comes after this, when someone clicks on the “Deploy to Host” button in the UI.
This is why you have to be inside of an Angular-Cli project in order to use the serve command – because only then does it run through all of these steps and create the file that gets deployed.
What if I want to use a regular HTML file?
If you want to use a regular HTML file instead of an Angular CLI generated project, you have to be inside of an Angular project in order to use the serve command.
You have two options if you just want to test your HTML files: You can create a separate project using the Angular CLI and then add your HTML file as a separate component, or you can add your HTML file as a component in an existing project using the Angular CLI.
The first option would require you to know how to use the Angular CLI and how to create projects with it. The second option would require you to ask someone who knows how to use the Angular CLI.
Either way, you would have to be inside of an existing project created using the Angular CLI in order to use the serve command.
