Prerequisites

Install NodeJS

Use the instructions on this site: https://nodejs.org/

Install Angular CLI

Run the following from the command line:

npm install -g @angular/cli

Getting started

Create Angular project

Run the following from the command line:

ng new my-m3-app

Use routing if you want to. Using SASS with file extension .scss is suggested

Enter the project

Run the following from the command line:

cd my-m3-app

Install m3-app-library

Run the following from the command line:

npm install m3-app-library

Ignore peer dependecy warnings

Import M3 App Library in module

Open file src/app/app.module.ts

Add this line to the imports at the top of the file:

import { M3AppLibraryModule } from 'm3-app-library';

Add M3AppLibraryModule.forRoot() to the imports section, like this:

imports: [
	// ... other modules ...
    M3AppLibraryModule.forRoot(), // <-- add this line
],

The forRoot() method can accept an object overriding the default settings, but this is optional.

Configure proxy

In order to call MI API's in a remote M3 installation from your local development environment, you can use the build-in proxy feature in Angular.

Create a new empty file in the Angular project root:

proxy.conf.json

Enter the following JSON into the file:

{
	"/m3api-rest": {
		"target": "https://your-m3-installation.domain.com:12345",
		"secure": false
	}
}

Substitute the placeholder URL including port with the one of the M3 installation your want to develop against.

Open the file angular.json in your project root. Search for "serve" (including the quotes). This should take you to the right section. Modify the JSON in the following section by adding an entry for "proxyConfig" in the "options" section. Make sure to add a comma at the end of the line above.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my-m3-app:build",
    "proxyConfig": "proxy.conf.json"
  },
  ...
}

"Serve" the app using the Angular CLI built-in web server

Run the following from the command line:

ng serve

Then open your browser with the following URL:

http://localhost:4200

Inject the MI API Service into your app component

Open the following file:

src/app/app.component.ts

Add the following line to the import section at the top of the file:

import { MIApiService, MIApiResult } from 'm3-app-library';

Add the following line to the AppComponent class, just under the "title" line:

constructor( private mi:MIApiService ){}

Add code to run an MI API when the component is ready

Add a class field called "userInfo" by adding this line just above the constructor line you just added:

userInfo;

Add OnInit to the existing import statement at the top of the file:

import { Component, OnInit } from '@angular/core'; // <-- just add ", OnInit", the rest is there

Add the OnInit interface to the AppComponent definition, like this:

export class AppComponent implements OnInit { // <-- just add "implements OnInit"

Implement the ngOnInit method by adding this code below the constructor:

ngOnInit(){

}

Then add the following example MI call to the ngOnInit method, like this:

ngOnInit(){

	this.mi.executeMI(
		'MNS150MI',
		'GetUserInfo',
		{}
	)
	.then( result => {

		this.userInfo = result.item;

	});
}

Modify the component template to show the result of the MI API call

Open the component template file:

src/app/app.component.html

REMOVE all the contents of this file, and replace it with the following line:

<pre>{{userInfo | json}}</pre>

That line inserts the entire userInfo object into an HTML tag that will "preformat" it rather than printing it on a single line. The " | json" part will convert the object to JSON. This is all good for testing, but not something you usually want to do in a real app.

Add a line to print a single field, like this:

Your name is: {{userInfo.USFN}}.