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.

回答1:

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)

回答2:

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

来源：https://stackoverflow.com/questions/50877147/provide-google-maps-api-key-from-config-json-file