Tuesday, August 7, 2018

OAuth

Hey Guys,

In this blog we will discuss about OAuth . OAuth is used for authentication .

Basic Authentication:
It needs user id and password.
The combination of user id and password is encrypted and added to the header .

The backend validates the authentication data in the headers and allow/block the request.

OAuth 2 :
1. Grant Type : Client Credentials
2 .access token url:
3. Client ID :
4. Client Secret :
5. Scope : api 

Friday, June 22, 2018

Error: Cannot find module '@angular-devkit/core'

Hi Guys, You might have faced this error "Error: Cannot find module '@angular-devkit/core'" while calling the command "ng serve". The full stack trace is as below .





module.js:487
    throw err;
    ^

Error: Cannot find module '@angular-devkit/core'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (F:\shahbaz\study\angular4\projects\my-fifth-app\test5\node_modules\@angular-devkit\schematics\src\tree\virtual.js:10:16)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)


To fix just change the following property in package.json
"@angular/cli": "1.6.0",
to
"@angular/cli": "^1.6.0",

Once done run npm update

This should solve the problem.


The "@angular/compiler-cli" package was not properly installed.


Hi Guys, You might have faced this error "The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli'" while calling the command "ng serve". The full stack trace is as below


The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli'
Error: The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli'
    at Object.CompilerCliIsSupported (C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@ngtools\webpack\src\ngtools_api.js:25:15)
    at new AotPlugin (C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@ngtools\webpack\src\plugin.js:29:23)
    at _createAotPlugin (C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\models\webpack-configs\typescript.js:92:16)
    at Object.getNonAotConfig (C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\models\webpack-configs\typescript.js:100:19)
    at NgCliWebpackConfig.buildConfig (C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\models\webpack-config.js:33:37)
    at Class.run (C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\tasks\serve.js:71:98)
    at check_port_1.checkPort.then.port (C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\commands\serve.js:123:26)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:169:7)

It can due to various reasons ,
1. Your node_modules folder is not having the required modules .
Check the node_modules folder and see if it has all the modules. If the modules are missing just do npm install
2. If the modules are available check the version of typescript , nodejs and angular cli.
3. If nothing works create a new project using ng new project-name and replace the src directory.

Friday, June 8, 2018

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:

Hi Guys,

This blog is about issues I have faced while creating a route in Angular 5.

When I try to hit a url "http://localhost:4200/home", I faced the following error.




Error: Cannot match any routes. URL Segment: 'home'
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.eval [as selector] (router.js:1684)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at LastSubscriber.Subscriber._error (Subscriber.js:131)
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.eval [as selector] (router.js:1684)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at LastSubscriber.Subscriber._error (Subscriber.js:131)
    at resolvePromise (zone.js:821)
    at resolvePromise (zone.js:785)
    at eval (zone.js:870)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4744)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:594)

The fix is pretty simple .When I added the following line in app.module.ts file , it worked.

const appRoutes:Routes =[
{path:'home',component: HomeComponent}
];

If you are facing the same error even after adding this piece of  code then check if you have added a slash in the path {path :'\home' . Remove the slash if you have added it.

view the full source in Git

Saturday, May 26, 2018

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

Hi Guys,

This blog is about issues I have faced while fetching data from a REST Web Service.

When I try to get the data from the service I faced an error like ,

Failed to load http://localhost:8090/org.myProject/question: Redirect from 'http://localhost:8090/org.myProject/question' to 'http://localhost:8090/org.myProject/question/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
This is because the rest service does not provide the response for Http requests from a different domain . The solution to this is add some extra the configuration in the Service to accept requests from a different domains. Lets have a look at the code.
import { EventEmitter, Injectable } from '@angular/core';
import { Headers, Http ,Response} from '@angular/http';
import {  HttpClientModule } from '@angular/common/http';
import {  HttpModule } from '@angular/http';


import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class QuestionService{
constructor(private http:Http) {}
loadQuestions(){


return this.http.get('http://localhost:8090/org.myProject/question')
.map(
        (response: Response) => {
          const data = response.json();
       
          return data;
        }
      )
      .catch(
        (error: Response) => {
          return Observable.throw('Something went wrong');
        }
      );

}
}
That's the service,check out the  controller .
import { Component, OnInit } from '@angular/core';
import { QuestionService } from './question.service';


@Component({
  selector: 'app-question',
  templateUrl: './question.component.html',
  styleUrls: ['./question.component.css'],
  providers:[QuestionService]
})
export class QuestionComponent  {

  constructor(private questionService:QuestionService) { }




onGet() {

  this.questionService.loadQuestions().subscribe(
        (questions: any[]) => {this.questions = questions;console.log(questions);},
        (error) => console.log(error)
      );

  }

  var questions;
}

The component file is as below

<div class="container">
<div class="row">
<div>
Question:
<select id="question"  >
<option>Select</option>
<option *ngFor="let question of questions" ngValue="question">{{question.subjectDesc}}</option>
</select>
</div>
</div>
<div class="row">
<div>
 <button class="btn btn-primary" (click)="onGet()">Get Server Response </button>
</div>
</div>

</div>

The change actually has to be done on the server side code . I am using a Spring Web application at the back end . By default it does not respond other hosts. So , Lets add the following entries to web.xml .
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
</filter-mapping>

Test once the service is deployed.

ec2-user@ec2 Permission denied