Angular meets Internet Computer

This tutorial is inspired by https://github.com/shawndotey.

The setup is based on:

Nodejs: 14.15.5
Angular: 12.2.15

This tutorial shows how you can use a Motoko canister as the backend for an Angular project.

Prepare your Angular project

For this tutorial we will use two different terminal windows. Make sure you have the correct Angular and Nodejs versions installed. See the used versions above.

Create a new Angular project

We start with a new Angular project. Let's create a small garden project.

ng n garden

# If you want use routing => yes
# Which stylesheet format => SCSS or CSS is your choice

Install missing IC dependencies

We combine all npm modules in a package.json file.

. npm-install.sh

As a next step we can replace the content of app.component.html with the following:

<div>{{ title }} app is running!</div>
<p> Greet {{ ic_response }}</p>

<input type="text" id="name" name="name" #name>
<button (click)="getGreet(name.value)">get data</button>

Modify Angular's build process

We have to adjust the angular build process a bit. Do the following changes to the angular.json file:

• projects.[projectName].architect.build.builder set "@angular-builders/custom-webpack:browser"
• projects.[projectName].architect.build.builder.options add
  • "customWebpackConfig": {"path":"backend/custom-webpack.config.js"},
  • "allowedCommonJsDependencies": ["simple-cbor","buffer"],
• projects.[projectName].architect.serve.builder set "@angular-builders/custom-webpack:dev-server"

Modify tsconfig.app.json

Do the following changes to the tsconfig.app.json file:

compilerOptions.types add "node"

This is also needed for the build process.

Add a Motoko backend canister

Now we can create an IC project to the existing Angular project.

# in the garden folder create the IC project
dfx new backend

# switch into the IC backend project
cd backend

# we remove the node_modules folder because we have installed the dependencies already
sudo rm -R node_modues

# copy the custom-webpack.config.js in this folder
cp ../../custom-webpack.config.js ./

# start IC local replica
dfx start

# open a new terminal on this location
# build and install the default motoko canister main.mo
# it is already there because if the dfx new command
dfx deploy backend

# create declarations folder with did files and Actor serviceWorker
dfx generate backend

Test your backend canister

It's time to test the backend canister.

# it's time to test the backend canister
dfx canister call backend greet 'Roland'

# should show you ("Hello, Roland!") in the terminal

Create IC Service

Let's create an Angular-service to interact with the backend.

cd ../src/app

# create a basic IC Service
ng g s ic

Replace the content of ic.service.ts with the following snipped.

import { Injectable } from '@angular/core';
const ic_service = require('../../backend/src/declarations/backend').backend;

@Injectable({
  providedIn: 'root'
})
export class IcService {
  constructor() { }
  public async greet(name:string){
    return await ic_service.greet(name);
  }
}

Replace the content of app.component.ts with the following:

import { Component } from '@angular/core';
import { IcService } from './ic.service' ;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:string = 'Garden';
  ic_response:string = '';

  constructor(private icService:IcService){
    this.getGreet('Roland');
  }
  public async getGreet(name:string){
    this.ic_response = await this.icService.greet(name);
  }
}

All preparations are done, now we can start the Angular development server.

Start and test your setup

cd ../../
# on the root position of the Angular project call
ng serve

Open your Browser and open the Angular developemnt URL.

http://localhost:4200 should show your first component

That's it, now you have an Angular application which can interact with an Motoko canister as a backend.