如何将config.js配置文件引入Angular的main.bundle.js？

Hey there! I get it—trying to get a global config file working without jumping through hoops can be frustrating, especially when the HttpClient approach didn't pan out. Let's walk through a straightforward, reliable way to set this up exactly how you want it:

Step 1: Create Your Root-Level Config.js & Ignore It in Git #

First, make your config.js file right in your project root. Attach your config variables to the window object so they're accessible everywhere:

// config.js
window.APP_CONFIG = {
  API_BASE_URL: "https://your-production-api.com",
  FEATURE_FLAGS: {
    ENABLE_DARK_MODE: true,
    SHOW_BETA_WIDGET: false
  },
  MAX_UPLOAD_SIZE: 5242880 // 5MB in bytes
};

Next, add this file to your .gitignore so it never gets committed to your repo:

# .gitignore
config.js

Step 2: Make It Globally Accessible #

The key here is loading this config before any of your app code runs, so the variables are ready to use immediately.

For Vanilla JS Projects #

Add a <script> tag for config.js in your index.html, placing it above your main app scripts:

<!-- index.html -->
<head>
  <!-- ...other head content -->
  <script src="./config.js"></script>
</head>
<body>
  <!-- ...your app markup -->
  <script src="./app.js"></script> <!-- Your main app script comes after -->
</body>

Now you can access your config anywhere in your code like this:

// app.js
console.log(APP_CONFIG.API_BASE_URL); // No need for window. prefix (it's implied)

For Vue Projects #

After adding the script tag to index.html, you can mount the config to the Vue prototype for easy component access:

// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
  created() {
    Vue.prototype.$config = window.APP_CONFIG;
  }
}).$mount('#app');

Then in any component:

<template>
  <div>API URL: {{ $config.API_BASE_URL }}</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$config.FEATURE_FLAGS.ENABLE_DARK_MODE);
  }
};
</script>

For React Projects #

Start by adding the script tag to index.html. For cleaner component access, create a custom hook:

// hooks/useConfig.js
export const useConfig = () => {
  return window.APP_CONFIG;
};

Then use it in any component:

import { useConfig } from './hooks/useConfig';

function UserProfile() {
  const config = useConfig();
  return (
    <div>
      Max upload size: {config.MAX_UPLOAD_SIZE / 1024 / 1024}MB
    </div>
  );
}

Why This Works Better Than the HttpClient Approach #

The asset/HttpClient method forces your app to make an extra network request to load the config, which means your app might initialize before the config is available—leading to errors or race conditions. By loading config.js as a synchronous script, the variables are ready the moment your app starts running, no async waiting required.

内容的提问来源于stack exchange，提问作者Dallas Caley