Recently I wrote about how good angular works with .net core. And since I already went through that exercise I decided to share some of my experience with the angular CLI and how to get angular up and running.
First thing first we need typescript.
If you don’t have typescript installed you can do it by
$ npm install -g typescript@latest
However if you do have it, I strongly recommend to update it to the latest version by
[simterm]
npm update -g typescript
[/bash]
Next step is to install the actual angular cli
npm install -g @angular/cli
And after that to verify that the CLI is installed by typing
ng -v
Now that we have the CLI available it is very easy to get our new angular application up and running. The CLI itself has a lot of options and can be used for a lot of things. The complete reference for it, with all options can be found on https://github.com/angular/angular-cli/wiki/new Or another way to find out more about the CLI is
ng --help
It is quite simple to create new angular app at this point, but there are still a few options to keep in mind. For example any of the commands below will create a new app. But what is important noting is that –skip-install make it so it doesn’t actually install all the dependencies, which usually takes a while and that –dry-run makes it so it doesn’t create anything what so ever, but only prints what it would normally create like file structure if you leave out “–dry run” , this is actually quite useful because you don’t want to install of the dependencies and configure everything and then to realize that you missed something and to have to do it all over again and wait again and again. A really cool parameter is ” –routing ” which makes it much easier to add routes to your angular app.
ng new myapp ng new myapp --dry-run ng new myapp --skip-install ng new myapp --routing --prefix wisp --skip-tests --skip-install --style scss
Once the application is created you can very easily create new components. For example:
ng generate component customer ng generate component modals/modalLogin ng g c customer
Also creating new service is just as easy:
ng generate customer-model ng generate service customer-data ng g s sales-data -m app.module
Generating a new module is again in a similar way using:
ng g module admin --routing
Now when it comes to starting your application, the traditional way npm start, but there are few other ways to do that as well, which provide options for whether or not to reload the content on change, or to open the app on specific port.
ng serve -o ng serve --open ng serve --live-reload ng serve -lr ng serve -lr false ng serve -p 8626
When it comes to linting, the angular CLI has a cool command:
ng lint --fix
The best way of development new angular applications is using the Angular CLI, but if you have a good reason to continue developing the application specifically without the CLI, you can basically do that also using
ng eject [/simterm] <!-- --flat --inline-template --inline-style --view-encapsulation --change-detection --prefix my (will prefix the component with 'my') --spec false (dont create a spec file) -d (dry run, no files created) !--> Finally when you are done developing your angular app and when it is time to prepare it for deployment, that is quite easy with the CLI. The only thing for me which was quite interesting was the AOT compilation with angular, but unfortunately I couldn't get it working with my project because of custom attributes. Those are few ways how to make deployment build: [bash] ng build --prod ng build --env=prod ng build --prod --env=prod --aot=false
Recent Comments