# How to Work with Angular and MySQL **URL:** \ **Category:** Developer Blog Comments\ **Created:** [August 16, 2019, 4:00pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119 "2019-08-16T16:00:59Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [August 16, 2019, 4:00pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/1 "2019-08-16T16:00:59Z")
[How to Work with Angular and MySQL](https://developer.okta.com/blog/2019/08/16/angular-mysql-express) Do you need to connect to MySQL from your Angular app? This guide will help you do just that! ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [March 8, 2020, 8:51am UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/2 "2020-03-08T08:51:04Z")
**Zohaib Siddique** Is this recommended to develop a scalable social media website and related mobile apps (iOS & Android)? using NodeJS, AngularJS and MySQL? Which one is best to use for a social media website, MongoDB or MySQL? ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [March 12, 2020, 11:31pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/3 "2020-03-12T23:31:23Z")
**Matt Raible** You could probably build a scalable social media website with any technology as long as you have good caching and a share-nothing architecture. MongoDB or MySQL could fit well into either one of those. It’s usually more important that you have a good architecture and smart developers moreso than choosing the right technologies. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [March 14, 2020, 10:03pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/4 "2020-03-14T22:03:07Z")
**Rafał Jaworowski** I would like to test your app but I have 3 errors. Could you tell me how fix this? I never use before okta but it`s very interesting. On server site I done this: npm install --save-exact express@4.17.1 cors@2.8.5 mysql@2.17.1 npm install --save-exact express-bearer-token@2.4.0 @okta/jwt-verifier@1.0.0 ERROR Error: Replace {yourOktaDomain} with your Okta domain. You can copy your domain from the Okta Developer Console. Follow these instructions to find it: [https://bit.ly/finding-okta…](https://bit.ly/finding-okta-domain "https://bit.ly/finding-okta-domain") at new ConfigurationValidationError (lib.js:27) at Object.push…/node\_modules/@okta/configuration-validation/dist/lib.js.configUtil.assertIssuer (lib.js:74) at new OktaAuthService (okta.service.js:73) at createOktaService (createService.js:5) at _callFactory (core.js:26500) at createProviderInstance (core.js:26439) at resolveNgModuleDep (core.js:26383) at NgModuleRef.get (core.js:27491) at resolveDep (core.js:28021) at createClass (core.js:27865) View\_AppComponent\_Host\_0 @ AppComponent\_Host.ngfactory.js? [sm]:1 AppComponent\_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ View\_AppComponent\_Host\_0 @ AppComponent\_Host.ngfactory.js? [sm]:1 main.ts:12 Error: Replace {yourOktaDomain} with your Okta domain. You can copy your domain from the Okta Developer Console. Follow these instructions to find it: [https://bit.ly/finding-okta…](https://bit.ly/finding-okta-domain "https://bit.ly/finding-okta-domain") at new ConfigurationValidationError (lib.js:27) at Object.push…/node\_modules/@okta/configuration-validation/dist/lib.js.configUtil.assertIssuer (lib.js:74) at new OktaAuthService (okta.service.js:73) at createOktaService (createService.js:5) at \_callFactory (core.js:26500) at _createProviderInstance (core.js:26439) at resolveNgModuleDep (core.js:26383) at NgModuleRef_.get (core.js:27491) at resolveDep (core.js:28021) at createClass (core.js:27865) ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [March 21, 2020, 2:14am UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/5 "2020-03-21T02:14:31Z")
**Larry Cousino** I keep getting a unsupported\_response\_type when I run the app. I’ve verified my client Id and URL are correct. Any suggestions? I am a very new developer. At least I know the app is trying to talk to OKTA. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [March 23, 2020, 6:13am UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/6 "2020-03-23T06:13:54Z")
**Matt Raible** Hello Larry, This is likely because you created a new app on Okta and used the default (Authorization Code flow). If you modify your app to use Implicit flow, everything should work. Since this tutorial was written, we changed the default from Implicit to Authorization Code Flow. Another (more secure) option is to change your Angular client to turn on PKCE. To do this, change your code in `src/app/app.module.ts` to turn on PKCE. ``` OktaAuthModule.initAuth({ issuer: ‘https://{yourOktaDomain}/oauth2/default’, redirectUri: ‘http://localhost:4200/implicit/callback’, clientId: ‘{yourClientId}’, pkce: true}) ``` I realize I used a lot of buzzwords in this answer. If you’d like clarification on any terms, please let me know. We have lots of other blog posts and YouTube videos that help explain these concepts. You could also create a bare-bones Angular app and add Okta for Auth with OktaDev Schematics. See [https://github.com/oktadeveloper/schematics#angular](https://github.com/oktadeveloper/schematics#angular "https://github.com/oktadeveloper/schematics#angular") for more information. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [April 27, 2020, 12:14pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/7 "2020-04-27T12:14:51Z")
**Mathias** Access to XMLHttpRequest at ‘[http://localhost:8080/event](http://localhost:8080/event)’ from origin ‘[http://localhost:4200](http://localhost:4200)’ has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response. core.js:9110 ERROR Error: Uncaught (in promise): HttpErrorResponse: {“headers”:{“normalizedNames”:{},“lazyUpdate”:null,“headers”:{}},“status”:0,“statusText”:“Unknown Error”,“url”:“[http://localhost:8080/event",“ok”:false,“name”:“HttpErrorResponse”,“message”:"Http](http://localhost:8080/event%22,%22ok%22:false,%22name%22:%22HttpErrorResponse%22,%22message%22:%22Http) failure response for [http://localhost:8080/event:](http://localhost:8080/event:) 0 Unknown Error”,“error”:{“isTrusted”:true}} POST [http://localhost:8080/event](http://localhost:8080/event) net::ERR\_FAILED ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [April 27, 2020, 3:08pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/8 "2020-04-27T15:08:31Z")
**Matt Raible** Make sure you have CORS configured in your Node.js app: ``` const app = express() .use(cors()) … ``` ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [April 27, 2020, 3:14pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/9 "2020-04-27T15:14:33Z")
**Mathias** server application index.js includes already const app = express() .use(cors()) .use(bodyParser.json()) .use(bearerToken()) .use(oktaAuth) .use(events(connection)); ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [April 28, 2020, 8:55am UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/10 "2020-04-28T08:55:02Z")
**Holger Schmitz** You might try changing the `.use(cors())` line to `.use(cors({origin: ‘http://localhost:4200’}))` If that doesn’t work, can you open the browser’s debug tool and look at the network traffic? There should be an OPTIONS request going out to [http://localhost:8080/event](http://localhost:8080/event). The server response to that request may help in finding out what the problem is. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [April 28, 2020, 9:13am UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/11 "2020-04-28T09:13:18Z")
**Mathias** Its the same problem with the changed cors policy. an event request is colored red Request URL: [http://localhost:8080/event](http://localhost:8080/event) Referrer Policy: no-referrer-when-downgrade Provisional headers are shown Accept: application/json, text/plain, _/_ Authorization: Bearer eyJraWQiOiI0blh0cWpUNVA2RU9zSkNiQzNJcDR0R25CWlpCQzZrZDIxdmtpd3BKakdNIiwiYWxnIjoiUlMyNTYifQ.eyJ2ZXN1UiLCJpc3…WGM6f4iQ3HfPNH64XvVTcMESxV0t8HGkpZJjEo6JF8-8LnQ-dNM\_KxoWuAOBwoJc3A\_xwMoWhyT4rGEYUNaxeAF4M\_snvJuxZw Referer: [http://localhost:4200/timeline](http://localhost:4200/timeline) User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36 The response tab says: failed to load response data If i visit [http://localhost:8080/event](http://localhost:8080/event) it shows the normal default angular page Test app is running! ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [April 28, 2020, 5:03pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/12 "2020-04-28T17:03:11Z")
**Holger Schmitz** If you visit [http://localhost:8080/event](http://localhost:8080/event) you should not be seeing any Angular page. This is the port that the Express server is running on. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [April 29, 2020, 2:22pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/13 "2020-04-29T14:22:39Z")
**Azad Rahman** your post is stolen! [https://dzone.com/articles/…](https://dzone.com/articles/tutorial-connect-your-angular-app-to-mysql "https://dzone.com/articles/tutorial-connect-your-angular-app-to-mysql") I request you to take action ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [June 3, 2020, 1:46pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/14 "2020-06-03T13:46:42Z")
**Matt Raible** Our blog posts are syndicated on DZone from time to time, so it’s OK. If you scroll to the bottom of the article, you’ll notice it links back to this one. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [July 11, 2020, 3:38pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/15 "2020-07-11T15:38:17Z")
**Ashok Khanna** Hi - thank you for a fantastic tutorial, really appreciate it. Everything was clear to understand and worked great. If there is anyway I can contribute back please let me know. Also, the Okta authentication worked like a charm and I found it much easier to install than the AWS one I tried earlier on another project, keep up the good work. I did my installs with the latest version of each program (vs. the version numbers in the tutorial), and had Okta set up for Authorisation Code Flow (latest defaults), only thing I had to change was to use the following app.module.ts (if you google you will see this is the latest practice). This was done on a Mac OS X and also linux (but I didn’t test linux, since it was a headless server and I couldn’t figure out how to get a GUI browser working - but everything compiled perfectly, so not expecting any issues). It’s a bit off topic, but do you know how I can move from having a localhost website to having it on my public domain name? Most of the angular blogs talk about deploying via ‘ng build’ and transferring a static set of files to your hosting provider, but I believe this cannot work in this case since we have a local server for the database also (and I’d prefer to keep the database with myself and not via a cloud provider, since its already working well in this example and gives me greater control). All the best, Ashok `import { BrowserModule } from ‘@angular/platform-browser’;import { HttpClientModule } from ‘@angular/common/http’;import { NgModule } from ‘@angular/core’;import { BsDatepickerModule } from ‘ngx-bootstrap/datepicker’;import { NgxTimelineModule } from ‘ngx-timeline’;import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’;import { AppRoutingModule } from ‘./app-routing.module’;import { AppComponent } from ‘./app.component’;import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;import { ModalModule } from ‘ngx-bootstrap/modal’;import { HomeComponent } from ‘./home/home.component’;import { TimelineComponent } from ‘./timeline/timeline.component’;import { OKTA_CONFIG, OktaAuthModule } from ‘@okta/okta-angular’;const oktaConfig = {issuer: ‘https://[xyz - put actual values here]/oauth2/default’,redirectUri: ‘http://localhost:4200/implicit/callback’,clientId: ‘[abc - put actual values here]’,pkce: true}@NgModule({declarations: [AppComponent,HomeComponent,TimelineComponent],imports: [BrowserModule,HttpClientModule,AppRoutingModule,BrowserAnimationsModule,FormsModule,ReactiveFormsModule,BsDatepickerModule.forRoot(),NgxTimelineModule,ModalModule.forRoot(),OktaAuthModule],providers: [{ provide: OKTA_CONFIG, useValue: oktaConfig }],bootstrap: [AppComponent]})export class AppModule { }` ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [August 3, 2020, 5:51pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/16 "2020-08-03T17:51:02Z")
**Matt Raible** If you want to use a local database for a public app, you’ll need to setup your network so your public app can talk to your local database. You’ll likely need to setup firewall rules and all kinds of other security measures to make sure no one can access your MySQL database. I wouldn’t worry about putting it in the cloud as it’s likely that AWS and Google already have all these security measures in place. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [August 3, 2020, 7:42pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/17 "2020-08-03T19:42:22Z")
**Ashok Khanna** Thank you Matt. In the end, I used nginx to reverse proxy into the localhost server, and used ng build to produce the static files that I hosted publicly. Cheers! Thanks again for a great tutorial ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [October 15, 2020, 5:24pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/18 "2020-10-15T17:24:13Z")
**Steven Seabell** Hi I came across this post after searching for angular and wordpress. This is very confusing for me as I am a 3d model designer. I have a client that wants the same functionality as this website. [https://web.tecalliance.net…](https://web.tecalliance.net/tecdocsw/en/home "https://web.tecalliance.net/tecdocsw/en/home"). I think this was designed in angular. (I don’t even know what that is) Can you design the same functionality and link to wordpress website. If you are interested I can send you the login details. My email is steven@triforce.co.za for any correspondence. Thank you ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [February 18, 2021, 10:25pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/19 "2021-02-18T22:25:42Z")
**Cripe HD** I have an error but I dont know what to do 😕 ERROR Error: Uncaught (in promise): OAuthError: The response type is not supported by the authorization server. Configured response types: [code]. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [March 1, 2021, 11:19pm UTC](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119/20 "2021-03-01T23:19:24Z")
**Matt Raible** Did you create an Okta developer account? If so, does your issuer end with “/oauth2/default”? You must have an authorization server setup for this to work. You should see one at API \> Authentication Servers. See [these docs](https://developer.okta.com/docs/concepts/auth-servers/ "https://developer.okta.com/docs/concepts/auth-servers/") for more information. [Next page](https://devforum.okta.com/t/how-to-work-with-angular-and-mysql/17119.md?page=2)