Base solution for your next web application
Open Closed

Does anyone have step by step guide on deploying Angular2 #2461

User avatar
0
brallierc created

I have been trying for several days to get the Angular2 project to deploy to Azure. I have read these forums and there are a couple posts with some of the pieces but nothing that is complete. For example, if I download my publish profile and publish the project the only thing that is uploaded is the web.config. I have found that you can right click on each file and publish those but oonce they are up there, then what? I tried using Kudu to do an npm install or yarn install... then npm start or yarn start... neither seem to ever finish and my web app is not running.

Deploying web apps used to be so simple... why have we taken a huge leap backwards?

Go to accepted answer
32 Answer(s)
  • User Avatar
    0
    chauey created

    I followed the same steps to deploy Angular 2 app on my local IIS. I hosted Core API on my localhost & it is working fine. Next step for me was to publish Angular 2 on local IIS.

    1. I ran the Angular CLI command "ng build -prod".
    2. After that i got the "dist" folder in Angular Project folder.
    3. Then i place the web.config file in dist folder with your give code of web.config.
    4. I also made changes to appconfig.json, give API and Web app address over there. 5)Then i add website in IIS and give physical path of dist folder.

    When i browse the web app i got this error "HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the related configuration data for the page is invalid."

    Please help me i need to publish it

  • User Avatar
    0
    chauey created

    I followed the same steps to deploy Angular 2 app on my local IIS. I hosted Core API on my localhost & it is working fine. Next step for me was to publish Angular 2 on local IIS.

    1. I ran the Angular CLI command "ng build -prod".
    2. After that i got the "dist" folder in Angular Project folder.
    3. Then i place the web.config file in dist folder with your give code of web.config.
    4. I also made changes to appconfig.json, give API and Web app address over there. 5)Then i add website in IIS and give physical path of dist folder.

    When i browse the web app i got this error "HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the related configuration data for the page is invalid"

    Please help me i need to publish it

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    You can try below steps

    1. remove web.config from dist folder and see if it works.
    2. place web.config again and remove this section
    <staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

    and see if it works. 3) If 2. option works, you can leave it like that becaue json mime type is required for hosting on azure. If it does not work, you can try to install IIS url rewrite module <a class="postlink" href="https://www.iis.net/downloads/microsoft/url-rewrite">https://www.iis.net/downloads/microsoft/url-rewrite</a>

    Please let us know if it does not work for you.

    Thanks.

  • User Avatar
    0
    piapps created

    I thought I would comment on what I did since it related to issues you were having to get it to compile.

    So I ran yarn as per the normal instructions and made sure that npm start would run my project before i tried anything else.

    Then I npm installed the angular-cli

    Then I went to run ng build --prod and got the error from #2461@7cc86646-d789-4b09-b453-d727a9d6a818 which says I need to be in a angular-cli project to run it.

    After a google found this <a class="postlink" href="http://stackoverflow.com/questions/39133782/you-have-to-be-inside-an-angular-cli-project-in-order-to-use-the-build-command-a">http://stackoverflow.com/questions/3913 ... -command-a</a>

    Which basically says to run

    npm install -g @angular/cli@latest

    After doing that and running ng build --prod again everything compiled as expected, I have yet to release this to a server but it all compiled into dist folder as expected so maybe that will help someone

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks for sharing your experince @piapps :). It seems like angular-cli is not in yarn.lock file, we will fix it for the next version.

    Thanks for informing us.

  • User Avatar
    0
    alaamh created

    @ismcagdas thank you for the details.

    How to configure multi-tenant using this approach? the wildcard (tenant sub-domains) should be in the client web role or host web role?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @alaamh,

    It must be configured for client side app. You can also configure it for host app if you like but it is not required.

    Thanks.

Assignee
No one
Labels
None yet