continuously deploy Angular2 app to Azure Web App using Release Management and angular-cli

Discussão em 'Angular' iniciado por user3838018, Novembro 22, 2024.

  1. user3838018

    user3838018 Guest

    I am currently developing an Angular2 app and want to configure continuous integration and continuous deployment with azure release manager.

    Things I got working so far: CI and CD to WebApp, home/site/wwwroot contains source files (no node_modules).

    Things not working: App doesn't start. Browsing to URL leads to the placeholder (e.g. 'Loading...'). On my local machine I would call npm install and then npm start which in turn calls tsc && concurrently "tsc -w" "lite-server". From my understanding this is fine for a dev environment, but should not be used in production.

    Things I have tried:

    1. adding npm install to build step leads to extremely long build time because of the download of the packages and long deployment time because of the high number of packages
    2. adding npm install --production shortens the build and deployment time, but running npm start on the target machine fails because some missing packages (contained in DevDependencies)
    3. executing npm install and npm start on the target machine with console seems to work, but can't be automated

    So the question(s) are:

    1. what is the proper way to build and deploy an Angular2 app on an Azure Web App?
    2. How to handle the node_modules?

    Thank you in advance.

    UPDATE: As I switched to angular-cli things are getting clearer now. On my dev machine I use "ng build" and "ng serve" to run locally. For deployment I use "ng build -prod" and deploy the contents of the created "dist" directory to production. However, this is still a workaround as I can't get the build agent to do these steps. I tried moving the angular-cli reference to "Dependencies" and then call "npm install" and "ng build -prod" on the agent to get the "dist" folder. My Deployment config would then copy the contents of the dist folder to the web app. Then "ng build -prod" step fails


    'ng' is not recognized as an internal or external command
    ​

    I sort of understand that I can't install and run any package on the build agent, but I would really like to use angular-cli to build the app since it includes webpack. Is there any possibility to get this working as described?

    Continue reading...

Compartilhe esta Página