Initializing Angular app

Now, we will initialize the application for development using npx, which is already installed on your system when you installed the latest version of Node LTS:

1. Under your dev folder, execute npx @angular/cli new local-weather-app
2. On your terminal, you should see a success message similar to this:

...  
  create local-weather-app/src/tsconfig.app.json (211 bytes)
  create local-weather-app/src/tsconfig.spec.json (283 bytes)
  create local-weather-app/src/typings.d.ts (104 bytes)
  create local-weather-app/src/app/app.module.ts (316 bytes)
  create local-weather-app/src/app/app.component.html (1141 bytes)
  create local-weather-app/src/app/app.component.spec.ts (986 bytes)
  create local-weather-app/src/app/app.component.ts (207 bytes)
  create local-weather-app/src/app/app.component.css (0 bytes)
added 1273 packages from 1238 contributors in 60.594s
Project 'local-weather-app' successfully created.

Your project folder—local-weather-app—has been initialized as a Git repository and scaffolded with the initial file and folder structure, which should look like this:

local-weather-app
├── angular.json
├── .editorconfig
├── .gitignore
├── .gitkeep
├── e2e
├── karma.conf.js
├── node_modules
├── package-lock.json
├── package.json
├── protractor.conf.js
├── README.md
├── src
├── tsconfig.json
└── tslint.json

The alias for @angular/cli is ng. If you were to install Angular CLI globally, you would have simply executed ng new local-weather-app, but we didn't do this. So it is important to remember that going forward, you will be executing the ng command, but this time under the local-weather-app directory. The latest version of Angular CLI has been installed under the node_modules/.bin directory, so you can run ng commands such as npx ng generate component my-new-component and continue working in an effective manner.

If you are on macOS, you can further improve your development experience by implementing shell auto fallback, which removes the necessity of having to use the npx command. If an unknown command is found, npx will take over the request. If the package already locally exists under node_modules/.bin, the npx will pass along your request to the correct binary. So, you will just be able to run commands like ng g c my-new-component as if they're globally installed. Refer to npx's readme on how to set this up at npmjs.com/package/npx#shell-auto-fallback.