Azure CI deploy of ANGULAR App #4688

kythor created 6 years ago

Hi guys,

I'm trying to setup a CI setup for the angular app. But i'm not sure how to do it correctly. I tried something but got this error on "npm install":

2018-02-14T09:58:22.3947388Z [command]C:\Program Files\nodejs\npm.cmd install --force
2018-02-14T09:58:23.1148738Z npm WARN using --force I sure hope you know what you are doing.
2018-02-14T09:59:04.0232802Z npm WARN deprecated [email protected]: ...psst! Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
2018-02-14T09:59:22.7598061Z npm ERR! code EINTEGRITY
2018-02-14T09:59:22.7609655Z npm ERR! sha1-0sMepJKyK2qNiHrqFZiaI4/AhK4= integrity checksum failed when using sha1: wanted sha1-0sMepJKyK2qNiHrqFZiaI4/AhK4= but got sha1-s+4q3E2tVI1K6ZiZT1rIAtx1O4Y=. (16980 bytes)
2018-02-14T10:00:16.2216749Z 
2018-02-14T10:00:16.2217856Z npm ERR! A complete log of this run can be found in:
2018-02-14T10:00:16.2218157Z npm ERR!     C:\npm\cache\_logs\2018-02-14T09_59_22_783Z-debug.log
2018-02-14T10:00:16.3425967Z ##[error]npm failed with error: C:\Program Files\nodejs\npm.cmd failed with return code: 1
2018-02-14T10:00:16.3455803Z ##[section]Finishing: npm install

17 Answer(s)

0

strix20 created 6 years ago

You shouldn't be running npm install at all, yarn replaces that step.

Here is an example of our build process (note that we use teamcity + octopus):

Run Yarn Run Gulp Restore packages (Nuget) Build project (dotnet build) Run unit tests (MSTest on our own library (we don't test the x-unit tests included in the project in our CI)) Publish MVC Project (dotnet publish) Publish Migrator Project (dotnet publish) OctopusDeploy Push packages

Then in our environment builds configurations, we add: OctopusDeploy Create Release OctopusDeploy Deploy Release

Our octopus is configured to deploy to an Azure Web App, and the migrator is deployed with the web project to azure. A step in octopus executes the migrator directly from the azure web app.
0

kythor created 6 years ago

thx for the info. I only need to build and deploy the angular solution. I am using Yarn indeed, but dont I need "ng build -prod" to create the "dist" folder?
0

ismcagdas created 6 years ago
Support Team

@Kythor, you are right "ng build --prod" is required. Can you write the commands you run for your CI deploy ?

Does "ng build --prod" works when you run it in the command prompt ?

I also suggest you to remove "node_modules" folder and then try again with "yarn".
0
kythor created 6 years ago
Just to be clear, I'm using VSTS with a build definition just for the Angular App and associated code.

These are the steps I have now

Use Yarn 1.x

Yarn

npm => this is where I try to run the command "ng build -prod" but doesn't work because it cannot find the script "ng" I have tried a lot of other combinations here, but I can't find the right one. Do I even need to use npm?

Azure App Service Deploy => $(System.DefaultWorkingDirectory)/dist

I do not have a node_module in my master branch code.
0

kythor created 6 years ago

Now I found this: <a class="postlink" href="https://stapp.space/run-angular-cli-react-cli-aurelia-or-vue-cli-build-in-vsts/">https://stapp.space/run-angular-cli-rea ... d-in-vsts/</a>

So instead of npm, i added a "command line" task with Tool: $(Build.SourcesDirectory)\node_modules.bin\ng.cmd Arguments: build -prod

But when executing the build i get this error: 'D:\a\1\s\node_modules.bin\ng.cmd' is not recognized as an internal or external command, operable program or batch file. Process completed with exit code 1.

However, if I look in my local folder, after using Yarn, the node_modules, folder is present, and there is ng.cmd. Should I just add node_modules in my source control?
0

ismcagdas created 6 years ago
Support Team

@Kythor,

You can install angular-cli globally using "npm install -g @angular/cli" before running "ng build --prod" command. I think this is not the best solution but you can use it as a workaround for now.
0

maharatha created 6 years ago

I am having the same issue. I tried the above way but doesn't work. Please advise
0

maharatha created 6 years ago

<cite>Kythor: </cite> Now I found this: <a class="postlink" href="https://stapp.space/run-angular-cli-react-cli-aurelia-or-vue-cli-build-in-vsts/">https://stapp.space/run-angular-cli-rea ... d-in-vsts/</a>

So instead of npm, i added a "command line" task with Tool: $(Build.SourcesDirectory)\node_modules.bin\ng.cmd Arguments: build -prod

But when executing the build i get this error: 'D:\a\1\s\node_modules.bin\ng.cmd' is not recognized as an internal or external command, operable program or batch file. Process completed with exit code 1.

However, if I look in my local folder, after using Yarn, the node_modules, folder is present, and there is ng.cmd. Should I just add node_modules in my source control?

I used this method and I was able to deploy Aspnetboilerplate code but not AspnetZero code
0
kythor created 6 years ago
I got it to work!!

thanks @ismcagdas for the missing piece

Add these steps to the Build definition:

1. Use Yarn 1.x 2. Yarn 3. npm (select version 0.*) : command = install arguments = -g @angular/cli 4. Command Line: Tool = $(Build.SourcesDirectory)\node_modules\.bin\ng.cmd Arguments = build -prod 5. Azure App Service Deploy => $(System.DefaultWorkingDirectory)/dist

It gets deployed and I can go to the angular app url. Just need to find a way to easily change the appconfig.json file when building, because i dont want to change the remoteServiceBaseUrl and appBaseUrl everytime i want to debug
0

ismcagdas created 6 years ago
Support Team

@Kythor thanks for your feedback. I think you can rename existing appconfig.json file to "appconfig-dev.json" and create another one with name "appconfig-prod.json". Then load it according to current environment name in appropriate ts file.

Haven't tried it by the way but this might give you an idea.
0

simedbn created 6 years ago

Hello,

Thank you for the build steps :).

There is no need to update or put the webconfig file on the root of the deployed app ?
0

alper created 6 years ago
Support Team

thanks for the feedback ;)
0

kythor created 6 years ago

Just found out that I need to add one more step. The web.config needs to be copied from the root repository to the deploy folder on azure.

I tried with "Copy Files" Source folder: (empty = root repo) Contents: web.config Target Folder: $(build.artifactstagingdirectory)

It passes this step without a problem, but the file is not copied, so the app wont work. Any ideas?
0

mentium created 6 years ago

Hi

I've tryed these steps but i stil getting error.

I'm using asp.net core / angular

2018-03-01T11:35:07.3784052Z ============================================================================== 2018-03-01T11:35:07.3784278Z Task : Command Line 2018-03-01T11:35:07.3784373Z Description : Run a command line with arguments 2018-03-01T11:35:07.3784465Z Version : 1.1.3 2018-03-01T11:35:07.3784594Z Author : Microsoft Corporation 2018-03-01T11:35:07.3784696Z Help : [More Information](<a class="postlink" href="https://go.microsoft.com/fwlink/?LinkID=613735">https://go.microsoft.com/fwlink/?LinkID=613735</a>) 2018-03-01T11:35:07.3784825Z ============================================================================== 2018-03-01T11:35:07.3889844Z ##[command]D:\a\3\s\node_modules.bin\ng.cmd build -prod 2018-03-01T11:35:07.4077115Z The system cannot find the path specified. 2018-03-01T11:35:08.4407169Z ##[error]Process completed with exit code 1.

Steps: 1: Use Yarn 2: Yarn 3: npm build (working folder: "$/PROJECTNAME/Master", npm command: install, arguments: -g @angular/cli) 4: CLI (Tool: $(Build.SourcesDirectory)\node_modules.bin\ng.cmd, arguments: build -prod)

Anybody knows what i'm missing?
0

kythor created 6 years ago

@mentium the only difference with my steps, is that i leave the field "Working Folder" empty on "npm build" also make sure you select version 0.*
0

mentium created 6 years ago

@kythor, wierd, i've actualy tried that also.
0
simedbn created 6 years ago
HEllO,

In the last step the path is :

$(Build.SourcesDirectory)*angular*\node_modules.bin\ng.cmd

For the web.config file you should :

add a web.config file on the same folder as favicon.ico

modify the angularCli file as

"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config",

Have an answer to this question? Log in and write your answer.