Angular 2 web app in Azure returning system is not defined error

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.

Check your network trace in the console to see which urls were actually called as there may be difference in path hierarchy of the files that exists and that are being called. — Satish Prakash Garg
– Satish Prakash Garg, Commented Mar 23, 2017 at 17:16
Please do not post images of errors/exceptions. It is more useful to include them in a code snippet. This is to avoid the situation that if your image link ever becomes a dead link, the context of the question will become meaningless. It will also help in users being able to immediately see the issues you are having without having to click out of SO. — Pineda
– Pineda, Commented Mar 26, 2017 at 3:09

Born2Code · Accepted Answer · 2017-03-23 17:09:14Z

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://learn.microsoft.com/en-us/azure/nodejs-specify-node-version-azure-apps

answered Mar 23, 2017 at 17:09

Born2Code

1371 gold badge5 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Elliott · Accepted Answer · 2017-03-23 17:00:57Z

0

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?

answered Mar 23, 2017 at 17:00

Ben Elliott

1,69014 silver badges19 bronze badges

1 Comment

Born2Code Over a year ago

Yes, i installed npm install at wwwroot folder. As i am typing here, i found a reference article which specifies to add a engine version to package.json. link - learn.microsoft.com/en-us/azure/… I am gonna try it and update back to see if this fixes. Thanks for replying back !

Collectives™ on Stack Overflow

Angular 2 web app in Azure returning system is not defined error

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related