Presentation slides for THAT CONFERENCE 2017. How to use angular-cli and set it up for team based development. Also other tips for developing SPA aqpplications.

3. Take Your Angular App Glamping
DENNIS MOON – THAT CONFERENCE AUGUST 7TH, 2017

4. Glamping is a
combination of
glamour and
camping and
describes a style of
camping with
amenities and, in
some cases, resort-
style services not
usually associated
with "traditional"
camping.

5. Senior software
architect and web
designer/developer
specializing in
modern ASP.NET
and JavaScript web
technology stacks
Married to Christine
Stepson Ian and future daughter-in-law Kaila
Hobbies: Guitar, Singing, Wineries, B&Bs
Passions: Technology, Music
Employer: CUNA MUTUAL Financial Group

6. My Info
Blog: https://dennismoon.com
Code Repository: https://github.com/comfycoder
Twitter: @comfycoder
Linked in:
https://www.linkedin.com/in/dennis-moon-b469b93
OneNote (Take Your Angular App Glamping):
https://1drv.ms/u/s!ArCsAhaG3htJogmm7yGnOk-gCNTZ

7. Suggested Software Prerequisites
Visual Studio 2017 (or 2015)
(recommend including C++ to support angular-cli node-sass compiler)
Visual Studio Code (great IDE for JavaScript)
Chocolatey (for Windows) https://chocolatey.org/install
◦ choco install git
◦ choco install node
Homebrew (for Mac) https://brew.sh/
◦ brew install git
◦ brew install node

8. Recommended NPM Packages
(for Windows)
https://www.npmjs.com/
npm install -g npm@latest (5.x+ for package locking, Yarn not needed)
npm install -g minimatch@latest
npm install -g graceful-fs@latest
npm install -g node-gyp@latest
npm install -g @angular/cli@latest
npm install -g rimraf@latest
npm install -g typescript@latest
npm install -g tslint@latest

9. Setup Your Site For Team Activities
Create Your New Team Camp Site
Remove The Lint From Your Camp Site
Support Older Camp Site Browsers
Refine Scripted Camp Activities
Bring Along Just The Right Amount Of Style
Where To Load Stuff That Won't Fit Into Your Pack
Swap Your Gear When It's Hot
9

10. Create Your New Team Camp Site
Angular CLI - https://cli.angular.io/
Use angular-cli to generate a new camp site:
ng new camp-comfy --routing --style=scss --prefix=cc
What's in the src folder?
https://angular.io/guide/quickstart#the-src-folder
What's in the root folder?
https://angular.io/guide/quickstart#the-root-folder
10

11. Basic Starter Scripts
start – Starts a webpack development server
build – Transpiles code into a small set of combined files
test – Runs Jasmine unit and component integration tests
lint – Reports and optionally fixes code syntax issues
e2e – Runs UI end-to-end integration tests on your camp site

12. Remove The Lint From Your Camp Site
ng lint --type-check
Reports only (does not fix issues), produces plain output
ng lint --type-check --format stylish
Reports only (does not fix issues), produces styled output
ng lint --type-check --fix --format stylish
Reports and fixes issues, produces styled output
12

13. Support Older Camp Site Browsers
Edit polyfills.ts to add support for additional polyfills.
Polyfills exist to support:
◦ ES6 features on IE9, IE10, IE11
◦ NgClass support on SVG elements on IE10 & IE 11
◦ Web Animations required for all but Chrome, Firefox, and Opera
◦ Date, currency, decimal and percent pipes for all but Chrome,
Firefox, Edge, IE11 and Safari 10
13

14. Refine Scripted Camp Activities
14

15. Bring Along Just The
Right Amount Of Style
Install Bootstrap 4
◦ npm install bootstrap@next
Add Local Bootstrap Override Files
◦ In the src folder, create two new files called:
◦ _variables.scss (override bootstrap variables here)
◦ _bootstrap.scss (modified copy of bootstrap.scss from node_modules)
◦ In the styles.scss file, add the following import statements and save the file:
◦ @import 'variables';
◦ @import 'bootstrap’;
More Details
15

16. Where To Load Stuff That Won’t
Fit Into Your Pack
Install your 3rd party library, as follows:
◦ npm install library-name --save
If the library includes typings, install them using npm:
◦ npm install @types/library_name --save-dev
Add references to them in the "scripts" section in the
.angular-cli.json file, as shown in the following example:
16
More Details

17. Swap Your Gear When It's Hot
Add Hot Module Replacement (HMR) to your camp site.
See the following angular-cli documentation for more information:
https://github.com/angular/angular-cli/wiki/stories-configure-hmr
More Details
17

18. Testing Your Camp Site Modules
Test Your Gear...Receive Good Karma
Enhance Your Karma Capabilities
Make Sure Your Stuff Is Covered
Your Camp Mascot Is A Wallaby
Smoke Test Your Camp Site End-to-End
Form A New Check-in Checklist Habit
18

19. Test Your Gear...Receive Good Karma
Run the test script:
npm run test
For more information on how to write unit and component
tests, see the following:
https://angular.io/guide/testing
More Details
19

20. Enhance Your Karma Capabilities
Add Chrome Headless Support For CI
Install Code Coverage Reporting Package
Add Code Coverage Configuration Information
Example Updated karma.conf.js File
More Details
20

21. Make Sure Your Stuff Is Covered
Add Test Script With Code Coverage For CI Builds by editing
the package.json file and add the following to the scripts
section:
"test:ci": "ng test --browsers=ChromeNoSandboxHeadless
--watch=false --single-run=true --code-coverage=true
--reporters progress,junit,coverage-istanbul“
More Details
21

22. Your Camp Mascot Is A Wallaby
Add Wallaby.js support to your angular-cli project, see:
https://wallabyjs.com/
Example code to integrate wallaby into your camp site
project:
https://github.com/wallabyjs/ngCliWebpackSample
Note: Wallaby requires that Typescript and TSLint be
globally installed.
More Details
22

23. Smoke Test Your Camp Site End-to-End
Run the e2e script:
npm run e2e
Protractor is an end-to-end test framework for Angular and
AngularJS applications. Protractor runs tests against your
application running in a real browser, interacting with it as a
user would.
http://www.protractortest.org/#/ More Details
Enable protractor to run Chrome in headless mode for CI.
23

24. Form A New Check-in Checklist Habit
Highly recommend getting your entire camp site team to adopt a new habit of
doing the following just prior to checking source code into a version control
system:
1. Run the lint:fix script to look for and clean up syntax issues.
2. Run the test script to run through all of your unit and component integration tests.
3. Run the e2e test to run through all of your site UI end-to-end tests.
4. Run the build:prod script to ensure that your code can compile in production
mode (to catch AoT ahead of time compile issues).
Take action after step to remediate any issues discovers by the step action.
Getting everyone into these habits from day one of your camp site build will
save you many, many hours of troubleshooting undiscovered issues.

25. Camp Site Construction
Share Your Camp Tools And Services
Add Modularized Camp Site Features
Add Commonly Desired Camp Site Views
Design The Layout Of Your Camp Site
25

26. Share Your Camp Tools And Services
Camp site services, components, directives, pipes, etc., can
also be modularized and shared among your camp site
locations.
Create a module for globally available services:
ng g m services
Create a module for shared components:
ng g m shared
More Details
26

27. Add Modularized Camp Site Features
You can organize your camp site into self-contained modules
that’s can be redistributed to your fellow campers for use in
their sites.
You could do something like the following:
◦ Add a camp photos search feature using the Flickr API services.
◦ Add a site destination lookup feature using the Google Maps
services.
◦ Add a movie trivia feature for game nights using the SWAPI (Star
Wars API) services.
27

28. Add Commonly Desired Camp Site Views
Most camp sites have a commonly required (desired) views. These view would
be part of the initial payload when the application starts. Generate the following
new views:
◦ Home: ng g c home
◦ Error: ng g c error
◦ Not Found: ng g c not-found
Edit the app-routing.module.ts file.
Edit the app.component.html file.
Edit the app.component.scss file.
Fix the broken unit tests.
28

29. Design The Layout Of Your Camp Site
Be responsive to the diversity of your camper’s equipment.
Design the camp site container specifications that set the
boundaries of your camp site.
Design the camp site header (the first thing campers see).
Design the camp site footer (the last thing campers see)
Design various camp site content styles to suit your campers
personal sense of esthetics.
29

30. Add Some Nice-To-Have Amenities
Feeling Lazy? Load Those Features On Demand
Name Your Camp Site Locations
Update Your Current Camp Site Location
Provide Directives To Guide Campers
Let Everyone Know When You're Busy

31. Feeling Lazy?
Load Those Features On Demand
Feature modules allow you to group and load related
application features on demand, which helps decrease the
application startup time.
No need to load everything at once, you should only load
what the user expects to see when the app first appears.
Lazy loaded feature modules only get loaded when a user
navigates to the feature’s route.
31

32. Name Your Camp Site Locations
You can identify view locations while browsing your camp site.
Add a data section with a title property to each camp site route.
Do something like the following:
32

33. Update Your Current Camp Site Location
Angular provides a Title service as part of the Browser platform. The
Title service provides an API for getting and setting the current HTML
document title.
https://angular.io/guide/set-document-title
More Information

34. Provide Directives To Guide Campers
Issue directives to help your campers correctly fill out their
data requisition forms.
Examples:
◦Filter out invalid characters as they are entered into the form
fields:
◦ Names, Titles, Numbers, Decimals, Currency, Dates
◦Fix up and format text input values for display readability
◦ Numbers, Decimals, Currency, Percentages, Dates
34

35. Let Everyone Know When You're Busy
Your campers are always eager to explore the features of
your campsite.
However, in this day and age of immediate gratification, a
camper’s need for immediate feedback is high. They tend to
get a little impatient and want to know what’s happening at
the camp site.
You should let them know when you’re busy and that
progress is being made to service their requests.

36. Don't Have All Your Camp Site Supplies Yet?
Mock Them Up
Generate Mock Data
Setup A JSON Server
Use Fake Data Generator Libraries
Use Freely Available Services
36

37. Generate Mock Data
Here are some online tools you can use to generate mock
data in JSON file format:
https://www.mockaroo.com/
http://www.json-generator.com/
http://www.theonegenerator.com/geradordejson
https://www.site24x7.com/tools/json-generator.html
37

38. Use A JSON Server
JSON Server is an npm package that enables you to create a
fully functioning RESTful JSON web service using the JSON
data file(s) you provide.
Located at GitHub:
https://github.com/typicode/json-server
You can install globally using the following:
npm install -g json-server
38

39. Use Fake Data Generator Libraries
You can use a JavaScript library to generate fake JSON data. Here are several for you to explore:
Faker
https://github.com/Marak/faker.js
Casual
https://github.com/boo1ean/casual
Chance
https://github.com/chancejs/chancejs
JSON Schema Faker
https://github.com/json-schema-faker/json-schema-faker

40. Use Freely Available Services
Search for free web service APIs.
Here are some examples:
◦ Flickr (images): https://www.flickr.com/services/api/
◦ SWAPI (The Star Wars API): https://swapi.co/
◦ Google Maps: https://developers.google.com/maps/
◦ YouTube: https://developers.google.com/youtube/
◦ OpenWeatherMap: https://openweathermap.org/price
Here’s a large list of free web services:
◦ https://www.programmableweb.com/apis/directory
40

41. Optimize Your Camp Site Resources
Reduce The Size Of Your Images
Sprites Reduce Site Downloads
Bring Along The High Quality Lightweight Gear
Minimize Your Site Resources
Build Your Own Custom Font Sets
41

42. Reduce The Size Of Your Images
Bitmap images, especially PNG images, are often much large than they need to
be. You can reduce the total byte size of your images by running them through
an optimizer process.
Here are some image optimizers for you to explore:
nQuant
https://nquant.codeplex.com/
PNGCrush
http://pngcrush.com/
PNGGauntlet
https://pnggauntlet.com/
42

43. Sprites Reduce Total Site Downloads
Combining your icons into a single sprite file can significantly reduce
the number of downloads when your site loads in a browser.
Most browsers only support 5 to 6 concurrent file downloads, and
wait until all files have completely finished downloading before
getting the next set of files to download.
Here are some sprite generators for you to explore:
https://spritegenerator.codeplex.com/
http://spritegen.website-performance.org/
43

44. Bring Along The High Quality,
Lightweight Gear
SVG, or Scalable Vector Graphics, offers a way to do full resolution graphical
elements, no matter what size screen, what zoom level, or what resolution your
user's device has.
With SVG files you can actually style shapes with CSS, and make them interactive
with JavaScript by attaching event handlers to SVG nodes.
SVG Files can be significantly smaller than an equivalent resolution bitmap
image.
Ture Story: I once worked on a project where the initially produced PNG graphic
was over 2MB in size. We refactored the image as an SVG graphic, and its size
was reduced to just over 37KB. That was a 98% reduction in download size of
the graphic file.
44

45. Minimize Your Site Resources
In addition to commenting out the unwanted Bootstrap styles from being compiled into your
camp site stylesheet, you have other means available to you via the angular-cli command line
tool to squeeze more unused stuff out of your final build file results.
To do a production build, you must add the –prod argument to the angular-cli command line
call, like the following:
ng build –prod
The angular-cli tool ensures all builds make use of bundling and limited tree-shaking,
while --prod builds also run limited dead code elimination via UglifyJS.
Resources in CSS, such as images and fonts, will be copied over automatically as part of a build.
If a resource is less than 10kb it will also be in-lined.
45

46. Build Your Own Custom Font Sets
Icon fonts have many advantages with the biggest being their free scalability to
any size, while at the same time reducing server requests to an absolute
minimum. However, you will not need the whole font set, and you may need
icons from different font sets. Font generators can help you with both of these
challenges by producing custom fonts sets and CSS. Here are some examples:
IcoMoon
https://icomoon.io/
Fontello
http://fontello.com/
Fontastic
http://fontastic.me/

47. Extra Camp Site Tasks
Generate Your FavIcon
Monitor Camp Site Usage And Report Issues
A Simple ASP.NET Core Site To Host Your Angular SPA
47

48. Generate Your FavIcon
Try using the following FavIcon Generator
http://realfavicongenerator.net/

49. Monitor Camp Site Usage
And Report Issues
Track.js
https://trackjs.com/
Helps you track and resolve client-side errors.
Application Insights for web pages
Find out about the performance and usage of your web page or app, get timings
of page loads and AJAX calls, counts and details of browser exceptions and AJAX
failures, as well as users and session counts.
https://docs.microsoft.com/en-us/azure/application-insights/app-insights-
javascript
49

50. A Simple ASP.NET Core Site
To Host Your Angular SPA
See example in my GitHub repository:
50

51. Camp Comfy Cookbook
Coming Soon…

52. Learning Site Links
Angular.io
https://cli.angular.io/ (Angular CLI)
https://github.com/angular/angular-cli/wiki (Angular CLI)
https://angular.io/guide/quickstart
https://angular.io/tutorial
Rangle.io Angular Training Book
https://angular-2-training-book.rangle.io/

53. Pluralsight Videos
Pluralsight offers you the best training you will find for your money. The training comes in short
video segments organized by category. You can watch them over and over as many times as
needed to reinforce your knowledge and get just in time architectural guidance from the best.
Here are my favorite videos from my Angular journey:
Angular CLI - John Papa (do every task in this video to quickly master the use of angular-cli)
https://app.pluralsight.com/library/courses/angular-cli/table-of-contents
Angular: Getting Started - Deborah Kurata
https://app.pluralsight.com/library/courses/angular-2-getting-started-update/table-of-contents
Angular Fundamentals - Joe Eames
https://app.pluralsight.com/library/courses/angular-fundamentals/table-of-contents

54. Pluralsight Videos (continued)
Angular Routing - Deborah Kurata
https://app.pluralsight.com/library/courses/angular-routing/table-of-contents
Play by Play: Angular 2/RxJS/HTTP and RESTful Services - John Papa and Dan Wahlin
https://app.pluralsight.com/library/courses/play-by-play-angular-2-rxjs-http-restful-services-
john-papa-dan-wahlin/table-of-contents
Angular Reactive Forms - Deborah Kurata
https://app.pluralsight.com/library/courses/angular-2-reactive-forms/table-of-contents

55. Shiny New Tool
Online VS Code IDE for Angular & React
https://stackblitz.com/

56. My Info
Blog: https://dennismoon.com
Code Repository: https://github.com/comfycoder
Twitter: @comfycoder
Linked in:
https://www.linkedin.com/in/dennis-moon-b469b93
OneNote (Take Your Angular App Glamping):
https://1drv.ms/u/s!ArCsAhaG3htJogmm7yGnOk-gCNTZ

57. Questions?