Angular CLI Programming Setup

NPM « The Package Manager is used for dependency management, so that you no longer have to manually download and manage your scripts.

Visual Studio | Marketplace extension for importiong packages

• Auto Import
• TypeScript Hero
• Auto generate implemented methods stubs
  UPDATE: VS Code now supports this functionality out of the box. Just add the interface, the compiler will highlight the controller with red, right click on the light bulb on the left and click implement interface.

Keyboard Shortcuts

Command	Keybinding	When
Delete Line	Ctrl+Shift+K	editor.action.textInputFocus
Insert Line Above	Ctrl+Shift+Enter	editor.action.editorTextFocus
Reopen Closed Editor	Ctrl+Shift+T	workbench.action
Cursor Selection of Text	Ctrl+Shift+Arrow Left,Right,UP,Down	editor.action.textInputFocus
Duplicate(Copy) Line Up, Down	Alt+Shift+Arrow UP, Down	editor.action.textInputFocus
Move Line	Alt+Arrow UP, Down	editor.action.textInputFocus
Copy FilePath	Alt+Shift+C	!editorFocus
Replace	Ctrl+H	--
Replace in FilesFiles to be included, excluded	Ctrl+Shift+H	--

---

Generating and serving an Angular project via a development server

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

You can configure the default HTTP host and port used by the development server with two command-line options :

ng serve --host 0.0.0.0 --port 4201

Generating Components, Directives, Pipes and Services

You can use the ng generate (or just ng g) command to generate Angular components:
You can find all possible blueprints in the table below:

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow this steps:

1. ng g module new-module to create a new module
2. call ng g component new-module/new-component

This should add the new component, directive or pipe reference to the new-module you've created.

---

Steps followed to create an Application Template.

1. Creating new angular application skeleton src/app with routing ng new MyFirstApp --routing.

   src
   ├── app
   │   ├── app.component.css
   │   ├── app.component.html
   │   ├── app.component.spec.ts
   │   ├── app.component.ts
   │   └── app.module.ts
   ├── favicon.ico
   └── index.html
   

2. Under the angular application, Generating module with some options « ng generatemodule customers--routing

D:\AngularProjects\Version2>ng new MyFirstApp --routing

D:\AngularProjects\Version2\MyFirstApp>ng generate module customers --routing
installing module
  create src\app\customers\customers-routing.module.ts
  create src\app\customers\customers.module.ts
  WARNING Module is generated but not provided, it must be provided to be used

D:\AngularProjects\Version2\MyFirstApp>ng generate component customers/customer-list
installing component
  create src\app\customers\customer-list\customer-list.component.css
  create src\app\customers\customer-list\customer-list.component.html
  create src\app\customers\customer-list\customer-list.component.spec.ts
  create src\app\customers\customer-list\customer-list.component.ts
  update src\app\customers\customers.module.ts

To Start applicaiton

D:\AngularProjects\Version2\MyFirstApp>ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 3ae4403f12d6f715fb31
Time: 7717ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 195 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 6.57 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.53 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Change the routing and html file to get display customers.module in app.module.

Lazy Loading Feature Modules

Last complication : if you lazy-load a module, which is now easy with Angular CLI.

const routes: Routes = [
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }
];

As it will be a different bundle and module, loaded only on demand by default, it’s not included in the global scope your app.
For components, it doesn’t change anything: you need to import again the CommonModule and other modules of components, like in any submodule.

For services, there is a difference:

• you’ll still have access to services already provided in the app (like HttpClient and your own services),
• but the services provided in your lazy-loaded module will only be available in this lazy-loaded module, not everywhere in your app.

Example « app.component.html

<div>
  <button routerLink="">Home</button>
  <button routerLink="/customers">Customers</button>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

app-routing.module.ts

import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  /*{
    path: '',
    children: []
  }*/
  {
    path: 'customers',
    loadChildren: 'app/customers/customers.module#CustomersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

---

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'users/:id'

//component.html
<router-outlet name='user-id'></router-outlet>
// routing
children: [
  { path: '', component: UsersComponent },
  { path: ':id', component: UserComponent, outlet: 'user-id' }
]