Setup Angular2 & TypeScript in a ASP.NET Core project using Visual Studio #56
Comments
|
Comment written by Vahid N. on 08.08.2016 09:38:07 One day you will need to add routing and server side services and at that time, |
|
Comment written by Jürgen Gutsch on 08.08.2016 09:53:27 Hi Vahid, |
|
Comment written by Hector Miguel Asiain Palomo on 08.08.2016 21:46:05 Hello, regarding this: " [..] but VS shows a yellow exclemation mark because of any arror. Until yet, I didn't figure out what is going wrong here." The package generating the conflict is lite-server, or better said a dependency of it. I unistall it and the yellow mark is gone, I won't be using it anyway at this point. |
|
Comment written by Jürgen Gutsch on 09.08.2016 08:00:05 Hello Hector, many thanks for that hint. I'll try to remove it too and update that post. |
|
Comment written by Hector Miguel Asiain Palomo on 10.08.2016 19:06:51 We are not alone on this, more info about the issue: |
|
Comment written by Jürgen Gutsch on 10.08.2016 20:53:18 Thanks. Will follow the discussion on that issue :) |
|
Comment written by MV10 on 11.08.2016 00:04:07 This is easily one of the most clearly-written, clean, and straight-to-the-point examples of adding basline Angular2 into a VS2015 .NET Core project. I especially like your no-nonsense gulp script (there are some truly bad ones out there just to move all those files to wwwroot). One thing you might want to clarify -- there should be an "app" folder added to the wwwroot folder (I think?), and this is where the main.ts and app.component.ts files go. Took me a few build attempts to sort that out. In my project, at least, there was no app folder initially. I'm actually trying to retrofit a basic admin interface into an existing Core API project. After following these instructions, the Angular part isn't working yet. I get a series of TS2304 errors -- Cannot find name Promise, Map, MapConstructor, SetConstructor, and Set. However, es6-promise does show up in the npm Dependencies folder (and I'm running Chrome which shouldn't need it). |
|
Comment written by MV10 on 11.08.2016 00:35:21 Well that didn't take long. The build is fixed thanks to http://stackoverflow.com/a/... ... The tsconfig.json should reference ES6, not ES5. (35 years of programming and we're back to spaghetti code. SMH.) One more recommendation -- specify where to put systemjs.config.js. As written (based on index.html) it goes in wwwroot. Personally I think it belongs in app or maybe a scripts folder though. There are also typos in systemsjs.config.js -- it specifies "lib" whereas your gulp copies the files to "libs" (plural). On top of that I'm getting a lot of 404s trying to read various files from the libs folder. At first @angular stuff wasn't coming through. I changed "@angular":"libs/@angular" in the systemjs.config.js since I noticed gulp didn't reproduce the top @angular folder and it cleared those up, but then I started getting 404s on rxjs. I don't really know gulp yet but it looks like the correct folder hierarchy isn't being reproduced. I'd definitely like to see the fix for this because, as I noted, your gulp file is pretty clean compared to the hack jobs I see posted in most places elsewhere. Edit: Thought we needed to add { base: 'node_modules' } after the src list, but that just causes other errors when things like "reflect.js" are referenced from libs instead of their origin folder in node_modules. I assume there must be a standard way of dealing with this but it's beyond me right now... Overall still pretty happy with this though. |
|
Comment written by MV10 on 11.08.2016 01:04:11 The fix for the other 404s is related to the corrected folder structure (well, "complete" folder structure, I don't know if it's correct as per The Angular Way)... the polyfill section in index.html needs to change to: <script src="libs/core-js/client/shim.min.js"></script> And with that, it runs under VS2015 Update 3 with .NET Core 1.0 release and Angular2 RC5. (Edit -- note this references an earlier comment that is awaiting moderation, I guess probably because I included a stackoverflow link.) |
|
Comment written by Jürgen Gutsch on 11.08.2016 07:39:26 Hi, |
|
Comment written by Rodrigo Basniak on 13.08.2016 15:06:37 Hi, I tried to follow your steps but when running the npm install I get the following output on the output window: PATH=.\node_modules\.bin;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\git Do you have any idea of what could be wrong? |
|
Comment written by Murat Mercan on 15.08.2016 04:57:37 am I the only one who uses Visual studio to debug typescript, uses breakpoints and step into/over the lines, please let me know if I am doing wrong but without |
|
Comment written by John Born on 15.08.2016 23:15:19 First thing I've checked after hitting this page was the RC version used. I will have a good read if you actually update it to RC5. Many thanks! |
|
Comment written by Igor Soloydenko on 17.08.2016 01:11:11 If you have fixed it. Could you please provide a sample of a minimal working solution in GitHub? |
|
Comment written by MV10 on 17.08.2016 01:19:11 Fortunately it looks like RC5 should be the final changes. |
|
Comment written by MV10 on 17.08.2016 01:22:17 My Core project is already too complicated to easily unwind, but I also set up a bare-bones .NET 4.5.2 VS2015 project and all the important files should be the same. I'll set it up tomorrow and post a link here. |
|
Comment written by MV10 on 17.08.2016 13:24:21 Here ya go, hope it helps. |
|
Comment written by Jens Cappelle on 18.08.2016 16:54:56 Hi, This might be a dumb question but i'm pretty new to both the asp.net scene (been working in it a month and a half now) and Angular(started today). But I can't figure out the part about 'typings.config' do i create a file with that name? and where should i add it? to my src folder, to my wwwroot folder, to my typings folder.. Thanks for this awesome guide btw! saw a lot of guides but didn't like most of them and others were targeting a totally different objective. Cudos |
|
Comment written by TruthSayer on 18.08.2016 18:47:01 So close yet so far. Does anyone know or have a sample hello world site done in recent weeks with .net core, npm, gulp, & angular2? |
|
Comment written by Jürgen Gutsch on 19.08.2016 20:50:31 Hi Murat, I also never got this working in Visual Studio. To debug TypeScript, I use the Chrome development tools. |
|
Comment written by Jürgen Gutsch on 19.08.2016 20:53:26 Hi, |
|
Comment written by Jürgen Gutsch on 19.08.2016 20:55:28 I will, if I'm back at home. I'm in vacation now |
|
Comment written by Jürgen Gutsch on 19.08.2016 20:57:47 Yes, will do it in about a week, if I'm back at home |
|
Comment written by Jürgen Gutsch on 19.08.2016 21:17:30 Hi Jens, the typings.config should be located in the root of the project. glad you like that post :) |
|
Comment written by Jürgen Gutsch on 19.08.2016 21:27:12 The most common issue is, that you don't use the console in administration mode. Open a console in administration mode. |
|
Comment written by Rodrigo Basniak on 19.08.2016 23:11:14 That would be awesome if you could. Your tip on running npm as administrator worked for the restore, but I finished following your steps and my application is not working too. I get a eternal loading page. So a working sample would be super duper helpful, because it's exactly like TS said, not a single tutorial on the internet is working right now, the ones that are not outdated give the forever loading screen. Maybe people who have experience on them may fight through the details and make it work, but for someone totally new on web, it's being a real pain to make asp core and angular work together in Visual Studio. |
|
Comment written by Murat Mercan on 20.08.2016 15:24:32 Sorry I am actually debugging with Visual studio from beta version (angular and asp.net core beta) }, and my systemjs.config.js file /** |
|
Comment written by Igor Soloydenko on 21.08.2016 05:02:48 Thanks a ton sir! |
|
Comment written by MV10 on 22.08.2016 14:02:58 I'm not sure how my typings.json file got named typings.config, but with VS / Typescript integration you don't really need typings.json or a stand alone typings folder at the project-level, as far as I can tell. I think that's the only issue I've found with that setup as it exists in git right now. |
|
Comment written by Ryan Lee on 15.10.2016 08:33:48 Thank you very much for your kind reply. I got most part working and it works when I put all the scripts in a HTML file but it fails to read the automatic js extension confit when I put the config file. I think I will try to follow the relevant steps you have mentioned here and try again. I will let you know if I make some progress. Regards |
|
Comment written by Jürgen Gutsch on 15.10.2016 08:51:47 This sounds like an problem with the paths in the systemjs.config.js. Maybe the path to the libs folder is wrong or the gulpfile wasn't executed... Have you tried to have a look into that sample: https://github.com/JuergenG... |
|
Comment written by Jürgen Gutsch on 15.10.2016 08:59:29 I just updated that post to the latest versio ov Angular2. The most problem with this post was, that NPM fetches newer versions of the dependencies, because the package json has that sucking ^ bevore the version number. So I updated this tutorial to the final angular2 version, removed the ^ from the package.json and uploaded a running sample to github: https://github.com/JuergenG... |
|
Comment written by Ryan Lee on 15.10.2016 09:00:41 That's part of what I am going to try out tonight :) I have 2 questions though. |
|
Comment written by Jürgen Gutsch on 15.10.2016 10:43:45 1. Gulp is used to copy the js and css dependencies from /node_modules/ to /wwwroot/libs/, because node_modules should not be deployed |
|
Comment written by A.T. Silva on 15.10.2016 12:40:00 You mentioned adding the "&& gulp restore" but it is not shown in the code listing for the file "package.json". Is not on the GitHub either. Very helpful post though, saved me a lot of time, thank you. |
|
Comment written by Ryan Lee on 19.10.2016 03:06:43 Thanks for the reply once again. I attempted to make this work again. Configured everything exactly how you set it up. It works on a normal html file, but it will fails when I put the relevant codes in an cshtml file. MVC routing prevents access to 'app', so I gave it a full path using "System.import('/app/main.js').catch(function (err) { console.error(err); });" but it fails to load the other ones. I understand what the problem is, mvc not allowing the request static files without extensions, however I don't really know how I can resolve this. |
|
Comment written by Jürgen Gutsch on 19.10.2016 07:23:45 I'll have a look :) I never tried it with a MVC View, because I always divide the client app part from the server app completely. |
|
Comment written by N Baua on 19.10.2016 13:55:57 Awesome post, Thanks lot, this gives a Net developer some new wings. One thing though not very major, just to note that you have to hit F5 in browser (unlike working with the Node/Lite server duo) to check the updated changes. Make sure, you clear/disable the browser cache. -N Baua |
|
Comment written by Jürgen Gutsch on 19.10.2016 19:56:34 Glad you like it :) |
|
Comment written by N Baua on 20.10.2016 07:35:42 Hi, May be I'm thinking too bold and asking too much, What I've thought of initially that I can use the FileSystemWatcher (may be under a separate BackgroundWorker thread) to hook to the process and update the browser. The thing is working that way will open new tab/window and not update the same instance as smooth as npm/lite server. Any thoughts? BTW as of now I am good refreshing the window being a .Net developer :). For us success comes the hard way. Thanks. |
|
Comment written by N Baua on 21.10.2016 07:48:49 Hi, Don't worry, this is just a indication that your project is under a Debug mode and you will receive the warnings/errors visible in the console (if any). If you want your code not to emit the same the solution is ........ Open main.ts and after all imports import {enableProdMode} from '@angular/core'; Hope this helps -N Baua |
|
Comment written by Jürgen Gutsch on 21.10.2016 08:27:29 Thanks :) |
|
Comment written by Marcel Bradea on 21.10.2016 23:03:43 Do you mind elaborating on these troubles Jürgen? Cheers, Marcel |
|
Comment written by Jürgen Gutsch on 22.10.2016 07:54:59 Maybe it is just on my machine. The packages couldn't be restored, becaus eof incompatibility. It worked two weeks before. Just try it: create a new project and restore the packages |
|
Comment written by Vamplife Eightyfour on 08.11.2016 22:51:57 Yes.. |
|
Comment written by Vamplife Eightyfour on 08.11.2016 22:52:05 I see, I will check this out.. and leave feedback, thanks for the update.. |
|
Comment written by Oleg Gorlov on 21.11.2016 00:30:10 Thanks Jürgen! |
|
Comment written by Dessa Brewington on 21.11.2016 21:07:28 3 months later... Ever figure it out? |
|
Comment written by Rodrigo Basniak on 21.11.2016 21:47:42 Yes, after the RC5 there were no more breaking changes, so pretty much every tutorial on the internet that is using Angular final with Visual Studio is working perfectly fine. Now there are a lot of resources and many other ways of doing this. I think I tested every possible way of doing this integration and in my opinion this one, which is using gulp, is not the best way to go. Take a look at this repo from Microsoft team: https://github.com/aspnet/J... I think it's one of the best options today and it has a lot of neat features, like HMR, server-side rendering and more. |
|
Comment written by zhuang liu on 19.01.2017 23:48:10 Hi, the code is up and running, but angular routing not working, did you make it working for you? |
|
Comment written by Nickkkk on 22.02.2017 23:27:04 Thanks for the tutorial. Also are you sure it shouldn't be typings.json and not typings.config? |
|
Comment written by Jürgen Gutsch on 23.02.2017 07:34:51 You are right. I'm going to change it. |
|
Comment written by Jürgen Gutsch on 23.02.2017 07:36:13 yes, it worked for me in in several projects. |
|
Comment written by Jürgen Gutsch on 23.02.2017 07:37:04 you are absolutely right. It is typings.json. I will change it |
|
Comment written by Observer on 26.02.2017 04:48:58 incomplete ... where is typings.json |
|
Comment written by Jürgen Gutsch on 26.02.2017 08:10:54 thanks for reading that post. :) |
|
Comment written by Observer on 01.03.2017 14:44:26 oh...yes, My mistake. I'm sorry. |
|
Comment written by Sam Jost on 24.08.2017 11:52:04 But in development I don't want to call enableProdMode() - how can I check in Angular if I'm running in debug or release mode? |
Written on 08.08.2016 08:21:27
URL: http://asp.net-hacker.rocks/2016/08/08/setup-angular2-typescript-aspnetcore-in-visualstudio.html
The text was updated successfully, but these errors were encountered: