Saturday 11 March 2017

Angular 2 project setup with Asp.Net MVC on Visual Studio 2015

I am currently learning Angular 2 and am trying to setup an Angular 2 project with Asp.Net MVC setup on Visual Studio 2015. I referred to couple of articles on Internet and they seems to be too overwhelming complex for a beginner to understand and follow.

I am looking for a simple project setup and I tried to create one but I am getting few errors which I can't seem to solve.

Can anyone help me with resolving the error or redirect me to some articles with simple project setup illustrations?

I have performed the following basic steps,

  1. Created new 'Asp.Net Web Application (.NET Framework)' project with Blank MVC template (no authentication and no unit tests)
  2. Downloaded the 'quickstart-master' angular 2 seed project from Angular 2 official site
  3. Copied the full 'src' folder from seed project to my angular project.
  4. Copied the other remaining files (package.json, bs-config.json, tslint.json, .editorconfig). Basically files which are not mentioned in non-essential-files.txt file
  5. Restored all packages successfully from package.json file
  6. Added a controller 'HomeController'
  7. Added a _Layout.cshtml
  8. Added a _ViewStart.cshtml
  9. Added an Index.html corresponding to Index() action method in HomeController
  10. Copied the JS script references from index.html in seed project to _Layout.html
  11. Copied the body content from index.html to Index.cshtml
  12. Rebuild the solution
  13. Run the solution.

When I try run the solution, I get the below error,

enter image description here

My Project setup looks as below,

enter image description here

Tsconfig.json remains unchanged.

enter image description here

The error,

GET http://localhost:63777/styles.css 
localhost/:14 GET http://localhost:63777/systemjs.config.js 404 (Not Found)
zone.js:2019 GET http://localhost:63777/main.js 404 (Not Found)
scheduleTask @ zone.js:2019
ZoneDelegate.scheduleTask @ zone.js:353
Zone.scheduleTask @ zone.js:196
Zone.scheduleMacroTask @ zone.js:210
(anonymous) @ zone.js:2043
send @ VM96:3
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:729
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:334
Zone.run @ zone.js:126
(anonymous) @ zone.js:713
ZoneDelegate.invokeTask @ zone.js:367
Zone.runTask @ zone.js:166
drainMicroTaskQueue @ zone.js:546
(index):16 ZoneAwareError {__zone_symbol__error: Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:63777/main.js
    Error: XHR error…, __zone_symbol__stack: "(SystemJS) XHR error (404 Not Found) loading http:…t>]↵   Error loading http://localhost:63777/main.js", originalErr: ZoneAwareError, __zone_symbol__currentTask: ZoneTask}__zone_symbol__currentTask: ZoneTask__zone_symbol__error: Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:63777/main.js
    Error: XHR error (404 Not Found) loading http://localhost:63777/main.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:63777/node_modules/zone.js/dist/zone.js:1242:29) [<root>]
        at Zone.runTask (http://localhost:63777/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>]
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:63777/node_modules/zone.js/dist/zone.js:420:38) [<root>]
    Error loading http://localhost:63777/main.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:63777/node_modules/zone.js/dist/zone.js:1242:29) [<root>]
        at Zone.runTask (http://localhost:63777/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>]
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:63777/node_modules/zone.js/dist/zone.js:420:38) [<root>]
    Error loading http://localhost:63777/main.js
    at addToError (http://localhost:63777/node_modules/systemjs/dist/system.src.js:122:78) [<root>]
    at linkSetFailed (http://localhost:63777/node_modules/systemjs/dist/system.src.js:687:15) [<root>]
    at http://localhost:63777/node_modules/systemjs/dist/system.src.js:495:9 [<root>]
    at Zone.run (http://localhost:63777/node_modules/zone.js/dist/zone.js:126:43) [<root> => <root>]
    at http://localhost:63777/node_modules/zone.js/dist/zone.js:713:57 [<root>]
    at Zone.runTask (http://localhost:63777/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:63777/node_modules/zone.js/dist/zone.js:546:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:63777/node_modules/zone.js/dist/zone.js:424:25) [<root>]__zone_symbol__stack: "(SystemJS) XHR error (404 Not Found) loading http://localhost:63777/main.js↵ Error: XHR error (404 Not Found) loading http://localhost:63777/main.js↵        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:63777/node_modules/zone.js/dist/zone.js:1242:29) [<root>]↵       at Zone.runTask (http://localhost:63777/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>]↵       at XMLHttpRequest.ZoneTask.invoke (http://localhost:63777/node_modules/zone.js/dist/zone.js:420:38) [<root>]↵   Error loading http://localhost:63777/main.js"message: (...)name: (...)originalErr: ZoneAwareErrororiginalStack: (...)stack: (...)toSource: ()toString: ()zoneAwareStack: (...)get message: ()set message: (value)get name: ()set name: (value)get originalStack: ()set originalStack: (value)get stack: ()set stack: (value)get zoneAwareStack: ()set zoneAwareStack: (value)__proto__: Object
(anonymous) @ (index):16
ZoneDelegate.invoke @ zone.js:334
Zone.run @ zone.js:126
(anonymous) @ zone.js:713
ZoneDelegate.invokeTask @ zone.js:367
Zone.runTask @ zone.js:166
drainMicroTaskQueue @ zone.js:546
ZoneTask.invoke @ zone.js:424



via SamirG

No comments:

Post a Comment