从Visual Studio模板发布将Angle 4升级到angular 5

Question

I'm trying to update Angular from version 4 to version 5 that is provided by the template in Visual Studio 2017 (File -> New -> Project -> ASP.NET Core Web Application -> Angular).

By default, it seems all the angular packages are 4.2.5. As I'm a novice with Angular, I'd prefer to be on the version for tutorials provided at Angular.IO. I've tried the following tutorials to get this up to date:

• http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/

The tutorials follows the path of:

1. Create new ASP.NET Core 2 Web Application with Angular chosen as the template
2. Close Visual Studio
3. Open node.js command prompt or powershell as administrator
4. Navigate to the project folder containing packages.json
5. Run npm install -g npm-check-updates
6. Run ncu -u
7. Reopen Visual Studio
8. If packages are still pointing to Angular 4, delete package-lock.json , then repeat steps 1-7
9. Fix some code issues at outlined in the article

I've tried these steps multiple times in new projects and it never works for me. I thought maybe it could just be a UI issue and it's not updating it, so I went and put HttpClientModule with the import of import { HttpClientModule } from '@angular/common/http'; inside of the app.shared.module.ts file, but it results with this error:

ERROR in C:/Users/kandres/~/@angular/common/esm5/http.js

Module not found: Error: Can't resolve '@angular/core' in 'C:\\Users\\\\node_modules\\@angular\\common\\esm5'

@ C:/Users//~/@angular/common/esm5/http.js 6:0-100

@ ./ClientApp/app/app.shared.module.ts

@ ./ClientApp/app/app.browser.module.ts

@ ./ClientApp/boot.browser.ts

@ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts

along with 6 other similar errors for rxjs/Observable , rxjs/observable/of , rxjs/operator/concatMap , rxjs/operator/filter , rxjx/operator/map , and @angular/core (again).

When I run npm install -g npm-check-updates I get an error that says:

npm WARN npm@3.10.10 had bundled packages that do not match the required version(s). They have been replaced with non-bundled versions.

When I run ncu -u every time it says aspnet-webpack ^2.0.1 -> ^2.0.3 . I can rerun that command multiple times and get that same message. If I manually change packages.json to make that update, ncu -u says that all the packages are up to date.

The result of all of this doesn't make an change though for my project. All my dependencies for angular 4 still point to version 4.2.5. I can't seem to figure out what I'm doing wrong.

Answer 1

A bit more detailed explanation, hopefully it would be useful.

1. Make sure * Microsoft.NET Core SDK 2.1.xxx - [rc | preview | beta] candidates are uninstalled. Those come with new templates and will create asp .net core 2.1 - [rc | preview | beta] applications. Microsoft.NET Core SDK 2.1.xxx *

2. Follow the instructions here to install the latest dotnet template separately

3. Execute a dotnet new angular Check the generated structure. package.json shall be under ClientApp folder and there would be a lot of references to Angular 5.2.0

4. For development purposes, make sure that ASPNETCORE_ENVIRONMENT=Development

5. Everything else is pretty much the same:

   dotnet restore

   dotnet run