NG Development Server not refreshing page post Angular 6 upgrade

[kakins]

I migrated my project from Angular 5.2 to 6. My project runs now with no errors, however I don't think the development server is behaving correctly.

Whenever I launch in debug, I no longer see that the development server is running in the Debug output.

Secondly, whenever I save a file, the app does not refresh in the browser. I've tried starting the server manually, and it does detect changes made and recompiles. However the browser does not refresh.

Any recommendations of where I might check?

Here is my package.json

{
    "name": "PrepBudget",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "build:ssr": "ng run PrepBudget:server:dev",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "6.1.4",
        "@angular/cdk": "6.4.6",
        "@angular/common": "6.1.4",
        "@angular/compiler": "6.1.4",
        "@angular/core": "6.1.4",
        "@angular/flex-layout": "^6.0.0-beta.17",
        "@angular/forms": "6.1.4",
        "@angular/http": "6.1.4",
        "@angular/material": "^6.4.6",
        "@angular/material-moment-adapter": "^6.4.6",
        "@angular/platform-browser": "6.1.4",
        "@angular/platform-browser-dynamic": "6.1.4",
        "@angular/platform-server": "6.1.4",
        "@angular/router": "6.1.4",
        "@nguniversal/module-map-ngfactory-loader": "6.1.0",
        "aspnet-prerendering": "^3.0.1",
        "bootstrap": "^3.3.7",
        "core-js": "^2.5.4",
        "moment": "2.22.2",
        "rxjs": "6.2.2",
        "zone.js": "^0.8.26"
    },
    "devDependencies": {
        "@angular/compiler-cli": "6.1.4",
        "@angular/platform-server": "6.1.4",
        "@angular-devkit/build-angular": "0.7.0-rc.0",
        "typescript": "2.9.2",
        "@angular/cli": "6.1.4",
        "@angular/language-service": "6.1.4",
        "@types/jasmine": "~2.8.6",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "4.4.4",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~2.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "^1.4.2",
        "karma-jasmine": "~1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2"
    },
    "optionalDependencies": {
        "node-sass": "^4.9.3",
        "protractor": "5.4.0",
        "ts-node": "~5.0.1",
        "tslint": "~5.9.1"
    }
}

[kakins]

I was able to find someone who had a very similar issue with the browser not refreshing, but the code was recompiling on save.

angular/angular-cli#4329 (comment)

I deleted the contents of the /dist folder, which apparently may have been running an old build. After doing so and restarting the project in visual studio, the browser is refreshing.

However I'm a little curious as to why I now do not see "** Angular Live Development Server is listening on ..." in my output window anymore.

[mkArtakMSFT]

Thanks for contacting us, @kakins.
Glad that you found the cause for the issue you were facing.
While we do our best to look through all the issues filed here, to get a faster response we suggest posting your last questions to StackOverflow using the asp.net-core-mvc tag.

[mkArtakMSFT]

/cc @SteveSandersonMS

[SteveSandersonMS]

@kakins I'm afraid I don't know why you're seeing any particular change in behavior, since I don't know how exactly you upgraded from Angular 5 to 6 and what config or file layout changes you made in the process.

In general, upgrading from Angular 5 to 6 is a pretty complex process since they changed how the config system works entirely. Our recommended Angular 6 structure is what we're shipping in ASP.NET Core 2.1 as the latest ASP.NET Core + Angular template. If you want to compare this against your version, you can find our sources here: https://github.com/aspnet/Templating/tree/master/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/Angular-CSharp

@mkArtakMSFT Recommend we close this as there's no indication that we have any defect.

[mkArtakMSFT]

Thanks @SteveSandersonMS!
Closing this per your response.

[kakins]

@SteveSandersonMS Understood, and I suppose that makes a little more sense now. Is there any recommended approach for updating a project that was based on a previous version of Angular?

I basically went through the Angular update guide (https://update.angular.io/). After that I had to try and find out what changes occurred in the VS template. Like I said, I got it working but I'm almost certain I missed something.

It'd be nice if the template repo did something similar as the Angular team, provide a migration document for projects based on earlier versions of the template.

[SteveSandersonMS]

Is there any recommended approach for updating a project that was based on a previous version of Angular?

@kakins I'm afraid there isn't an automated process, but the upgrade guide you've followed covers most of it. Going forwards we're increasingly trying to decouple the ASP.NET Core parts from the Angular parts so that, for example, when it comes time to upgrade to Angular 7+ then even if Angular has changed significantly, it should involve minimal changes on the ASP.NET Core side. It's always a tradeoff between having more integration which lets us create additional conveniences for developers, versus keeping more decoupled which leads to easier upgrades and more standardisation.