How do you load env variables at runtime in angular?

In Angular you use the

environment.ts

. I don't think you can access the node environment, that would need to happen as part of the build process.

Conceptually, we don't have env variables in frontend projects. Since it runs on the client we can't define envs there. What we do is to inject the env values to the code when building the application. Im not familiar with angular but you probably need to setup your build script to load this envs and build with the values there. maybe use https://www.npmjs.com/package/dotenv? Another approach but IDK if it's a good practice you could manually store the envs in SSM https://docs.aws.amazon.com/systems-manager/latest/userguide/systems-manager-parameter-store.html and fetch via aws call at runtime.. but I wouldn't do this..

See 2 questions up. That's how I get the sst variables into angular for development. Just import the json file.

I want to pass the env variable from SST to angular

In the past i've tried • Find/replace placeholders in the compiled JS (Which is what SST StaticSite does) • Load everything at runtime • Generate a new build for every deployment and import the environment from a JSON file Haven't messed around with custom builders I found the 1st method by far the easiest.

@manitej see if this work https://serverless-stack.slack.com/archives/C01HQQVC8TH/p1637384987238400?thread_ts=1637313492.218000&cid=C01HQQVC8TH

Tried this @Frank but I didn't got it working in prod. Will try again

@manitej I don't think it's designed for prod. Are you using the StaticSite construct?

@Ryan Yes!

For prod, it should do a find/replace of the variables in the compiled Javascript files https://docs.serverless-stack.com/constructs/StaticSite#replace-deployed-values