Amplify.service.api.get returns sampleCloudAPI does not exist

Question

I'm trying to setup AWS Mobile Hub, specifically using Amplify and Angular (5). I've setup authentication, using the provided and it works great. I can login and access the username via the AWS provided sample like so:

this.amplifyService.authStateChange$
      .subscribe(authState => {
        this.signedIn = authState.state === 'signedIn';
        if (!authState.user) {
          this.user = null;
        } else {
          this.user = authState.user;
          this.greeting = 'Hello ' + this.user.username;
          console.log('greeting ' + this.greeting );
        }
      });

I then wanted to setup APIGateway/Lambda functions - so I enabled cloudLogic like so:

awsmobile cloud-api enable then did the push awsmobile push

I see the Cloudlogic sampleAPI setup in MobileHub. However, when I attempt to access, it keeps repeating not available.

newmethod(View) {
this.amplifyService.api().get('sampleCloudApi', '/items')
      .then(result => console.log('result' + result));
  }

The error I get in the javascript console is:

core.js:1449 ERROR Error: Uncaught (in promise): Api sampleCloudApi does not exist
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

I'm at a loss as to what do next. I've attempted to invoke this way:

awsmobile cloud-api invoke sampleCloudApi post /items '{"body": {"testKey":"testValue"}}'

But I still don't get a 200

Answer 1

In case anyone else bumps into this, I simply needed to copy the awe-exports.js from the backend directory, to the aws-exports.ts in the src directory. This had to be done manually after I added the cloud-logic portion

Answer 2

You can also modify your "start" script in package.json to below, so you don't have to manually change it every time.

"start": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ng serve; ng serve"

Answer 3

When you run awsmobile init it ask about the src/ directory because that will be the location that aws-exports.js file is going to be saved. Every time you run push or pull this file gets updated with the latest configuration of your resources on the cloud.