Build a Simple Web App with Express, Angular, and GraphQL

Build a Simple Web App with Express, Angular, and GraphQL

‘A tutorial to build a simple web application using Express, Angular, and GraphQL.’

Paul Wade

I’ve taken a look at Breeze and it looks pretty good. I would be interested in how you think breeze compared to GraphQL.

Matt Raible

To get more visibility for this request, can you please post it as an issue in our Angular SDK on GitHub? Thanks!

Thomas Roedding

I have a problem getting the sample running. In the first round I did every step as described. The first before securing went fine. After the second part logging in and out works fine, but no data is displayed anymore, just empty tables. Then as a second round I downloaded the GitHub-version, installed all packages and changed only the auth-url and the client id. Same result.

Neither server nor client show any error messages.
Any idea? What could I do to figure out why no data is displayed?

Gadi Eichhorn

Nice one! but did you forgot the proxy setup details?

Thomas Roedding

Well, I figured out to get the example running. I am not 100% sure but I believe there are some small differences between the instructions above and the given files on GitHub:

1. in app-routing.module.ts: “canActivate: [OktaAuthGuard];”
-> I think the semicolon is a typo and not supposed to be there

2. In the client’s file “GraphQL.module.ts” I had some differences: the header caused an error. I changed to two following snippets:
a) for the header: Authorization => 'Authorization’
and further down:
b) for the NGModule: deps [HttpLink] => deps [HttpLink, OktaAuthService]

Maybe that helps anybody running in the same problem.

Joel Kapuku

Great tutorial mate!. Please look out for inconsistency in the schema table and the ones in the solution, It took me about an hour to figure out why was some of my return value was coming back as null…

Andrew Gregware

Great tutorial!

I am stuck on the ng serve step with the following error

Error: src/app/app.component.ts:9:14 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

9 export class AppComponent implements OnInit {

Any help provided would be great!

Matt Raible

I would recommend comparing your code to the example on GitHub. SmartSynchronize is a great tool for comparing directory contents.

Andrew Gregware

Thank you Matt!

Andrew Gregware

I guess the issue is that the okta site shown above has been deprecated and the new version has a list of hundreds of apps to choose from. No oauth2 tag anywhere to be found. We must first create and organization and users within the organization before creating a single view app? Kind of confusing.

Matt Raible

That’s why I recommend the Okta CLI. It’s less confusing. Install using, then run “okta apps create”.