This document provides an overview of the Angular CLI (command line interface), which is a tool that helps generate and maintain Angular applications. It discusses how to create a new project, run it locally, run tests, and generate components, services, and other code artifacts using the CLI commands like ng new, ng serve, ng test, and ng generate. It also covers installing third party libraries, building the app for production, and some other advanced features of the CLI.

1. Getting started with
Angular CLI

2. Sasha Vinčić
Digital Viking

3. servitant.se

4. ngVikings
The Northernmost Angular Conference
February 11-12, Copenhagen
ngvikings.org

5. Angular CLI
A command line interface for Angular

6. Why Angular CLI?
• Easy to create
• Works
right out of the box
• Follows best practices
Photocred: Malmö Eastern egg, Susanne Nilsson, CC BY

7. Angular CLI

8. Lets start
• ng new
Create a new project
• ng serve
Start it
Photocred: Double powered start, flickr.com/brandsvig, CC BY

9. Lets test
• ng test
Runs test suite
• ng e2e
Runs end to end tests
Photocred: Lego People, Peter Dutton, CC BY

10. ng generate
• ng g component main-header
MainHeaderComponent
• ng g service login
LoginService
• ng g module shared
src/app/shared
Photocred: Wheel of Malmö, Frank Scmidt, CC BY
Components, Services and Module

11. ng generate
• ng g interface shared/city
app/shared/city
• ng g class shared/models/user
app/shared/models/user
Photocred: Non Human Device, Boris Chimp, CC BY
Interfaces, Classes

12. 3rd Party lib installation
npm install @ng-bootstrap/ng-bootstrap
import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Photocred: Enlightenment, Camilla Nilsson, CC BY

13. Global lib installation
npm install bootstrap@4.0.0-alpha.5
“styles”: [
“../node_modules/bootstrap/dist/css/bootstrap.css
]
Photocred: Enlightenment, Camilla Nilsson, CC BY

14. Under the hood
Angular 2.1.0
Webpack 2.1.0-beta
TypeScript 2.0.3
karma, less, sass, tslint
Photocred: Pop the hood, Jesper Yu, CC BY

15. new projects
• ng new —prefix=ngmalmo
• ng new —style=sass
• ng new —style=less
• ng new —skip-git=true —skip-npm=true
Photocred: Stamps, Michelle, CC BY

16. More features
• ng init —mobile true
• ng g route
• ng completion 1>> ~/.bashrc 2>>&1
• ng github-pages:deploy
Photocred: Toolbox, Florian Richter, CC BY
some disabled

17. building
ng build -prod
ng build -t production
ng build —target=production
Build for production
Photocred: Ikea, Junky Pamies Alcubilila CC BY

18. Faster
ng build —aot=true
Faster & “smaller”
Photocred: Mellisuga helenae, Ekaterina Chernetsova CC BY

19. Proxy
proxy.conf.json
{
“/api”: {
“target”: “http://localhost:3000”,
“secure”: false
}
}
Photocred:réfraction champêtre, Hervé Laville, CC BY

20. AngularJS Malmö
Meetup
Go now to www.menti.com and use the code 80 19 01
Photocred: In the city, Maria Eklind, CC BY