Bootstrap your Angular project with Angular CLI

Bootstrap your Angular project with Angular CLI

In order to facilitate the creation of a new Angular project, it is possible to use the Angular CLI. Angular CLI is a CLI providing functionality to bootstrap, upgrade and serve your Angular app. Today we will see how we can use Angular CLI to improve our workflow.

  1. Bootstrap a new project
  2. Creating new components
  3. Serve the application

1. Bootstrap a new project

Start first by installing Angular CLI with the following command:

npm install -g @angular/cli

After the installation, the cli should be available globally via the ng command. You can try it with ng help. To bootstrap a project, we use ng new my-new-project. We can also specify some options, here we specify that we want to skip the tests creation which is set to true by default, we want inline style and inline template.

ng new my-new-project --skip-tests --inline-style --inline-template

This creates the simplest Angular app. We have the main module app.module.ts and component app.module.ts.
In order to build the project we can use ng build.

2. Creating new components

AngularCLI also helps in creating all the boilerplate needed for creating components.

ng g my-component --flat -is -it

Here we specify -is for inline style and -it for inline template both are short forms for --inline-xxx. Other than component, we can also use this command to create directives, services, pipes and guards.

3. Serve the application

We can then try out the app using ng serve. The app is served by default on localhost on the port 4200.

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **

Our application will run and the source code will be watched too therefore every changes in the code will provoke a recompilation and update of the browser.

Conclusion

AngularCLI makes life easier for developing Angular application. It also handle test generation and execution which I haven’t covered. A full list of command can be found by doing ng help. Hope you liked this post as much I enjoyed writing it. See you next time!

Comments

Post a Comment

Popular posts from this blog

Microsoft Orleans logs warnings and errors

Microsoft Orleans logs warnings and errors Microsoft Orleans is a framework which helps building distributed system by implementing the actor model together with the concept of virtual actors, taking care of availability and concurrency. If you are unfamiliar with Microsoft Orleans, you can look at my previous blog post explaining the benefits of Microsoft Orleans . Even though Orleans promises to abstract the distributed system problems, there are instances where errors arise without us being able to understand what is going on. Lucky us, the logs are well documented… but only for those who can decrypt them. Today I will go through some of the errors and warnings which can be seen from silo and client so that you too can undestand what is going on. Enjoy! The code used to produce those errors can be found on my GitHub https://github.com/Kimserey/orleans-cluster-consul . 1. Client logs Logs on client appears with address {ip}:0 . 1.1. Can’t find implementation of interface An un...
Keep reading

A complete SignalR with ASP Net Core example with WSS, Authentication, Nginx

SignalR with ASP Net Core SignalR is a framework from ASP NET Core allowing us to establish a two way communication between client and server. This two way communication allows the client to send messages to the server but more importantly allows the server to push messages to the client. SignalR makes use of Websocket when available else it falls back to SSE or pulling. Today we will focus on how to setup SignalR to work with WSS, Websocket secure and how we can authenticate the user requesting to connect to our SignalR hub via Webscoket. Getting started with SignalR SSL encryption for Websocket Secure WSS Websocket Authentication with Identity Server 4 SignalR behind Nginx 1. Getting started with SignalR The Hubs are the main components of SignalR. It is an abstraction of a two way communication available for both client and server. Public functions from the hub can be called from the server code and can be called from the client. The frontend NPM package @aspnet/signalr ...
Keep reading

SDK-Style project and project.assets.json

SDK-Style project and project.assets.json Last week I encountered an issue with MSBuild while trying to run it from command line. The issue did not appear when using VisualStudio right click + build but only appeared when using msbuild.exe CLI directly with a clean project. Assets file 'C:\[...]\obj\project.assets.json' not found. Run a NuGet package restore to generate this file. When I first saw the error, few questions came to my mind which I will share today in 3 points: Overview of project.assets.json Slim SDK-Style project Mixing SDK-Style project and old projects Special shoutout to @enricosada who provided me with all the answers regarding the SDK-Style project. 1. Overview of project.assets.json project.assets.json lists all the dependencies of the project. It is created in the /obj folder when using dotnet restore or dotnet build as it implicitly calls restore before build, or msbuid.exe /t:restore with msbuild CLI. To simulate dotnet build (re...
Keep reading