Hyperledger Angular App - error message: "Could not find API route" - angularjs

Question

Using Hyperledger Fabric Composer I created a simple application.
However, when I try to interact with the application (which is served at http://localhost:4200), I keep getting the following error message:
Error: 404 - Could not find API route. Please check your available APIs.
This error message appears whatever I want to do (create new Participant/Asset, submit a transaction, ...)
I checked whether the error message had something to do with the application I created. So I also deployed another application I downloaded from the Internet. Again, the same error message appeared when I tried to interact with the UI.
**********************************************************
Here's the long story:
After I had finished writing the code, I took the usual steps to obtain an Angular Web App:
Inside the folder of the app ("my_app"), I created a folder called "dist".
Inside folder "dist" I ran the following commands:
composer archive create -t dir -n ../
composer network install --archiveFile my_app#0.0.1.bna --card PeerAdmin#hlfv1
composer network start --networkName my_app --networkVersion 0.0.1 --card PeerAdmin#hlfv1 --networkAdmin admin --networkAdminEnrollSecret adminpw
composer card import -f admin#my_app.card
//start rest-server:
composer-rest-server
yo hyperledger-composer
After the last command I chose (from the menu) the option to create an "angular" application based on the business network "my_app".
A folder containing the angular-application was created (name of the folder: "angular").
Inside folder "angular", I ran the following command:
ng serve
Some output on the command line was created, among others, the following line:
** NG Live Development Server is running on http://localhost:4200 **
When I went to address http://localhost:4200 everything looked fine at first.
However, whenever I click on any of the buttons in the UI (e.g. on "Add Participant"), I get the following error message:
Error: 404 - Could not find API route. Please check your available APIs.

Answer 1

I found the solution:
using
"npm start"
instead of
"ng serve"
avoids the problem.
FYI. There is a tutorial that shows use of the Composer Angular generator incl the npm startsequence.

Answer 2

I had the same issue and got the same error messgae. So i recreated the angular application using the yo hyperledger-composer tool but this time instead of choosing "Connect to existing REST API" I chose "Create new REST API" and then it connected fine on localhost:4200 while the rest server still ran on port 3000.

Answer 3

I just ran into this problem with version 0.20 of the Composer CLI tools. I solved the issue by editing the following in the /package.json file:
The "start" entry originally had "0.0.0.0" for the host value -
"scripts": {
"ng": "ng",
"build": "ng build",
"prepack": "npm run build",
"start": "ng serve --proxy-config proxy.conf.js --host 0.0.0.0",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --watch false",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
}
I changed that to "localhost" -
"scripts": {
"ng": "ng",
"build": "ng build",
"prepack": "npm run build",
"start": "ng serve --proxy-config proxy.conf.js --host localhost",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --watch false",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
}
Everything worked after restarting the Angular app with the new settings.

Answer 4

I also encountered this error, I resolved it by running the composer and the angular app as a background process.
I installed the forever package to run the two as a background process.
Then just killed the process if you're not gonna use it.