CODEWITHSUNDEEP
angulartypescriptgoogle-maps-api-2
Radiant
Radiant

Reputation: 390

provide google maps api key from config.json file

I have config.json file where i have procided all urls and keys. There is one parameter called "googleMapsApiKey" where i have my "map key". I want to provide this key to my module file so that i can use google maps but I am unable to provide it. Below is my code.

config.json

{
      "googleMapsApiKey": "MY KEY",
   }

MobileContentModule.ts

import { ConfigService } from '../../../HiP-CmsAngularApp/app/config.service';

    @NgModule({
      imports: [
        AgmCoreModule.forRoot({
          apiKey: 'WANT TO PROVIDE THAT KEY HERE', ---> from config.json
          libraries: ['places']
        }),
        CommonModule,
        FormsModule,

There is one service called ConfigService where I am accessing my config.json file. I have imported this service in MobileContentModule.ts file.

Can anyone help me to get my google api key from config.json file? Purpose of this is, that we dont want to expose this key on github.

Upvotes: 1

Views: 2703

Answers (2)

Nick Van Berckelaer
Nick Van Berckelaer

Reputation: 71

In Angular 6.1+:

app.module.ts

import * as fromConfig from 'config.json';

@NgModule({
imports: [
AgmCoreModule.forRoot({
            apiKey: fromConfig.googleJSAPIKey,
            libraries: ['places'],
        }),]
})

tsconfig.json:

{
    "compilerOptions": {
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

Upvotes: 0

ylerjen
ylerjen

Reputation: 4249

Import it in your file like so :

import data from './config.json';
[...]
AgmCoreModule.forRoot({
  apiKey: data.googleMapsApiKey
  libraries: ['places']
}),[...]

But TypeScript 2+ will complain about Cannot find module 'config.json'. Then you'll have to use a wildcard declaration like 

declare module "json!*" {
    const value: any;
    export default value;
}

(see https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations)

Upvotes: 1

Related Questions