【ERROR】Error: 404 - Could not find API route. Please check your available APIs.

问题描述

这样的，我小心翼翼终于启动了dev容器后，决定不怎么动它，只在angular里面写东西。
启动angular后发现页面上有这个问题：

Error: 404 - Could not find API route. Please check your available APIs.

可我检查了3000的rest api，很正常啊！
？？？？？
所以
？？？？？

解决方法

参考这篇
https://stackoverflow.com/questions/46563282/hyperledger-rest-server-angular-web-app-getting-could-not-connect-to-rest-server
修改angular目录下proxy.cong.js的代码，start栏。

  "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"
  },

cielo@cielo-ThinkPad-E550:~/cprogrames/csupplychain/CSupplyChain$ npm start

> CSupplyChain@0.0.1 start /home/cielo/cprogrames/csupplychain/CSupplyChain
> ng serve --proxy-config proxy.conf.js --host localhost

** NG Live Development Server is running on http://localhost:4200 **
 10% building modules 4/4 modules 0 active[HPM] Proxy created: [ '/auth', '/api' ]  ->  http://localhost:3000
[HPM] Proxy created: /  ->  http://localhost:3000
Hash: 4f13260bee9704e3d77b                                                               
Time: 23629ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 297 kB {5} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 101 kB {4} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 184 kB {5} [initial] [rendered]
chunk    {3} scripts.bundle.js, scripts.bundle.js.map (scripts) 464 kB {5} [initial] [rendered]
chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.16 MB [initial] [rendered]
chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

配置

Composer rest server的配置如下：

cielo@cielo-ThinkPad-E550:~/cprogrames/csupplychain/dist$ composer-rest-server
? Enter the name of the business network card to use: admin@csupplychain
? Specify if you want namespaces in the generated REST API: always use namespaces
? Specify if you want to use an API key to secure the REST API: No
? Specify if you want to enable authentication for the REST API using Passport: No
? Specify if you want to enable the explorer test interface: Yes
? Specify a key if you want to enable dynamic logging: csupplychain
? Specify if you want to enable event publication over WebSockets: Yes
? Specify if you want to enable TLS security for the REST API: No

To restart the REST server using the same options, issue the following command:
   composer-rest-server -c admin@csupplychain -n always -u true -d csupplychain -w true

Discovering types from business network definition ...
Discovering the Returning Transactions..
Discovered types from business network definition
Generating schemas for all types in business network definition ...
Generated schemas for all types in business network definition
Adding schemas for all types to Loopback ...
Added schemas for all types to Loopback
Web server listening at: http://localhost:3000
Browse your REST API at http://localhost:3000/explorer
Rest Server dynamic logging is enabled

angular的配置如下：

cielo@cielo-ThinkPad-E550:~/cprogrames/csupplychain$ yo hyperledger-composer:angular
Welcome to the Hyperledger Composer Angular project generator
? Do you want to connect to a running Business Network? Yes
? Project name: CSupplyChain
? Description: Hyperledger Composer Angular project
? Author name: cielo
? Author email: cielo0@qq.com
? License: Apache-2.0
? Name of the Business Network card: admin@csupplychain
? Do you want to generate a new REST API or connect to an existing REST API?  Connect to an existing REST API
? REST server address: http://localhost
? REST server port: 3000
? Should namespaces be used in the generated REST API? Namespaces are used
Created application!
Completed generation process
   create app.js
   create Dockerfile
   create e2e/app.e2e-spec.ts
   create e2e/app.po.ts
   create e2e/tsconfig.e2e.json
   create e2e/tsconfig.json
   create karma.conf.js
   create manifest.yml
   create package.json
   create protractor.conf.js
   create proxy.conf.js
   create README.md
   create src/app/app-routing.module.ts
   create src/app/app.component.css
   create src/app/app.component.html
   create src/app/app.component.spec.ts
   create src/app/app.component.ts
   create src/app/app.module.ts
   create src/app/asset/images/delete_noun_cc.svg
   create src/app/asset/images/edit_noun_cc.svg
   create src/app/asset/images/failed_noun_cc.svg
   create src/app/asset/images/success_noun_cc.svg
   create src/app/data.service.ts
   create src/app/home/home.component.css
   create src/app/home/home.component.html
   create src/app/home/home.component.ts
   create src/environments/environment.prod.ts
   create src/environments/environment.ts
   create src/favicon.ico
   create src/index.html
   create src/main.ts
   create src/polyfills.ts
   create src/styles.css
   create src/test.ts
   create src/tsconfig.app.json
   create src/tsconfig.json
   create src/tsconfig.spec.json
   create tsconfig.json
   create tslint.json
   create .angular-cli.json
   create .editorconfig
   create .gitignore
   create .dockerignore
   create .cfignore
   create .npmignore
   create src/app/SampleAsset/SampleAsset.component.ts
   create src/app/SampleAsset/SampleAsset.service.ts
   create src/app/SampleAsset/SampleAsset.component.spec.ts
   create src/app/SampleAsset/SampleAsset.component.html
   create src/app/SampleAsset/SampleAsset.component.css
   create src/app/SampleParticipant/SampleParticipant.component.ts
   create src/app/SampleParticipant/SampleParticipant.service.ts
   create src/app/SampleParticipant/SampleParticipant.component.spec.ts
   create src/app/SampleParticipant/SampleParticipant.component.html
   create src/app/SampleParticipant/SampleParticipant.component.css
   create src/app/SampleTransaction/SampleTransaction.component.ts
   create src/app/SampleTransaction/SampleTransaction.service.ts
   create src/app/SampleTransaction/SampleTransaction.component.spec.ts
   create src/app/SampleTransaction/SampleTransaction.component.html
   create src/app/SampleTransaction/SampleTransaction.component.css


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.


npm install过程略

added 1178 packages from 1402 contributors and audited 9765 packages in 68.771s
found 35 vulnerabilities (15 low, 8 moderate, 12 high)
  run `npm audit fix` to fix them, or `npm audit` for details
Application generated

cielo@cielo-ThinkPad-E550:~/cprogrames/csupplychain/CSupplyChain$ nf serve
nf: command not found
cielo@cielo-ThinkPad-E550:~/cprogrames/csupplychain/CSupplyChain$ ng serve
Your global Angular CLI version (7.3.8) is greater than your local
version (1.0.1). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
** NG Live Development Server is running on http://localhost:4200 **
Hash: 4f13260bee9704e3d77b                                                               
Time: 24020ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 297 kB {5} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 101 kB {4} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 184 kB {5} [initial] [rendered]
chunk    {3} scripts.bundle.js, scripts.bundle.js.map (scripts) 464 kB {5} [initial] [rendered]
chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.16 MB [initial] [rendered]
chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.