Deploy Angular 2 apps for Azure

Question

I am learning Angular 2 and Azure. I followed the Angular 2 tutorial and everything worked fine locally.

I published an application for Azure . The publication was successful. But when I visit the site, it got stuck at the download stage. When viewing logs in the Chrome console, I see the following error. File /app/main.ts not found.

I checked my deployed files using the Kudu toolbar, as suggested by this question . I don’t see that only *.js and *.map tags are deployed in *.ts .

Then I returned to Visual Studio, changing the property of the entire *.ts file to Copy Always . After the change, I see that the *.ts files *.ts copied to the .\bin\app . However, after I reissued the Azure project (successfully again), I still ended up with a 404 error when requesting the main.ts file.

According to this question, IIS does not execute the correct Typescript file.

First : How do I apply the proposed change to Azure to fix it?

Secondly : why do we need to use *.ts files? Based on my understanding, *.ts is executed in *.js . Why can't we just request the *.js files that are installed correctly in Azure?

Answer 1

@Frank,

Use the .ts file only for demonstration and tutorial, it is actually suggested to run your site with a .js file.

I have an example application in which you can reference a bit to see how it works.

https://github.com/shrimpy/AspMVCFileUploadSample

• Asp.net Core 1.0.0-rc1
• Angularjs 2

hope this helps.

Answer 2

Here are the steps I followed:

• make sure angular 2 applications are built and run locally
• Build an azure web application and get your publish profile
• from VS publish the application by importing the downloaded published profile
• Open a command prompt from Azure -> Tools -> Kudu (or console)
• cd home \ site \ wwwroot
• run: npm install