6

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

I published the app to Azure. The publication was successfully. But when I visit the site it stuck at the loading stage. Looking at logs in the Chrome console I see the following error. The /app/main.ts file is not found.

enter image description here

I checked my deployed files via the "Kudu" dashboard as suggested by this question. I dont see any *.ts are deployed only the *.js and *.map.

enter image description here

Then I went back to Visual Studio changed the property of all *.ts file to Copy Always. After the change, I can see that the *.ts files are copied to the .\bin\app directory. However, after I republished the project to Azure (successfully again), I still ended up with the 404 error when requesting the main.ts file.

According to the this question IIS does not serve Typescript file correctly.

Firstly: How to apply suggested change on Azure to fix it?

Secondly: why do we need to use the *.ts files? Based on my understanding, the *.ts is complied into *.js. Why can't we just request the *.js files which are correctly deployed to Azure ?

Community
  • 1
  • 1
Frank Liu
  • 1,466
  • 3
  • 23
  • 36
  • Hi , Sorry but can you tell me how did you upload your angular2 application (means did you compress it and upload it, and did you upload it to `wwwroot` or `wwwroot\webapp`? ) and what type of WebApp did you use ? I'm stuck here .. sorry! – SeleM Apr 12 '16 at 11:28
  • 1
    Hi @Selem, I didnt do any compression manually. Just followed visual studio's publish wizard. I can see my files are under 'wwwroot' directory. My app is a ASP.NET Web Api 2. Hope this helps. – Frank Liu Apr 13 '16 at 04:31
  • hello, i just created a web app on my azure account. then opened VS2015 and created ASP.NET Empty App 4.6. I added the angular 2 sample app files and runs locally fine. Then i published it to azure (right click project and Publish), i can even see the file via kudu, and defaultExtension is set to js in systemjs.config.js. However the map files were not uploaded. I am still having the same problem 'stuck on loading...'. any idea plz? do you mind sharing a working app? – user1912383 Jul 22 '16 at 18:53
  • sure, this is a live angular 2 site I built and hosted on azure. http://learnangular2.azurewebsites.net/crisis-center – Frank Liu Jul 23 '16 at 01:25
  • you have a specific answer at : http://stackoverflow.com/questions/37487046/deploy-angular-2-with-azure-webapp/43119936#43119936 – Amir Sasson Apr 19 '17 at 06:20

2 Answers2

3

@Frank,

use .ts file is just for demo and tutorial, it is actually suggested to run your site with .js file.

i have a sample app running which you might be able to reference a bit to see how it work.

https://github.com/shrimpy/AspMVCFileUploadSample

  • Asp.net Core 1.0.0-rc1
  • Angularjs 2

hope this will help.

Xiaomin Wu
  • 3,621
  • 1
  • 15
  • 14
3

Here are the steps i followed:

  1. make sure angular 2 app builds and runs locally
  2. Create azure web app and get the publish profile
  3. from VS publish the app by importing the downloaded publish profile
  4. Open command line from Azure --> Tools --> Kudu (or Console)
  5. cd to home\site\wwwroot
  6. execute: npm install
Seymour
  • 7,043
  • 12
  • 44
  • 51
user1912383
  • 359
  • 2
  • 6
  • 16
  • Cool, but link is dead – Cami Rodriguez Oct 19 '16 at 15:16
  • Any clue on how one would do from say Sublime Text or from Atom or Webstorm? – Krishnan Sriram Feb 21 '17 at 12:06
  • This link specifies needed actions from A to Z https://stackoverflow.com/questions/37487046/deploy-angular-2-with-azure-webapp – Amir Sasson May 28 '17 at 16:17
  • I think this is the right answer. You need to do a package restore in the app container so that it has Angular and all of the npm dependencies. You can either do this by adding node_modules to your project and including it in your deployment, or you can do this by logging into the instance after deploying and running npm install in the wwwroot directory. I think the latter is cleaner. – Michael Braude Nov 05 '17 at 18:13