google map Key move from index.html

[manojkumarbehera]

keeping map key in index.html not a good idea in live environment.
Is there way can move the key from index.html to app.module.ts or environment.ts

[sscholle]

you may want to use an npm package such as 'load-script2' and implement a dynamic loader such as this:

import loadScript from 'load-script2';
let scriptPromise: Promise<any> | null = null;
export const scriptLoader = (scriptSrc: string, attrs?: object, parentNode?: HTMLElement, apiExists?: (any) => boolean): Promise<any> => {
  // if(!scriptPromise)
  scriptPromise = new Promise((resolve, reject) => {
    if (apiExists && apiExists(window as any)) {
      console.log('scriptLoader:apiExists', scriptSrc);
      resolve((window as any));
    } else {
      console.log('scriptLoader:loadScript', scriptSrc);
      loadScript(scriptSrc, attrs, parentNode)
      .then(() => {
        resolve((window as any));
      })
      .catch((err) => {
        reject(err);
      });
    }
  });
  return scriptPromise;
};

you can pass in your Google maps api url (and the key can be stored basically any way you like):
example:

scriptLoader(
      "YOUR SCRIPT HERE",
    ).then((win) => {
      // script loaded
    }).catch(e => {
      // something broke
    });