59

Create an Angular 2 and .NET Core app that can be edited using Visual Studio 2017

In the recent series on using Angular 2 and .NET Core to check the weather we used the ASP.NET Core Template Pack to save time manually installing/configuring Webpack, Node, Angular etc.

That works well if you want to create your new projects using the new project wizard in Visual Studio 2015.

But what if you’re using using Visual Studio 2017?

You have another option.

Install the templates

As you’ve got Visual Studio 2017 installed you already have a suitably recent version of the .NET Core SDK installed to make this work.

You’ll need to check you have NodeJS version 6 or later.

Open up a command prompt and type the following.

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Wait for that to install and you’ll find you have new options for the dotnet new command.

Create your app

To create your new Angular2 and .NET Core app, change directory to an empty folder, then type…

dotnet new angular

Once it’s finished, take a look at the folder and you’ll see something like this.

Double click the *.csproj file and the application will open up in Visual Studio 2017.

The first time you open the project in Visual Studio, all of the application’s dependencies will be installed. When it’s finished, hit CTRL-F5 and you should be looking at your new Angular 2 app in the browser.

From here, you can continue with the rest of the series.

photo credit: Thomas Hawk Microsoft via photopin (license)

  • non

    Thank you, and thank Microsoft for putting this together! <3
    It was kind off disheartning trying to wrap head around node npm grunt gulp typescript webpack etc. etc.

  • Paul Van Bladel

    The title says: can be edited with…
    Can you also debug the typescript code (and use breakpoints)?
    cheers

    • I wasn’t sure, so I checked.

      And it turns out the answer is an emphatic yes 🙂

      Just set a breakpoint in your Typescript, hit F5 and away you go…

      https://uploads.disquscdn.com/images/218ae53bd235e5fd26690ef8db104c4a6da072d2aa1f08b0a5ba292623a9794d.gif

      • Paul Van Bladel

        Jon,
        That’s great news. 1-0 for visual studio compared to vs-code (ng2 project based on angular-cli can’t be debugged in vscode)
        Thanks for the info and your great blog series.
        Warm regards
        paul

        • Roger Borges

          Paul, if you or you see someone wire up an angular-cli project like this please write a post about it! I would definitely like to migrate my CLI project into VS2017

      • Kevin Clary

        I cannot set breakpoints. The breakpoint turns white with hover message “This breakpoint will not currently be hit. No symbols
        have been loaded for this document”.

  • LearnReasonExplore

    Thank you for this information! FYI: I am using VS Community 2017 that was released today. Had to type localhost:5000 in my browser to see this app after running it in VS. Did not come up on its own as implied in your text.

    • Thanks for the tip!

      • LearnReasonExplore

        OK, that seems to only be an issue when first creating the project and running it. Subsequent attempts worked organically. Also, seems to be a lot faster (in a single test) to open via .csproj than .sln after the project has been created and run and you have saved the .sln file upon closing the first time.

  • Roger Borges

    Thanks for the greast post John. Have you seen anything like this but with angular-cli? I’m trying to figure out how to migrate my project over without getting rid of CLI.

    • Not as yet, but I’ll keep an eye out 🙂

  • Martin Sher

    Thanks. I got it to run first time but then don’t appear to get changes to html to be reflected – either dynamically or by stopping the process and using Cntrl-F5 again. How do you get Webpack to re-compile code
    Thanks
    Martin

    • Martin Sher

      Sorted. Needed to add webpack extension to VS2017

  • Stefan Verheggen

    Hi Jon, I can debug the components fetchdata and counter. When I add components I can’t debug them in visual studio. I can see they aren’t generated as a map in the main-client.js. The structure is the same as in the i.e. the fetchdata component. I also see that I the menu doesn’t reflect the changes when I add more li. Do I need to configure something? I downloaded the webpack extension and installed as stated by Martin, but still changes aren’t seen on when running in debug mode. Thanks in advanced for your help.
    Regards, Stefan Verheggen

    • Same problem here.

      • Stefan Verheggen

        Hi Miroslav,
        this week I started working again with the framework. I created a new solution based on the template. I had to change the project settings to IISExpress and set the environment variable to dev. I noticed that if you do a rebuild the mapping is created newly and you can debug the typescript files. I hope this helps for you to.
        Regards, Stefan

        • Which environment variable do you set to dev? I’m the webpack-dev-middleware doesn’t seem to work for me at all (as of 2017/05/19) so I’m scratching around for anything I can find to resolve it.

          • Stefan Verheggen

            Hi Doug,

            I right click on the website project. Then go to debug. In the environment variables I added ASPNET_ENVIRONMENT with the value Development. That worked for me.

            Regards,

            Stefan

  • Stefan Verheggen

    Hello, I didn’t get it working so I set up all new again. I created a new project with dotnet new. When I now start I get that a console app is started up and not a browser window. Because it is in production mode I guess it isn’t possible to debug the ts files. How do I get out of production mode and how can I debug? I hope somebody can help me out. Thanks in advanced. Regards, Stefan Verheggen

  • Steve Drake

    I had a few issues moving from Angular 2.2 to Angular 2.4 it turned out that the vendor.js file was not getting updated when I built n run, but it did get updated when I published. Is this expected? off course I could just run the CLI update tool.

    • If you take a look at this post from Steve Sanderson which first introduced the templates, he mentions that you will need to tool to create/update the vendor.js file.

      http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

      So it looks like that’s intended behaviour (I believe on the basis that this file doesn’t need to be regenerated every time you make a tweak to your app).

      Saying that, this might have changed as the JavascriptServices project has undergone a number of changes since October last year. For the latest docs check out the GitHub Repo (https://github.com/aspnet/JavaScriptServices).

      • Steve Drake

        Yep, I concur :), it would be nice if it could be triggered when a download of packages is triggered. I will have a look at the git page and I may suggest it as a feature.

  • Stef Heyenrath

    When running the application “as-is”, I get the following console errors:

    HTML1300: Navigation occurred.
    localhost:5000
    HTML1513: Extra "" tag found. Only one "" tag should exist per document.
    localhost:5000 (12,6)
    HTML1503: Unexpected start tag.
    localhost:5000 (12,12)
    HTML1512: Unmatched end tag.
    localhost:5000 (73,10)
    HTML1514: Extra "" tag found. Only one "" tag should exist per document.
    localhost:5000 (73,17)
    HTML1521: Unexpected "" or end of file. All open elements should be closed before the end of the document.
    localhost:5000 (134,29)

    I think these errors should be solved ? However, where / how / who to indicate this ?

  • Mike DePouw

    What about an ’empty’ asp.net core angular 2 template?

  • Michael Lukatchik

    Thanks for this, Jon. I’ve been having some trouble getting up and running with Angular and TS, but the SPA templates and info here really helped.

  • Munawar Mark Khurshid

    Can’t find Project.Json. How do I add new .netcore assemblies..

  • anjali

    Hi,I am unable to find the Project.json file please get the answer

    • project.json is gone. Add references to project file using Visual Studio.

      • anjali

        How can you give the example not able to find project file also

        • Munawar Mark Khurshid

          Project.Json is gone. Install the .Net Core packages from Nuget in visual studio 2017…

          • anjali

            When I check in the google to install .Net core packages I found this url https://www.microsoft.com/net/download/core

          • Munawar Mark Khurshid

            Yes you would need to install .Net core first, what I meant in my last post was in context of your your own dlls that you would create that are dotnet core dlls. Also not all .Net Core dlls are available to you automatically when you create .net core project, in VS 2015 we were used to Project.Json to add references to .Net Core libraries, however in VS 2017 dotnet core references can be added to your projects
            through Nuget. You also have an option to edit .csProject to add your references and then at the command line you can restore the references using dotnet restore command

          • anjali

            hi Not able to do please provide one sample application with entityframework

        • Munawar Mark Khurshid

          Here is an article that will show you how to create EF Core in a separate project and then reference the dll in your project. In VS 2017, in order for you to reference it you would need to create a Nuget Package before you can use the dll.
          http://www.michael-whelan.net/ef-core-101-migrations-in-separate-assembly/

          • anjali

            yes you told that create Nuget package but not able to create..getting error

          • anjali

            then,how to create Nuget package

  • Martin Sher

    Hi
    I have tried to publish the app to Azure using the project publish in VS2017 i.e. right mouse click on the project. It seems to upload but the webapp does not run/launch. I get a 500 timeout error.

    Any help?

    Martin

  • Neurothsutra

    If Angular 4 is out, what is the difference between that and Ang2, when I still see people referencing Angular 2 like it’s the new thing? Just learning SPAs and it’s confusing me.

  • Cree Finnikin

    Hi John,

    Great series on the Angular 2 with new .net core. Got 2 questions hoping you could assist or point me in the right direction?

    First, tried to work with the ngOnInit() method (angular/core lifecyclehooks) and noticed it was missing from the project template. Is there any plans to include this into the angular boilerplate template?

    Lastly, can you point me to a working example of the Angular 2 template like this one with Individual User Account Authentication enabled?

    Thanks in advance,

  • Kevin Jiang

    I used this template in VS2015, and now in VS2017. I love it, but I found an issue that freaks me out. When click on Fetchdata link in menu, the controller called once, but when open the link directly in broswer (not click the link from menu), the controller called twice. Is this VS issue, or Angular 2 issue?

    • nukec

      First request is preflight request, and second request is real request. Read about preflight request on google.

      • Kevin Jiang

        Thanks!!! Now I can understand it’s neither problem of Angular2 nor of integration of Visual Studio. It’s browser issue. But I’m not doing CORS (Cross Origin Resource Sharing). I simply open a new tab (accessing same domain), but hit controller twice. But if within same page (not starting a new tab), it only hits controller only once.

        I made a dorm application http://dorm2.azurewebsites.net using this approach. If click on print dorms, it will open a new tab, then it will hit controller twice, but if not opening a new tab, it only hits once.

  • Manuel Alves

    So strenuous did I search the web for something like this and finally I have found it!
    Thanks a lot!

  • kris phillips

    Has anyone tried to run this with IIS Express? When I run it using IIS Express rather than Kestrel from the console, I get an error in the vendor.js:

    Unhandled exception at line 112642, column 1 in http://localhost:59653/dist/vendor.js?v=zXjAceTbWZzNTMXFaXt8RHn0kEuzf0rVAtRzIJqw-9Q

    0x800a1391 – JavaScript runtime error: ‘WeakMap’ is undefined

  • nukec

    I have an issue with adding new angular packages to the project. whenever I install new package via npm install it seems it is not distributed to main-client.js in dist folder, so I have to put them in index.cshtml manually. What is the issue and what would be the npm command and process for this to work? At which time is webpack updating main-client.js in dist folder? Do I have to put them in dev or prod build?

  • Martin Sher

    Hi

    Does anyone know if there is an update to the template using Angular 4 and Bootstrap 4 + Font-awesome

    Thanks
    Martin

  • Naresh Mehta

    Hi Jon, I am having issues while installing dotnet new –install Microsoft.AspNetCore.SpaTemplates::* It Errors – Unable to load the service index for source https://microsoftit.pkgs.visualstudio.com/DefaultCollection/_packaging/MicrosoftIT/nuget/v3/index.json. with Unautorized. 401.

    • Interesting, have you tried this again recently? Any change?

  • G$

    Hi Jon,

    Great posts on your site. Keep up the good work. Saved me lots of time getting my head around ASP.NET and the CORE framework.

    Thanks,
    Gary Silcox

  • Martin Sher

    Hi

    Using the application referenced I get an error when trying to display an img

    The image is in /Images under wwwroot.

    The error is

    Exception: Call to Node module failed with error: Prerendering failed because of error: Error: Cannot find module “/Images/Zenith Logo no-company-details.png”
    at webpackMissingModule (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:9835:211) []
    at Object.module.exports (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:9835:330) []
    at __webpack_require__ (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:20:30) []
    at Object.c (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:9478:19) []
    at __webpack_require__ (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:20:30) []
    at Object. (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:9314:24) []
    at __webpack_require__ (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:20:30) []
    at Object. (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:9714:20) []
    at __webpack_require__ (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:20:30) []
    at D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:66:18 []
    at Object. (D:DevelopmentsZenith.Angular2.PortalZenith.WebClientAppdistmain-server.js:69:10) []
    at Module._compile (module.js:571:32) []
    at Object.Module._extensions..js (module.js:580:10) []
    at Module.load (module.js:488:32) []
    Current directory is: D:DevelopmentsZenith.Angular2.PortalZenith.Web

    Any ideas as to how to get the image to display?

    Thanks
    Martin

    • MonS

      Hi Martin, were you able to find a solution for this problem?

  • Gary

    Does anyone have a procedure for updating this template to Angular 4.x?

  • MonS

    Thank you for this post. Where do the images and other assets go in the directory structure?

  • AndyB

    Out of the box the generated project appears to generate nested tags:

    @media (max-width: 767px) {

    .body-content[_ngcontent-c0] {