This documentation is not maintained. Please refer to doc.castsoftware.com/technologies to find the latest updates.


Summary: This document provides information about the extension providing TypeScript and Angular support for Web applications.

What's new

  • First functional release

Description

This extension provides support for the TypeScript and Angular frameworks:

  • TypeScript is a type superset of JavasScript that compiles to plain JavasScript.
  • Angular is framework used to create modern web platform capabilities.

In what situation should you install this extension?

If your Web application contains TypeScript and/or Angular source code and you want to view these object types and their links with other objects, then you should install this extension.

Angular/TypeScript Front-end connected to Node.js/Express/MongoDB back-end

Supported versions

The following tables display the list of versions that this extension supports. It also gives a list of the supported frameworks for Node.js.

TypeScript

VersionSupported
1.x

(tick) 

2.x

(tick)

3.x

(tick)

4.x

(tick)

Angular

VersionSupported
2

(tick)

4

(tick)

5

(tick)

6

(tick)

7

(tick)

8(tick)
9(tick)
10(tick)
11(tick)
12(tick)

React

VersionSupported
15.x

(tick)

16.x

(tick)

React-Native

VersionSupported

0.x

(tick)

Supported Node.js versions

VersionSupport Comment
v0.x

(error)

No longer supported
v4.x

 (tick)

LTS
v5.x

 (tick)

Based on Javascript ES6
v6.x

 (tick)

Based on Javascript ES6
v7.x(tick)Based on Javascript ES6
v8.x

(tick)


v9.x

(tick) 


v10.x

(tick)


v11.x

(tick)


v12.x

(tick)


v13.x

(tick)


v14.x(tick)

Supported frameworks for Node.js

  • (tick) indicates that the framework is currently supported.
  • (error) indicates that the framework is not yet supported.

Library

Comment

Data Access

Web Service

Supported versions

ExpressNode.js application framework
(tick)4.x
MongooseMongoDB access(tick)
5.x
SequelizeNode.js application framework(tick)
5.x; 6.x
TypeORMORM(tick)
0.2.x
FastifyNode.js server
(tick)3.x
AxiosPromise based HTTP client
(tick)0.x
Node-mongodb-nativeMongoDB access(tick)
3.x
nestjsNode.js application framework
(tick)6.x; 7.x
httpsNode.js web service
(tick)
fetchJavaScript builtin web service
(tick)
requestHTTP request client 'request'
(tick)2.x

request-promise

HTTP request client 'request'
(tick)4.x
request-promise-nativeHTTP request client 'request'
(tick)1.x
request-promise-anyHTTP request client 'request'
(tick)1.x
Mongo-clientMongoDB access(error)

CouchdbCouchdb access(error)

Node-couchdbCouchdb access(error)

Couchdb-nanoCouchdb access(error)

MarklogicMarklogic access(error)

my_connectionMySQL access(tick)
0.x
pgPostgreSQL access(tick)
7.x; 8.x
oracledbOracle Database access(tick)
4.x; 5.x

node-sqlserver

MsnodeSQL access(tick)
0.x

mssql

MsSQL access(tick) 
5.x; 6.x
HapiNode.js application framework(error)

SailsNode.js application framework(error)(error)
LoopbackNode.js application framework

(error)

(error)
KoaNode.js application framework(error)

KnexNode.js SQL query builder (error)

MemcachedStorage framework(error)

AWS.DynamoDBAmazon database access(tick)
SDK 2.x
AWS.S3Amazon storage service(tick)
SDK 2.x
AWS.LambdaAmazon routing solution
(tick)Cloudformation, Serverless framework, SAM
AWS.SQSAmazon Simple Queue Service
(tick)SDK 2.x

Supported Emailing frameworks: @sendgrid/mail, nodemailer

Files analyzed

Icon(s)FileExtension

TypeScript.ts

TypeScript.tsx

Skipped files

The TypeScript analyzer will automatically skip files inside folders (or sub-folders) that by convention pertain to either external libraries or unit-testing. Currently the following are skipped:

  • Folders named as node_modules, e2e, e2e-bdd, e2e-app
  • Files with following name endings: .spec.ts, -spec.ts, _spec.ts, .d.ts

As mentioned in the introduction, TypeScript is a language that will be compiled to generate Javascript files. Sometimes, the delivery will include these files, this is why the analyzer will skip the generated JavaScript files if we find their original TypeScript file.

Function Point, Quality and Sizing support

This extension provides the following support:

  • Function Points (transactions): a green tick indicates that OMG Function Point counting and Transaction Risk Index are supported
  • Quality and Sizing: a green tick indicates that CAST can measure size and that a minimum set of Quality Rules exist
Function Points
(transactions)
Quality and Sizing
(tick)(error)

CAST AIP compatibility

This extension is compatible with:

CAST AIP release
Supported
8.3.x(tick)
8.2.x(tick)

Supported DBMS servers

This extension is compatible with the following DBMS servers:

CAST AIP releaseCSS/PostgreSQLOracleMicrosoft
All supported releases(tick)(tick)(tick)

Prerequisites

(tick)An installation of any compatible release of CAST AIP (see table above)

Dependencies with other extensions

Some CAST extensions require the presence of other CAST extensions in order to function correctly. The TypeScript and Angular extension requires that the following other CAST extensions are also installed:

Note that when using the CAST Extension Downloader to download the extension and the Manage Extensions interface in CAST Server Manager to install the extension, any dependent extensions are automatically downloaded and installed for you. You do not need to do anything.

Download and installation instructions

Please see:

The latest release status of this extension can be seen when downloading it from the CAST Extend server.

Packaging, delivering and analyzing your source code

Once the extension is downloaded and installed, you can now package your source code and run an analysis. The process of packaging, delivering and analyzing your source code is described below:

Click here to expand...

Packaging and delivery

Note that the TypeScript and Angular extension does not contain any CAST Delivery Manager Tool discoverers or extractors, therefore, no "TypeScript and Angular" projects will be detected by the CAST Delivery Manager Tool. You therefore have two choices:

  • manually create an Analysis Unit in the CAST Management Studio.
  • or download and install the Web Files Discoverer to automatically detect projects in the CAST Delivery Manager and therefore Analysis Units in the CAST Management Studio.

Using the CAST Delivery Manager Tool:

  • create a new Version
  • create a new Package for your TypeScript and Angular source code using the Files on your file system option:

  • Define the root folder of your Application source code:

  • Run the Package action
  • Before delivering the source code, check the packaging results:
Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

  • the CAST Delivery Manager Tool will not find any "projects" related to the TypeScript and Angular application source code - this is the expected behaviour. However, if your TypeScript and Angular related source code is part of a larger application (for example a JEE application), then other projects may be found during the package action (click to enlarge):

With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

  • the CAST Delivery Manager Tool will automatically detect "HTML5 file projects" (see Web Files Discoverer for more technical information about how the discoverer works) related to the TypeScript and Angular application source code. In addition, if your TypeScript and Angular related source code is part of a larger application (for example a JEE application), then other projects may also be found during the package action (click to enlarge):

  • Deliver the Version

Analyzing

Using the CAST Management Studio:

  • Accept and deploy the Version in the CAST Management Studio.
Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

  • No Analysis Units will be created automatically relating to the TypeScript and Angular source code - this is the expected behaviour. However, if your TypeScript and Angular related source code is part of a larger application (for example a JEE application), then other Analysis Units may be created automatically:

  • In the Current Version tab, add a new Analysis Unit specifically for your TypeScript and Angular source code, selecting the Add new Universal Analysis Unit option:

  • Edit the new Analysis Unit and configure in the Source Settings tab:
    • a name for the Analysis Unit
    • ensure you tick the HTML5/JavaScript option (the TypeScript and Angular extension depends on the HTML5 and JavaScript extension - and therefore the Universal Analyzer language for the AngularJS extension is set as HTML5/JavaScript)
    • define the location of the deployed TypeScript and Angular source code (the CAST Management Studio will locate this automatically in the Deployment folder):

  • Run a test analysis on the Analysis Unit before you generate a new snapshot.
With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

  • "HTML5" Analysis Units will be created automatically (see Web Files Discoverer for more technical information about how the discoverer works) related to the TypeScript and Angular application source code. In addition, if your TypeScript and Angular related source code is part of a larger application (for example a JEE application), then other Analysis Units may also be created:

  • There is nothing further to do, you can now run a test analysis on the Analysis Unit before you generate a new snapshot.

What results can you expect?

Once the analysis/snapshot generation has completed, you can view the results in the normal manner:

Objects

The following objects are identified:

IconMetamodel name

Typescript Module

Typescript Namespace

Typescript Class

Class Initializer

Typescript Method

Typescript Interface

Typescript Function

Angular Component

Angular Directive

Angular GET http service

Angular POST http service

Angular PUT http service

Angular DELETE http service

HTML5 HTML fragment

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.

example web services
// 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 is shown below. 

Analysis of the TypeScript application will result in the following links:

  • callLink: Created when a method or a function is called. These links connect TypeScript Method and TypeScript Function elements between them.
  • inheritLink: Represents direct inheritance between TypeScript Class and TypeScript Interface objects.
  • includeLink: Created when importing modules.
  • referLink: Link between a module and an imported element

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 analyser creates a TypeScript module object associated to the file and a TypeScript class object associated to the decorated class MyComponent. Angular components objects are created when finding special class decorators with 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. 

Link to html fragments
// 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 are necessary to describe the higher level call flow abstracted in the Angular framework and thus to retrieve transactions.

Rules

None. To be added in forthcoming versions.

Limitations

CANDIDATES FOR IMPROVEMENT

  • Calls between JavaScript and TypeScript source codes are not supported.
  • Partial support for missing semi-colons in statement endings. We note that systematic semi-colon omission is considered as a bad practice both in Typescript and JavaScript.
  • Call links from field initializations are not fully supported.
  • Connectivity between components through Angular routing in is not supported.
  • Evaluation of Url's in web service calls are supported at module level. However, incorporation of metadata passed through parameters is work in progress.