Sunday, April 21, 2019

JavaScript - Angular - Installing Angular Material Module and dependencies

In order to install angular material module.  Let us install the following:

  • npm install @angular/material@6.4.7 --save
  • npm install @angular/cdk@6.4.7 --save
  • npm install @angular/animations@6.1.7 --save
  • npm install hammerjs@2.0.8 --save


Now, let us install the flex layout module:

npm install --save @angular/flex-layout@6.0.0-beta.18
npm WARN @angular/animations@6.1.7 requires a peer of @angular/core@6.1.7 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @angular/flex-layout@6.0.0-beta.18
added 1 package in 11.902s




JavaScript - Angular - Installing Angular of a specific version

Installing Angular of a specific version using npm:

$ npm install -g @angular/cli@6.2.1
/home/ubuntu/.nvm/versions/node/v8.11.1/bin/ng -> /home/ubuntu/.nvm/versions/node/v8.11.1/lib/node_modules/@angular/cli/bin/ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules/@angular/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @angular/cli@6.2.1
added 5 packages, removed 6 packages and updated 27 packages in 11.412s


Now to check the options available with the ng command:

$ ng help
Available Commands:
  add Add support for a library to your project.
  build (b) Builds your app and places it into the output path (dist/ by default).
  config Get/set configuration values.
  doc (d) Opens the official Angular API documentation for a given keyword.
  e2e (e) 
  generate (g) Generates and/or modifies files based on a schematic.
  help Displays help for the Angular CLI.
  lint (l) Lints code in existing project.
  new (n) Creates a new directory and a new Angular app.
  run Runs Architect targets.
  serve (s) Builds and serves your app, rebuilding on file changes.
  test (t) Run unit tests in existing project.
  update Updates your application and its dependencies.
  version (v) Outputs Angular CLI version.
  xi18n Extracts i18n messages from source code.

For more detailed help run "ng [command name] --help"
$


To check for the version details:

$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 6.2.1
Node: 8.11.1
OS: linux x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.8.1
@angular-devkit/core         0.8.1
@angular-devkit/schematics   0.8.1
@schematics/angular          0.8.1
@schematics/update           0.8.1
rxjs                         6.2.2
typescript                   2.9.2
    


Now, let us setup one application:

$ ng new myNgApp2 --style=sass
CREATE myNgApp2/README.md (1025 bytes)
CREATE myNgApp2/angular.json (3653 bytes)
CREATE myNgApp2/package.json (1316 bytes)
CREATE myNgApp2/tsconfig.json (408 bytes)
CREATE myNgApp2/tslint.json (2837 bytes)
CREATE myNgApp2/.editorconfig (245 bytes)
CREATE myNgApp2/.gitignore (503 bytes)
CREATE myNgApp2/src/favicon.ico (5430 bytes)
CREATE myNgApp2/src/index.html (295 bytes)
CREATE myNgApp2/src/main.ts (371 bytes)
CREATE myNgApp2/src/polyfills.ts (3194 bytes)
CREATE myNgApp2/src/test.ts (642 bytes)
CREATE myNgApp2/src/styles.sass (80 bytes)
CREATE myNgApp2/src/browserslist (388 bytes)
CREATE myNgApp2/src/karma.conf.js (964 bytes)
CREATE myNgApp2/src/tsconfig.app.json (166 bytes)
CREATE myNgApp2/src/tsconfig.spec.json (256 bytes)
CREATE myNgApp2/src/tslint.json (314 bytes)
CREATE myNgApp2/src/assets/.gitkeep (0 bytes)
CREATE myNgApp2/src/environments/environment.prod.ts (51 bytes)
CREATE myNgApp2/src/environments/environment.ts (662 bytes)
CREATE myNgApp2/src/app/app.module.ts (314 bytes)
CREATE myNgApp2/src/app/app.component.sass (0 bytes)
CREATE myNgApp2/src/app/app.component.html (1141 bytes)
CREATE myNgApp2/src/app/app.component.spec.ts (1001 bytes)
CREATE myNgApp2/src/app/app.component.ts (213 bytes)
CREATE myNgApp2/e2e/protractor.conf.js (752 bytes)
CREATE myNgApp2/e2e/tsconfig.e2e.json (213 bytes)
CREATE myNgApp2/e2e/src/app.e2e-spec.ts (304 bytes)
CREATE myNgApp2/e2e/src/app.po.ts (208 bytes)
npm WARN deprecated @angular/http@6.1.10: Switch to @angular/common/http - see https://angular.io/guide/http
npm WARN deprecated istanbul@0.4.5: This module is no longer maintained, try this instead:
npm WARN deprecated   npm i nyc
npm WARN deprecated Visit https://istanbul.js.org/integrations for other alternatives.
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.

> node-sass@4.11.0 install /home/ubuntu/Documents/ngWorks/jogesh/myNgApp2/node_modules/node-sass
> node scripts/install.js

Cached binary found at /home/ubuntu/.npm/node-sass/4.11.0/linux-x64-57_binding.node

> node-sass@4.11.0 postinstall /home/ubuntu/Documents/ngWorks/jogesh/myNgApp2/node_modules/node-sass
> node scripts/build.js

Binary found at /home/ubuntu/Documents/ngWorks/jogesh/myNgApp2/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1142 packages in 30.052s
    Successfully initialized git.


Now, let type the following command:
$ npm install
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

up to date in 8.378s


Now, let us type :

$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 10% building modules 3/3 modules 0 active                         



The app is now available on localhost at: http://localhost:4200/

This is a very simple bare bones application to help us get started with angular. Now, if we check the git:

$ git log --oneline
e222cd0 (HEAD -> master) initial commit