Setting Up The CLI For Production Scale App

What:

• Command-line interface, allows for scaffolding components/services/pipes/modules/etc

Why:

• Consistency: multiple developers on one project, file structure, naming conventions
• Keeping up with latest standards
• Automation of file creation & importing references to modules
• Streamlines process of setting up a new project. Webpack & AOT is build in and ready to do work
• Develop process easier, refresh project/browser page on save

When:

• NOW

How:

• Verify you have Node JS and NPM installed locally, and its up to date
• Npm install -g @angular-cli (install the tool)
• Review Ng new options (https://github.com/angular/angular-cli/wiki/new)
• Do dry run (-d) ng new hooraybeer --style=scss --routing
• Ng new hooraybeer --style=scss --routing (create your project, many files will be generated automatically for you)
• Angular-Cli.json
  • While fully customizable, is pretty well setup from the beginning. You won't need to make many changes
  • Environment files:
    • Switch between dev and prod using ng serve --prod
• Generating components, services, pipes, etc
  • Proper file structure recommends putting services/pipes/directives strategically. Place component or module specific services within that folder. When the browser pulls down that module it will have everything it needs to render the page (the exception being global services/pipes/etc)
• Add packages/dependancies
  • Add styles
    • @angular/material (https://github.com/angular/angular-cli/wiki/stories-include-angular-material)
• Create New Shared Module ng g module shared
• Create New Home Component ng g component home