Skip to main content

Upgrade Angular 5 app to Angular 6 with Visual Studio 2017

Talking Dotnet Angular, ASP.NET Core

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: 
    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. 
    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).
    • 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: 
    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: 
    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. 
    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:

    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 extractCSS is 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.

    "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,

    "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,

    "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.

    Upgrade Angular 5 app to Angular 6 with Visual Studio 2017

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

Now, you can also create Angular 6 from scratch using Visual Studio 2017 and ASP.NET Core. Read more here.

Reference Posts:

Summary

To conclude, this post takes you through a step-by-step guide for upgrading Angular 5 app to Angular 6. Angular 6 makes the whole upgrade process a lot simpler and easier compared to its previous versions. As it is mainly focused on better tooling for improving the upgrading and adding new libraries a lot easier. If you face any issues while upgrading, let me know in the comments section.

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 Buy Me A Coffee

49 thoughts to “Upgrade Angular 5 app to Angular 6 with Visual Studio 2017”

  1. Pingback: Unknown option -extractCss in AspNetCore Angular 6.0 SPA Template - MicroEducate

  3. I get an error when running “ng update @angular/core”.
    It says: Package “@angular/flex-layout” has an incompatible peer depIncompatible peer dependencies found. See above.

    Do you know how do I fix this?

    Reply

  4. The second step is incorrect as of July 13, 2018 with DotNet SDK 2.1.302 installed.

    Instead of this:

    npm install @angular/cli

    the correct command is:

    npm install @angular/cli@latest

    The reason for this change is that this command:

    dotnet new angular

    generates an old, Angular 5.x application and if run the second step WITHOUT the @latest designator, the existing angular/cli 1.7.4 will not be properly updated, which in turn will cause the remaining steps to either not work or be ineffective.

    Reply

  6. Hello ,
    Your solution working perfectly But I got the same Issue Related to page refreshing / building while Changing html .

    But its will work after project rebuild [Rebuild in visual studio ] . Please Replay as soon as possible

    Is there any missing Steps/case

    Reply

    1. I have the same issue. But I have noticed in the debug output that it starts the Live Deployment Server on a different port. When I go to that port, everything seems to be working fine

      Reply

  7. Hi,

    Thanks for always coming up with the solution to the very problem I run into 😉

    Could you please write a post describing the differences between the “.NetCore + Angular 4” template in Visual Studio that had the WebPack, AOT and ServerSideRendering, and the new “.NetCore + Angular 5.2” template that uses AngularCLI and NgServe in place of those things?

    That would be another great favor from you to your readers like me.

    Cheers!

    Reply

  8. Thank you so much! There is very little documentation about this, and your steps worked perfectly. If we ever meet, I owe you a beer :).

    Reply

    1. Correct. When you run the app through F5, the changes will not be made available instantly because live reloading is not enabled. You would have to enable HMR (Hot module Replacement) for live reloading in your startup.cs. Try below code,

      app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
      {
      HotModuleReplacement = true
      });

      Reply

      1. Is there a how to on how to do this? Everything I find seems to point to the angular documentation which doesn’t provide any guidance on VS2017. I am rather familiar with webpack and angular but not so much with ASP.NET and VS2017.

        Reply

  10. Thanks for the post.
    I followed your steps. Except for some peer dependency warning in ng-bootstrap, bootstrap, etc, all seemed to be working.
    But when I ran ‘ng serve”, I got the error: “Cannot find module ‘webpack/lib/RequestShortener’”
    I tried following your suggestion for Hetal to run:
    npm install webpack
    npm install webpack-dev-server
    Then when I ran “ng serve”, it attempted to build, but failed with many errors similar to:
    ERROR in node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-service.d.ts(5,10): error TS2305: Module ‘”C:/GOVMEETING/_SOURCECODE/src/ClientApp/node_modules/rxjs/Observable”‘ has no exported member ‘Observable’.

    Reply

  12. Thanks for taking the time to figure this all out.

    After running “ng update @angular/cli” numerous times, I’m still not seeing the angular.json file. Is there a default file that I can put in?

    My baseline project is from the Github link in your previous article “Upgrade Angular 4 app to Angular 5 with Visual Studio 2017”

    Reply

      1. No errors, couple of warnings:
        npm WARN @angular/compiler-cli@5.1.1 requires a peer of typescript@>=2.4.2 <2.6 but none is installed. You must install peer dependencies yourself.
        npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
        npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"ia32"})

        I'm wondering if I should downgrade my Typescript version. I currently have 2.8.4 installed.

        Reply

  13. Hi, Good and extremely helpful.
    I have having issue , while running “ng serve ” getting the following error on Web page.

    Failed to load styles.0243bd00007c5e1092e8.css

    hence stoped on loading….

    Reply

      1. do you think in development mode there should be any file generated with Hash. it is creating just this single file with Hash, rest of the files are normal.

        Reply

      2. Hi,
        Style.css exists in src folder. I do not know why it is trying converting this single file into hash format but not doing so. In “ng Serve” result it shows “chunk {styles} styles.css, styles.css.map (styles) 142 kB [initial] [rendered]”

        Stuck, not finding any help.

        Thanks in advance

        Reply

  14. Hi,

    Thanks for the providing step by step info to update to angular 6 .

    I performed all the steps and it worked well.

    But while doing ng serve,

    Cannot find module ‘webpack’
    Error: Cannot find module ‘webpack’
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)

    Any help?

    Thanks!

    Reply

  15. Hi, thanks for this article. After I run “npm install -g rxjs-tslint” and run “rxjs-5-to-6-migrate -p src/tsconfig.app.json”, I get
    ‘rxjs-5-to-6-migrate’ is not recognized as an internal or external command,
    operable program or batch file.

    Any ideas why this would happen? I have npm v5.6.0 and node v8.11.1

    Thanks!

    Reply

      1. Thanks – rxjs-5-to-6-migrate is not in my PATH variables – do you know which path should be there for rxjs-5-to-6-migrate?

        Reply

          2. Thanks. I have npm 5.6.0, so I don’t think that issue applies to me.
            npm install -g rxjs-tslint does not error, but there is a WARN. This is the output:

            C:\Users\myself\AppData\Roaming\npm\rxjs-5-to-6-migrate -> C:\Users\myself\A
            ppData\Roaming\npm\node_modules\rxjs-tslint\bin\rxjs-5-to-6-migrate
            npm WARN rxjs-tslint@0.1.4 requires a peer of tslint@^5.0.0 but none is installe
            d. You must install peer dependencies yourself.

            + rxjs-tslint@0.1.4
            added 45 packages in 8.543s

          4. Thanks again for your comments. I figured out what the issue was. I have a custom location set up for global installs (for permissions reasons). This got changed somehow. So I had to reset that location and verify where the command file “rxjs-5-to-6-migrate.cmd” was being created. This is what Windows runs when you run the command “rxjs-5-to-6-migrate -p src/tsconfig.app.json”

            Once I found the command file, I could run it in the command line from that directory.

  16. Pingback: Node and Angular CLI version not matching | Mobilapka.cloud

  17. Hi,

    Thanks so much for your post. I was stuck in the extractCss part, I was following the official guide of Angular to migration. My only doubt, even after updating rxjs, I really still need to import ‘rxjs/operators’ in order to use take, tap and so on? By the github repo, I saw now I need to pipe everything as well and do operator changed to tap.

    Reply
  18. Pingback: Dew Drop – May 8, 2018 (#2720) | Morning Dew

Leave a Reply

Your email address will not be published. Required fields are marked *