Angular 2 web app in Azure returning system is not

Question

I am new to Angular2 and just published a very basic app to Azure web app. I searched before posting this question and found couple of references

http://abusanad.net/2016/07/24/publish-angular-2-app-from-visual-studio-to-azure/ Deploy Angular 2 App to Azure

After following the steps in these articles, I accessed my WebApp and I see errors in browser console with 404 not found files.

System.import('main.js').catch(function(err){ console.error(err); });

Image of Exception details attached here

I also checked the versions of npm(3.10.8) & nodejs(v6.9.1) in my webapp. Seems like its good.

Any help is appreciated ! Thanks.

Answer 1

After adding the engines version to package.json, the issue got fixed :)

"engines":{"node":6.9.1} (In my case, this is the version)

Link for reference on how to specify the engines version: https://docs.microsoft.com/en-us/azure/nodejs-specify-node-version-azure-apps

Answer 2

It looks like your server can't find the external libraries that your website is referencing, such as System.js. The list of files in your screenshot seems to have been flattened out - the original directory structure of your node_modules folder has been lost. Did you perform some step which caused this? Did you run npm install in your wwwroot folder like the tutorial advised?

Looking a bit further in the future, you will want to investigate a build process for your front-end code using a tool such as Webpack or Rollup, to stop you from deploying tons of separate source files.

Edit: Just noticed that the directory in your screenshot is (probably) wwwroot/core-js/client. Can you show us wwwroot instead?