This article will explain, how to create a starter project for angular using angular CLI. We will use our recommended steps to generate a new project, which will help for future
Generate a new project
Setup development environment
To set up your development environment, follow the instructions in Setting up the Local Environment for Angular
Generate a new workspace and the initial project
When you create a new project, CLI will automatically generate a new workspace for you.In this command, we used few parameters
Open a console window and enter the following command
ng new ciemasen-angular-starter --strict=true --routing=true --style=scss
- ciemasen-angular-starter: this is the name of the workspace and the project
- strict: Creates the workspace with stricter type checking and build optimization options. TypeScript code will enable strict mode. This will reduce the angular bundle size.
- routing: This will generate the routing module. If you haven't provide this value, CLI will prompt you to enter
- style: This will use scss for the styling. You can provide any of css,scss,sass,less or stylus as the value. In this example, we used scss If you havn't mention this parameter, CLI will prompt you with the available options
Compile the project
Go to the workspace directory and run following command in the console window.You can build the code in production mode by passing
--prodparameter to build command
Serve the application
Go to the workspace directory and run following command in the console window.You can pass
--openparameter to serve command which will automatically open the browser for you.
Now we have angular starter project created. You can move forward and start creating the content you want.
However, There are situations where we have to create multiple angular projects, let's see how we can accommodate that.
Workspace with multiple projects
To create a empty workspace, you can use following command.Now we have an empty workspace created and now we can add projects to that.
ng new ciemasen-angular-starter --createApplication=false
Generate a project
Go to the workspace directory and run following command in the console window.you can repeat the same command with different project names to add multiple projects to workspace.
ng generate application my-first-app