Base solution for your next web application
Open Closed

Azure CI deploy of ANGULAR App #4688


User avatar
0
kythor created

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)
  • User Avatar
    0
    strix20 created

    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.

  • User Avatar
    0
    kythor created

    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?

  • User Avatar
    0
    ismcagdas created
    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".

  • User Avatar
    0
    kythor created

    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

    1. Use Yarn 1.x
    2. Yarn
    3. 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?
    4. Azure App Service Deploy => $(System.DefaultWorkingDirectory)/dist

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

  • User Avatar
    0
    kythor created

    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?

  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    maharatha created

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

  • User Avatar
    0
    maharatha created

    <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

  • User Avatar
    0
    kythor created

    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

  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    simedbn created

    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 ?

  • User Avatar
    0
    alper created
    Support Team

    thanks for the feedback ;)

  • User Avatar
    0
    kythor created

    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?

  • User Avatar
    0
    mentium created

    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?

  • User Avatar
    0
    kythor created

    @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.*

  • User Avatar
    0
    mentium created

    @kythor, wierd, i've actualy tried that also.

  • User Avatar
    0
    simedbn created

    HEllO,

    In the last step the path is :

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

    For the web.config file you should :

    1. add a web.config file on the same folder as favicon.ico
    2. modify the angularCli file as

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