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.
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.
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
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>
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"
Do the following changes to the tsconfig.app.json file:
compilerOptions.types add "node"
This is also needed for the build process.
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
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
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.