Angular 5中AWS Cognito示例环境变量访问异常问题

Hey there! Let's work through this issue where your environment variable is coming up undefined in the user-login.service.ts file, even though you can see the full config exists in the debug scope. Here are the most likely fixes to try:

1. Verify the Environment File Export #

First, double-check your environment.ts (and environment.prod.ts) files in the environments folder. Make sure they’re exporting the environment object correctly with the export keyword—this is a super easy mistake to make:

// environments/environment.ts
export const environment = {
  production: false,
  sts_endpoint: 'your-sts-url-here',
  // other config properties...
};

If you forget export, the import statement won’t pull in anything, leading to undefined.

2. Confirm the Import Path #

Your import path is ../../environments/environment—let’s make sure that’s correct relative to your service file. If your service lives at src/app/service/user-login.service.ts, the path should point directly to src/environments/environment.ts. A quick test: use your IDE’s "go to definition" feature on the import; if it jumps to the right file, the path is good. If not, adjust the relative path (e.g., maybe ../environments/environment if your folder structure differs).

3. Clear Angular’s Build Cache #

Angular 5 can sometimes hold onto old cached builds that cause weird import glitches. Restart your dev server with the no-cache flag to rule this out:

ng serve --no-cache

If you’re building for production, use:

ng build --no-cache --prod

4. Check Angular CLI Configuration #

Make sure your .angular-cli.json file (Angular 5 uses this instead of angular.json) has environments properly configured. Look for the apps array and ensure it includes:

"apps": [
  {
    // other app settings...
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
]

If this mapping is missing or incorrect, Angular won’t bundle the right environment file during build.

5. Force the Compiler to Recognize the Import #

In some cases, tree-shaking optimizations might mistakenly eliminate the environment import if it looks unused (even though you are using it). To fix this, explicitly reference the variable early in your service to flag it as needed:

import { environment } from "../../environments/environment";

// Add this line to confirm the import loads correctly
console.log('Loaded environment config:', environment);

// Your existing code
if (environment.sts_endpoint) { 
  clientParams.endpoint = environment.sts_endpoint; 
}

This tells the compiler the variable is essential, so it won’t drop it during bundling.

6. Temporary Debug Workaround (Not Recommended Long-Term) #

If you need a quick fix to test while troubleshooting, you can reference the compiled variable you saw in the debug scope. Add a declaration for it at the top of your service:

declare const environment_1: any;
const env = environment_1.environment;

// Use env instead of environment
if (env.sts_endpoint) {
  clientParams.endpoint = env.sts_endpoint;
}

Again, this is just a temporary measure—you’ll want to fix the root import issue for production.

Start with the first three steps, as those are the most common culprits. Once you verify the export, path, and clear the cache, the environment variable should load correctly!

内容的提问来源于stack exchange，提问作者Feng Zhang