How to create an Angular 5 app with Visual Studio 2017

Earlier, I posted about creating an Angular 4 app with VS 2017 and also posted a guide to upgrade an Angular 4 app to Angular 5 with VS 2017. Now you can also create Angular 5 app with Visual Studio 2017, without installing any third-party extensions or templates. This post talks about how to create an Angular 5 App with Visual Studio 2017 and how to extend it with a simple example.

How to create an Angular 5 app with Visual Studio 2017

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

The new Angular 5 template is available with the ASP.NET Core 2.1 release and ASP.NET Core 2.1 preview 1 is recently released. Therefore, to use the new Angular 5 template, following installation is required.

• Download .NET Core 2.1 Preview 1, on Windows, MacOS, and Linux:
  • .NET Core 2.1 Preview 1 SDK — includes the Runtime
  • .NET Core 2.1 Preview 1 Runtime
• Visual Studio 2017 Latest Preview Version : Don’t worry. Visual Studio and Visual Studio “Preview” can be installed side-by-side on the same device. It will have no impact on your current stable VS installation.

The installation will take some time to install. Once both the installations are finished, open Visual Studio “Preview” version, hit Ctrl+Shift+N and select the ASP.NET Core Web Application (.NET Core) project type from the templates. When you click Ok, you should be prompted with the following,

Make sure to select “ASP.NET Core 2.1” from the version dropdown and choose Angular. The Visual Studio will create an ASP.NET Core 2.1 based project with Angular 5 configured. You should see the following project structure.

Similar to Angular 4 app, JavaScriptServices is used for Angular 5 app with ASP.NET Core. JavaScriptServices is a collection of client-side technologies for ASP.NET Core. Its goal is to position ASP.NET Core as developers’ preferred server-side platform for building SPAs. It includes support for the client-side frameworks – Angular, React and React + Redux.

You can verify the Angular version in package.json file placed in the ClientApp directory.
There are a couple of things to take note of.

• The ClientApp folder contains the Angular app and this Angular app is a standard Angular CLI application. This allows you to execute any ng command (e.g., ng test), or use npm to install extra packages into it.
• There is no webpack.config.js file present in the solution. That doesn’t mean that Webpack is not used as a module bundler. Angular CLI uses Webpack and effectively puts together a Webpack config file on the fly based on the project configuration options you pass in. Angular CLI loads its configuration from .angular-cli.json file stored in ClientApp directory.

  By default, Angular CLI manages the underlying Webpack configuration for you so you don’t have to deal with its complexity. If you wish to manually configure Webpack in your Angular application, you can run the following command at the ClientApp directory location:

  $ ng eject

  You may receive an error saying “Your package.json scripts must not contain a build script as it will be overwritten.”. To fix this error, use the following command.

  $ ng eject --force

  You should see the following output on the terminal window.

  

  
  
  
  

  When this command is executed, below things happen behind the scene:

  • A property ejected: true is added to the .angular-cli.json file.
  • This will add a webpack.config.js file in the ClientApp directory with a standalone Webpack configuration so you can build your project without Angular CLI.
  • The scripts section of the package.json file gets updated. Here is the old content,

    
    "scripts": {
        "ng": "ng",
        "start": "ng serve --extract-css",
        "build": "ng build --extract-css",
        "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
    
    

    Here is the new updated scripts section.

    
    "scripts": {
        "ng": "ng",
        "start": "webpack-dev-server --port=4200",
        "build": "webpack",
        "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
        "test": "karma start ./karma.conf.js",
        "lint": "ng lint",
        "e2e": "protractor ./protractor.conf.js",
        "pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
      },
    
    

    The app now no longer uses Angular CLI to build and run, instead uses Webpack. That means the ng build command no longer builds the app, instead use webpack command (as mentioned in scripts section). This also allows you to manually update the Webpack configuration as per your need.

    If you wish to go back to Angular CLI, go into your .angular-cli.json file and remove the ejected property and restore the scripts section to use Angular commands. No need to delete the webpack.config.js file.

• When this app starts in development mode, it also starts its own instance of the Angular CLI server in the background. This is convenient because your client-side resources are dynamically built on demand and the page refreshes when you modify any file. To verify this, execute dotnet run command and notice that ng serve command is also executed.

  

  This is happening as the project is configured in this way. Open Startup.cs and see the configure method code. The UseSpa middleware runs the Angular CLI in development mode.

  This has advantages but also has a drawback. In case of any C# code change, we need to restart the application and this in turn restarts the Angular compiler. If you are making frequent C# code changes, this will increase the application compile time. To speed up things, the Angular server can be run as a standalone process, independent of the ASP.NET Core process. You can connect to it from the ASP.NET application. To do that, navigate to ClientApp directory on command prompt and run ng serve command to start the Angular server.

  

  Copy the development server URL from the command prompt, and replace the following line in Startup.cs,

  spa.UseAngularCliServer(npmScript: "start");

  with,

  spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

  Execute the dotnet run command and you will notice it no longer execute ng serve command in the background.

  

• By default, Server-side rendering is disabled. You can follow the steps given on official documentation to enable SSR.
• In production mode, development-time features are disabled, and your dotnet publish configuration automatically invokes ng build to produce minified, ahead-of-time compiled JavaScript files.

When you run the app, you should see following in the browser.

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

Let’s extend this application a bit. Here, the fetch data component calls an API to get random weather forecasts. Like,

Earlier, I posted Bind Select DropDown List in Angular 2 and let’s add a dropdown on top of the grid to filter the data based on the selected value. Below is the API code to return summary list and weather forecasts. The new API added to the sample code is GetSummaries()

private static string[] Summaries = new[]
{
     "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};

[HttpGet("[action]")]
public string[] GetSummaries()
{
    return Summaries;
}

Next, update the code of fetchdata.component.ts to call the GetSummaries, along with WeatherForecasts API. We also need to define another method to filter the forecast based on the selected value in the dropdown.

Lastly, put this HTML in fetchdata.component.html to show the summary dropdown.

<div>
    <label>Summary: </label>
    <select (change)="filterForeCasts($event.target.value)">
        <option value="0">--All--</option>
        <option *ngFor="let summary of summaries" value={{summary}}>
            {{summary}}
        </option>
    </select>
</div>

Run the application and navigate to fetch data. You should see a drodown having list of all the summaries. Changing the selection will also update the weather forecast grid.

That’s it. It’s really easy to create Angular 5 app without worrying about required configurations and package installation.

Bonus Tip: You can also create Angular 5 app using dotnet cli

Angular 6 is out and you can upgrade this application to Angular 6. Read this step-by-step guide to upgrade this app to Angular 6.

Also, if you are looking to upload a file from an Angular 5 app to ASP.NET Core Web API, read this post.

Conclusion

To conclude, the new Angular 5 template is based on Angular CLI standard which allows developers to execute Angular commands. It is backed by ASP.NET Core JavaScriptServices and Webpack for bundling. This post also talks about injecting Webpack manually, instead of using the default configured Webpack with Angular CLI. At the time of writing this, all the things are in the preview stage, but it is very unlikely to change much when the final version comes out.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then