我想将 main.ts 中的环境变量放入 index.html <script src="...">标签。 Index.html 如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>RoadFaultReporter</title>
<base href="./" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="manifest" href="manifest.webmanifest" />
<meta name="theme-color" content="#1976d2" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
</body>
</html>
代替<script src="">中的MY_KEY我想从变量 -environment.googleMapsApi 放置一个键。有什么办法可以做到这一点吗？
最佳答案
不，没有，但你可以用 Angular 的方式做到这一点；通过向 AppModule 添加提供的内容，您可以强制整个应用程序初始化等待谷歌地图加载。
下面的代码是我创建的。我在official package之前创建了它已创建，但我仍然使用我的，因为它没有依赖性，并且短了 450 行。
app.module.ts
@NgModule({
//...
providers: [
{
provide: APP_INITIALIZER,
useValue: () => loadGoogleMaps(environment.googleMapsKey),
multi: true,
},
],
})
export class AppModule {}
加载Google map
const CALLBACK_NAME = 'initMap';
export enum GoogleMapsLibraries {
/** provides a graphical interface for users to draw polygons, rectangles, polylines, circles, and markers on the map. Consult the [Drawing library documentation](https://developers.google.com/maps/documentation/javascript/drawinglayer) for more information. */
drawing = 'drawing',
/** includes utility functions for calculating scalar geometric values (such as distance and area) on the surface of the earth. Consult the [Geometry library documentation](https://developers.google.com/maps/documentation/javascript/geometry) for more information. */
geometry = 'geometry',
/** shows users key places of interest near a location that you specify. Consult the Local [Context library documentation](https://developers.google.com/maps/documentation/javascript/local-context) for more information. */
localContext = 'localContext',
/** enables your application to search for places such as establishments, geographic locations, or prominent points of interest, within a defined area. Consult the [Places library documentation](https://developers.google.com/maps/documentation/javascript/places) for more information. */
places = 'places',
/** provides heatmaps for visual representation of data. Consult the [Visualization library documentation](https://developers.google.com/maps/documentation/javascript/visualization) for more information. */
visualization = 'visualization',
};
export function loadGoogleMaps(googleMapsKey: string, libraries: GoogleMapsLibraries[] = []) {
if (!window) {
return Promise.resolve();
}
return new Promise<void>((resolve, reject) => {
function onError(err?: any) {
// eslint-disable-next-line @typescript-eslint/no-empty-function
(window as any)[CALLBACK_NAME] = () => {}; // Set the on load callback to a no-op
scriptElement.removeEventListener('error', onError);
reject(err || new Error('Could not load the Google Maps API'));
}
// Reject the promise after a timeout
const timeoutId = setTimeout(() => onError(), 10000);
// Hook up the on load callback
(window as any)[CALLBACK_NAME] = () => {
clearTimeout(timeoutId);
scriptElement.removeEventListener('error', onError);
resolve();
delete (window as any)[CALLBACK_NAME];
};
// Deduplicate libraries
libraries = [...new Set(libraries)];
// Prepare the `script` tag to be inserted into the page
const scriptElement = document.createElement('script');
scriptElement.addEventListener('error', onError);
scriptElement.async = true;
scriptElement.defer = true;
scriptElement.src = `https://maps.googleapis.com/maps/api/js?key=${googleMapsKey}®ion=Cz&language=cs&callback=${CALLBACK_NAME}&libraries=${libraries.join(',')}`;
document.head.appendChild(scriptElement);
});
}
关于index.html 文件中的 Angular 环境变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68620914/