Coding best practices

• Lazy load pages and deep-linking
  • Angular Firebase: How to Lazy Load Components in Angular 4 in Three Steps
• Shared and Core modules
  • 6 Best Practices & Pro Tips when using Angular CLI
• Folder structure: module by feature
  • How to define a highly scalable folder structure for your Angular project
• Unit and e2e tests
• Continuous integration with Travis CI
• Shorten TypeScript Imports using custom namespace
• Automated dependency updates with Greenkeeper

Implement Stacked Master-Detail Pattern

• Interface
  • When to use Interface and Model in TypeScript / Angular2
• Back navigation
  • Ion-back-button
• Routing and navigation
  • Angular Firebase: Ionic 4 Routing and Navigation Guide
• Generate data provider and mockup
  • Implementing the Master-Detail Pattern in Ionic

Furthermore

• Baljeet Singh: Creating News Application With Ionic 4 and Angular

REST API integration with Auth Based Token

• HttpClient
  • Angular.io: Httpclient
• HttpInterceptor
  • Ionic Academy: Authorisation Headers with Ionic using HTTP Interceptor and Storage v3
  • Angular.io: Intercepting requests and responses
    • Set default headers
    • https://stackblitz.com/angular/dyommnvvmry

Backlog

• Caching Http response with Etag
  • Angular.io: Caching
    • https://stackblitz.com/angular/dyommnvvmry
  • Testing HTTP requests
    • Angular.io: testing HTTP requests

Login Flow with Angular Router and and Guards

Furthermore

• Building a Basic Ionic 4 Login Flow with Angular Router

Backlog

• Angular 2 - Redirect to Previous URL after Login with Auth Guard

PWA

• https://github.com/johnpapa/pwa-angular
• https://angular.io/guide/service-worker-intro
• https://moduscreate.com/blog/creating-progressive-web-apps-using-angular/
• https://medium.com/@nsmirnova/creating-pwa-with-angular-5-part-2-progressifying-the-application-449e3a706129

Full examples of “Well implemented” Angular Apps

• Vlado Tesanovic: The PRPL Pattern for Progressive Web Applications using Angular 6+
• Matt Raible: Angular and Angular CLI Tutorial: Search and edit App
• Indermohan Singh: Ionic 4 Beta: What’s New and Building a Sample App

Continuous integration with Travis CI

• github.com/angular/angular-cli: stories continuous integration
• Ionic project: Continuous Integration with Travis for gh-pages
• continuous integration | angular cli + firebase + travis ci
• Continuous everything with Angular, Travis CI, Firebase and Greenkeeper
• Continuous Integration for Angular Projects with TravisCI
• Continuous Deployment for Ionic 2 to Firebase Hosting
• npm run lint Using Travis-CI to Run Your Ionic Unit Tests

Automated dependency updates with Greenkeeper

• Greenkeeper
• Continuous everything with Angular, Travis CI, Firebase and Greenkeeper

Typescript path mapping

An Angular app’s file structure can be relatively deep, making it difficult to figure out where a module lives when importing it. The idea is to make your import paths go from ../../../../ to @namespace. TypeScript compiler supports the declaration of mappings using "paths" property in tsconfig.json files. Using TypeScript path mapping make import statements in your Angular app shorter and much more developer-friendly

// tsconfig.json in the root dir

{
  "compileOnSave": false,
  "compilerOptions": {

    // omitted...

    "baseUrl": "src",
    "paths": {
      "@core/*": ["app/core/*"],
      "@shared/*": ["app/shared/*"],
      "@items/*": ["app/items/*"]
      "@env/*": ["environments/*"]
    }
  }
}

Then instead of

// import from component.ts
import { MyService } from '../../../core/api.service';

we can use custom namespace @core declared on tsconfig.json to use following import:

// import from component.ts
import { MyService } from '@core/services/api.service';

More details

Performance

Angular preloading strategy

Adding PreloadAllModules strategy on your RouterModule, you can preload all of the modules in the background asynchronously. This will help boost up the loading time and performance tremendously. You can also ceate your own preloading strategy by implementing its PreloadingStrategy class.