0

I have 2 html pages index.html and login.html page. index.html page is used by the angular app, Is there a way to inject or access environment values in login.html page?

I don't want to repeat the envrionment settings twice as they may go out of sync.

Edit Login page markup is below. In the below code I need to change authority, redirect_uri by the environment in which it is running. Index.html page which runs angular uses environment.ts files to store environment specific urls and at build time it compiles the project with those settings. The problem I am having is that I cannot access environment.ts variables outside angular.

<head>
    <script src="assets/scripts/oidc-client.min.js"></script>
    <script type="text/javascript">
        function onUserLoggedOut(arg) {
            const settings = {
                authority: 'http://localhost:2228',
                client_id: '#####',
                redirect_uri: 'http://localhost:4200/auth.html',
                post_logout_redirect_uri: 'http://localhost:4200',
                response_type: 'id_token token',
                scope: 'openid',
                monitorSession: true,
                silent_redirect_uri: 'http://localhost:4200/silent-renew.html',
                automaticSilentRenew: false,
                silentRequestTimeout: 30000,
                accessTokenExpiringNotificationTime: 30,
                filterProtocolClaims: true,
                loadUserInfo: true,
                acr_values: 'tenant:1'
            };

            (new Oidc.UserManager(settings)).signinRedirect(tenant_acr).then((resp) => {
            });
        }

    </script>
</head>

<body>
    <iframe src="http://localhost:2228/Account/Logout" onload="onUserLoggedOut(this)" >
    </iframe>
</body>
Yousuf
  • 3,105
  • 7
  • 28
  • 38
  • Are both pages being served by the Angular app? And are the environment variables passed into the app via the command line, or are they in the Angular application already (in components, etc) – joh04667 May 09 '17 at 21:03
  • Only index page is served by angular. I'm using angular cli environment files to store settings for different environments. Environment object is injected into components using angular DI. – Yousuf May 09 '17 at 22:18
  • can you post more a bit about your setup and how the `login.html` is being served? It might be best to just store that somewhere on your backend or as part of your build process, but that would depend on your setup. – joh04667 May 09 '17 at 22:20
  • @joh04667 I have edited by question. As you mentioned, I might have to write some node task to replace the environment variables at build time in non-angular html pages. – Yousuf May 10 '17 at 13:04
  • 1
    Okay. If it's on the backend, you can grab that data as part of Angular's `APP_INITIALIZER` process at startup. See this post for more details: http://stackoverflow.com/questions/42077544/angular-2-and-team-city-production-environment-variables – joh04667 May 10 '17 at 17:01
  • Thank you! That looks like it will work in my scenario. – Yousuf May 10 '17 at 18:22

0 Answers0