How to create an Angular 6 app with Visual Studio 2017

Copyright from: www.talkingdotnet.com

At the time of writing this post, default ASP.NET Core SPA templates allow you to create Angular 5 based app with Visual Studio without installing any third-party extensions or templates. Angular 6 is out now and you can also upgrade the Angular 5 app to Angular 6. What if you want to create Angular 6 app with VS 2017? This post talks about how to create an Angular 6 App with Visual Studio 2017 and how to extend it with a simple example.

How to create an Angular 6 app with Visual Studio 2017

In this post, we’ll use an ASP.NET Core 2.1 based API project and inside the same project, will create an angular 6 app. Therefore, before we begin, please do the following installation (ignore if already done).

• .NET Core 2.1 RC1 SDK — includes the runtime
• Install Visual Studio 2017 Update 7 or Visual Studio for Mac 7.5. You can also use latest version of Visual Studio 2017 Preview. 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.
• Node.js and npm latest version
• Angular CLI

Open Visual Studio 2017, hit Ctrl+Shift+N and select the ASP.NET Core Web Application (.NET Core) project type from the templates. When you click Ok, you will get the following prompt. Select ASP.NET Core 2.1 and choose the API template.

The Visual Studio will create an ASP.NET Core 2.1 based Web API project with a controller named ValuesController. Just run the app to make sure it is running successfully.

Now, let’s add Angular 6 app to this project through Angular CLI. To do that, first open developer command prompt for Visual Studio and navigate to the project folder (if not there). First, install/update the Angular CLI using the following command.

1	npm install -g @angular/cli

Next, we need to create angular 6 based app. To do that, navigate to the ASP.NET Core project root folder (where the project’s solution file is present) and run the following command. Here, the angular app name must be same as your project name.

1	ng new Angular6App

This will take some time to create angular 6 based app. Once created, the project structure will look like the following.

To run this angular application with Visual Studio 2017, we need to make a couple of changes.

• First, edit the .csproj file and add the following 2 entries in the PropertyGroup section.

  1 2

  true

ng build --aot

These entries will ensure that TypeScript files are compiled using Angular CLI instead of Visual Studio.

Next, open angular.json file and set the outputPath key value to wwwroot. This is required as the wwwroot folder in ASP.NET Core application, is the place to serve static files. This change tells angular cli to copy the generated HTML, CSS and JS files to wwwrootfolder.

Next, open Startup.cs file and add these 2 middlewares in the configure method.

1 2	app.UseDefaultFiles(); app.UseStaticFiles();

This tells ASP.NET Core to serve the static content from the wwwroot folder.

Next, delete "launchUrl": "api/values" from the Properties/launchSettings.json file.

Finally, build the application in Visual Studio and run the app. You should see following in the browser.

That’s it. The angular 6 based app running successfully 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.

Conclusion

With Angular 5, the ASP.NET Core SPA templates support angular cli based application, compare to Angular 4 based application. This is the right decision as this allows developers to include Angular based apps created using CLI inside ASP.NET Core projects. In this post, we saw how easily we can integrate angular cli based application in ASP.NET Core app.

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 

Upgrade Angular 5 app to Angular 6 with Visual Studio 2017

Copyright from: www.talkingdotnet.com

Angular 6 is out!! It’s another major release focused on minimum new features and more on the tooling to make upgrading and adding new libraries a lot easier. Earlier I posted about creating an Angular 5 application with Visual Studio 2017 using ASP.NET Core 2.1 SPA templates. Now, it’s time to upgrade the same angular app to the latest version which is Angular 6. This post talks about how to upgrade Angular 5 app to Angular 6 with Visual Studio 2017. The steps given in this post are applicable to any Angular 5 app, not limited Visual Studio 2017.

Upgrade Angular 5 app to Angular 6

• First, Update the Angular CLI to the latest version globally using following command:

  1	npm install -g @angular/cli

• Next, we need to update Angular CLI local version specific to the app. To do that, navigate to the Angular app root folder (where package.json lives) and run the following command.

  1	npm install @angular/cli

• Angular CLI now offers support for workspaces containing multiple projects, such as multiple applications or libraries. So, it’s now possible to have several applications in the same CLI project (called a workspace), and to create libraries (a shared set of components, directives, pipes and services)! This new architecture uses angular.json instead of .angular-cli.json for build and project configuration. So, the .angular-cli.json file needs to be deleted and the new angular.json file needs to be added in the project. Don’t worry, you don’t have to do this manually. Run the following command to convert the configuration file to the new format (angular.json).

1	ng update @angular/cli

Once this command is completed successfully, you can see the angular.json file in the solution explorer. I had to run this command twice to get the new file. So, if you can’t find the new angular.json file in the solution explorer after running the command for the first time, give it a second try.
You can learn more about the angular.json file here.
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.
• Next, it is time to upgrade all the framework packages to Angular 6. To do that, run the following command:

  1	ng update @angular/core

  All the Angular framework packages are upgraded to Angular 6. You can verify it via the package.json file.
• The default ASP.NET Core SPA template doesn’t use Angular Material, but if you are using it in your app, update Angular Material to the latest version by running the following command:

  1	ng update @angular/material

• Next, run ng update to identify and update other dependencies.
• Angular 6 now depends on TypeScript 2.7 and RxJS 6. So, we need to upgrade RxJS. You would be already thinking about making the code changes manually everywhere RxJS imports and operators are used. Don’t worry, there’s a package that takes care of this. Run the following commands to upgrade RxJS.

  1 2	npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json

  Once this is done, remove rxjs-compat. This package is required to get backwards compatibility with RxJS previous to version 6. But, it is no longer required now, so let’s remove it using the following command:

  1	npm uninstall rxjs-compat

• Now, run ng serve to see the application is building and running without any error. There is one more thing left here. If we build the application from Visual Studio 2017 and run it, You may see the following exception in the browser.
  InvalidOperationException: The NPM script ‘start’ exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: ‘–extractCss’
  This is because the ng serve command no longer supports --extractCss option. The extractCSSis a JavaScript library and an online tool that lets you extract element ID, class and inline styles from the HTML document and output them as a CSS style sheet. This option is not available on ng serve because it is an option related to building, not to serving.
  To fix this, remove the --extract-css option from the ng serve command in the scripts section of package.json file.

  1	"start": "ng serve"

  Save the package.json file, build the app and run again. You should see the app running in the browser.
  Though, you can still extract the CSS while doing ng serve by modifying the angular.json. To do that, you need to add a serve rule to build architect in angular.json. Like,

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  "architect": {   "build": {     "builder": "@angular-devkit/build-angular:browser",     "options": {       ---Options //Removed intentionally     },     "configurations": {       "production": {         ---Options //Removed intentionally       },       "serve": {         "extractCss": true       }     }   },

  Then, change serve->options->browserTarget->project-name:build to project-name:build:serve. Like,

  1 2 3 4 5 6 7 8 9 10 11

  "serve": {     "builder": "@angular-devkit/build-angular:dev-server",     "options": {       "browserTarget": "MigrateAngular5To6:build:serve"     },     "configurations": {       "production": {         "browserTarget": "MigrateAngular5To6:build:production"       }     }   }

  Please see the below image to know more about the changes.
  

That’s it. Congratulations, you have successfully upgraded your Angular 5 app to Angular 6.