Real-time Angular 8 Application with SignalR and Cosmos DB

//Real-time Angular 8 Application with SignalR and Cosmos DB

Real-time Angular 8 Application with SignalR and Cosmos DB

Source- https://www.c-sharpcorner.com/article/real-time-angular-8-application-with-signalr-and-cosmos-db/

Source – https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator

First Step: Download project on the first link above – called SignalRAngularEmployee.zip

Login in your Azure account and setup a database and container

Get the keys that you will need to replace on your SignalR project

Those keys will be replace on the project SignalREmployee file DocumentDBRepository.cs

Download VSCode and open the AngularJS project folder – AngularEmployee

Run in a terminal the following commands:

  • ng serve –open
  • You will get an error if you don’t have Angular setup
  • Install Angular – npm install -g @angular/cli@8.1.1
  • ng serve –open
  • error: An unhandled exception occurred: Could not find module “@angular-devkit/build-angular” from
  • npm i @angular-devkit/build-angular -save
  • ng serve –open
  • Error: An unhandled exception occurred: Cannot find module ‘async-each’
  • npm install async –save
  • npm i core-util-is
  • Error: An unhandled exception occurred: Cannot find module ‘async-each’
  • Error: An unhandled exception occurred: Cannot find module ‘amdefine’
  • npm i amdefine
  • ng serve –open

package.json working:

{
  "name": "employee-realtime",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.1.1",
    "@angular/common": "~8.1.1",
    "@angular/compiler": "~8.1.1",
    "@angular/core": "~8.1.1",
    "@angular/forms": "~8.1.1",
    "@angular/platform-browser": "~8.1.1",
    "@angular/platform-browser-dynamic": "~8.1.1",
    "@angular/router": "~8.1.1",
    "@aspnet/signalr": "^1.1.4",
    "amdefine": "^1.0.1",
    "async": "^3.2.0",
    "bootstrap": "^4.3.1",
    "core-util-is": "^1.0.2",
    "font-awesome": "^4.7.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "webpack-dev-server": "^3.11.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.3",
    "@angular/cli": "~8.1.1",
    "@angular/compiler-cli": "~8.1.1",
    "@angular/language-service": "~8.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

By |2020-07-31T09:33:18-06:00July 30th, 2020|Web Developer|0 Comments

About the Author:

Leave A Comment