Web Services

Angular web services are supported for both the older Http and new HttpClient (Angular ≥4.3) libraries. The method calls get, post, put, delete, jsonp, and request are recognized.

import { HttpClient } from '@angular/common/http';

// web-service_GET.ts
 
export class ExampleService {

  constructor(private http: HttpClient) { }
  getData() {
    const url = "http://httpbin.org/get";
    return this.http.get(url);
  }
}

The results of this code snippet are shown below.:

Finally the use of the rxjs/ajax API as web service call is also supported. The different types of web services (GET, POST, PUT, DELETE) are represented with the same Angular objects we have used above, despite they are not restricted to the Angular framework.

Angular components and HTML fragments

In addition to the basic TypeScript objects the analyzer will generate specific objects and links for the Angular framework. In the following example, the analyzer creates a TypeScript module object associated with the file and a TypeScript class object associated with the decorated class MyComponent. Angular components objects are created when finding special class decorators with the name Component. The view of Angular components is described in HTML language and the associated code can be either found in an external .html file or embedded in the decorator metadata. 

// example.ts
 
@Component({
  selector: 'click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class MyComponent {
}

For embedded data, the analyzer creates an HTML5 HTML Fragment belonging to the component, and will automatically generate a use (U) link between the Component and the HTML fragment:

The generation of these links is necessary to describe the higher level call flow abstracted in the Angular framework and thus to retrieve transactions.

Environment variables

In our analysis, we consider a production deployment scenario. Thus we mimic the behavior of Angular when overloading behind-the-scenes the variables declared inside the exported environment dictionary defined in environment.ts  by those defined in environment.prod.ts. Global variables might be used to connect different technology layers (via URLs for example), thus retrieving them correctly can be critical for full transactions. The latest versions of Angular allow using many different production files. We only support a single production environment file, the standard environment.prod.ts. When using a no-production environment file a warning message will be logged.

// environment.ts
export const environment = { 
  production: false,
  urls = { .... }   // urls used for development
};

// environment.prod.ts
export const environment = { 
  production: true,
  urls = { .... }   // production urls
};

Injection with useValue

Dependencies are services or objects that a class needs to perform its function. Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them. 
The useValue key allows associating a fixed value with a Dependency Injection (DI) token. This is often used to provide runtime configuration constants such as website base addresses.

For instance, in the following, the Angular module provides an "environment" value.

import {Environment} from 'path/to/environmentinterface';
import { NgModule } from '@angular/core';

const environment: Environment = {
  my_url: "foo/path"
}

@NgModule({
  providers: [
    { provide: Environment, useValue: environment}
  ]
})
export class AppModule { 
}

This value can be accessed by other components through the constructor (note that the Type given to the "env" variable is the same as the one given in the provided key (see previous source code):

import { HttpClient } from '@angular/common/http';
import { Environment } from 'path/to/environmentinterface';
import { Component } from '@angular/core';


@Component()
export class FooClass{
  constructor (private http: HttpClient, private env : Environment){}

  getData() {
    const url = env.my_url;
    return this.http.get(url);
  }
}

Analyzing the previous modules will create a web service with the URL given through injection:  

Known limitations

• Connectivity between components through Angular routing is not supported.
• The support of TypeScript Map is limited. See the section Support of TypeScript Map to see which cases are supported.
• Use of HttpRequest in Angular is not supported.