hello-angular-motoko

This is an example of a Motoko project with an Angular 14 frontend.

Prerequesites

Install DFX.
Install Angular Globally
Install npm packages from the project root:
```
npm install
```
A https://nns.ic0.app wallet, logged in.
~5 US dollars worth of ICP transfered to your wallet address.
As taken from this guide:
1. Login to your https://nns.ic0.app, select your account and verify your balance.
2. Select the CANISTERS view on the left side navigation menu.
3. Click the blue "Create or Link Canister" button at the bottom of your page to open up the dialog.
4. Click the "Create New Canister" button. Then, select the ICP account that you want to use to fund your new canister.
5. You'll then be prompted to enter an amount. For now, put at least 2T Cycles.
6. Click "Review Cycles Purchase" and Confirm.
  - You will need to create 2 unique Canisters for this project. Repeat steps 3-6 to create a second canister.
7. You'll need to get the principal from your computer by running from the project root
```
dfx identity get-principal
```
8. Copy that principal id and head back to your CANISTERS view with your newly created Canisters. Click the blue "Change Controllers" button to open up the controller management UI.
  - Repeat for the second Canister.
9. Enter your principal in the empty second input, and then click "Perform Controller Change". This step authorizes your dfx on your computer to deploy to your newly created Canister.
  - Repeat for the second Canister as well.
10. Modify the canister_id.json file in the project root. Update both "motoko" and "www" "ic" properties.
```
# canister_id.json
{
"motoko": {
    # replace this with your unique cansiter from the above guide
    "ic":"your-unique-canister-goes-here"
},
"www": {
    # replace this with a second unique cansiter from the above guide
    "ic": "another-unique-canister-goes-here"
}
```

Getting Started

Initalize the project declarations and dfx processes:

# Deploys your canisters to the replica and generates your candid interface
npm run init:dfx

Serve the project locally:

# Starts the replica, running in the background
# Serves Angular and dfx canisters locally with hot reloading
npm run start

Once the job completes, your application will be available at http://localhost:4200.

If you make any changes while in development mode, the project will recompile on both the Angular and Motoko side.

Deploying the Project to the IC:

From the project root, deploy the project to your canisters provided in the Prerequesites.
```
npm run deploy:dfx
```

Testing Locally:

From the project root.
```
npm run test
```

Considerations

The npm build, prebuild and prestart commands are used by the IC processes. Using them elsewhere may have unintended side effects with other build processes.
Currently, the Typescript generated by DFX has trailing commas, which produces a conflict with Angular's default build configurations. Fixing this is beyound the scope of this example.
This example is intended to help those already familar with Angular to get started with the IC. This example is designed to be as straight forward as possible but it is not intended as a tool for learning Angular.

Additional CLI Commands

`npm run`	Description
`init:dfx`	Initial bootstrap of the IC.
`start`	Serve both project IC canisters locally with hot reloading.
`deploy:dfx`	Deploy to IC
`restart:dfx`	Restarts the local canister execution environment and web server processes. You can use this to Start the IC services as well.
`restart:clean:dfx`	Starts the local canister execution environment and web server processes in a clean state by removing checkpoints from your project cache. You can use this to set your project cache to a new state when troubleshooting or debugging.
`generate:motoko`	Generate canister type declarations for motoko supported programming languages. This will generate the `src/declarations` folder and remove conflicts. These generated js files allow you to consume the motoko language service on the front end. i.e `const ic_service = require('src/declarations/motoko').motoko;`

shawndotey/hello-angular-motoko