0

after deploying the "AngularJs_1.5.11" app to "azure-websites" using "azure-devops" continuous-integration and deployment gives error:

[$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module app.core due to: Error: [$injector:unpr] Unknown provider: ENV_VARS

below is the screenshot of the error while accessing the AngularJS azure-website : error while accessing the AngularJS azure-website also find below screenshot of my build pipeline in azure-devops which deploys AngularJS application build to "azure-websites" build pipeline in azure-devops below screenshot is my application code in VSCode application code in VSCode I just started working on this new project which uses AngularJS_1.5.11 so I have no clue what is going wrong. I tried these links unknown ENV provider in AngularJS from stack but as I am new to AngularJS I have no idea where to apply the changes in my code mentioned in the link.

Any suggestions would be of great help.

Edit:

@Mark if you look at the screenshots below you will come to know how we are setting "ENV_VARS" in the code using "gulp.js, env.config.js, config.json" file enter image description here

Edit1:

@Mark please find the screenshot of the 'config.js' file which gets created in the gulp task 'ng-config' using source file 'config.json' under "./src/client/app/config.js" config files

Vijay Ande
  • 101
  • 11

1 Answers1

1

Here are the docs regarding the knowledge relevant to this issue.

Somewhere in your program, it is trying to reference one or more members defined in an angular provider registered as "ENV_VARS". Providers are angularjs objects that are available during compile time (see the table row for "object available in config phase" in this SO answer)

I would search the source of the application to see if this provider was further configured elsewhere (you can search by its name 'ENV_VARS') as it may not be getting sent over with your other source files.

To attempt a quick fix:

On the first line of your app.module.js, change it to this

angular.module('app.config', []).constant("ENV_VARS", {});

This will likely result in another error, but it should pinpoint you to what is trying to access this provider. I'm assuming this is either inherited code or from a purchased template so you may want to investigate the sources to that if possible.

Mark Clark
  • 471
  • 4
  • 15
  • thanks @Mark for prompt response. your comments are really helpful. I will try to implement what you have mentioned. Mark I would request you to please take a look at my updated original post under **Edit:** to see the code we are using for setting "ENV_VARS" in our project. If that's fair to set "ENV_VARS" in the project, do you think the code change you mentioned in your comments will work ? or do I need to set or inject "ENV_VARS" anywhere else in the project. Thanks for your time for replying to this post. Its been a week I am working on this issue but unable to find any solution online. – Vijay Ande Jun 05 '19 at 15:17
  • @Vijay If I am understanding your screenshots correctly, it looks like gulp is creating the source file for configuring the provider in question. Then that source file is piped into a gulp task ngConfig that generates 'app.config' as a constant. The only thing I'm not sure about is where that file is being placed (config.client+'app') and if your web application is bundling it so that it is present when angularjs is bootstrapped on the client. – Mark Clark Jun 05 '19 at 19:45
  • you are right that gulp task is creating the source file "config.json" and this file is piped into gulp task "ngConfig" that generates "config.js" which is placed under ".\src\client\app" folder. I have attached a screenshot for your reference in my original post under **Edit1:**. Now the question is "the web application is bundling it so that it is present when angularjs is bootstrapped on the client"? if not how to make it to bundle it. If you look at my "CI/CD" pipeline in my original post I am using "gulp build" task to create a bundle and then move the bundle to azure website. – Vijay Ande Jun 05 '19 at 20:46
  • it is working fine in my local box, when I deploy it to azure-website using CI/CD it is giving me that "ENV_VARS" error that it is unable to find it. – Vijay Ande Jun 05 '19 at 21:01
  • Verify through scm/kudu or ftp that the config.js file is present and when you load the site, verify it is getting fetched by the browser. – Mark Clark Jun 06 '19 at 16:39
  • Mark all js and css files in the project gets minified and bundled up when I run "gulp build" into a build folder which get uploaded to azure website. what I found is gulp task "ng-config" is creating "config.js" file during the build pipeline of devops but when "gulp build" runs it is not taking the file content and injecting it into the minified "js" file. This makes "ENV_VARS" constant variable missing in the file and that causes the error message in the azure website. – Vijay Ande Jun 07 '19 at 11:51
  • Sorry for the late reply. This shouldn't matter if it makes it into the minified file or not. As long as it is present on the client after angular.js and your app's minified js, it should still get executed at config time. What you need to check is that the config.js is making it to the deployed directory and that it is getting sent to the client browser. If the creators of this template intended for the config.js to be minified with the app, it would probably be setup to happen in gulp already. Here is another thing to check: where is the config.js in the root layout html of your template? – Mark Clark Jun 26 '19 at 18:54