Upgrade from Angular 4 to 5: “NodeInvocationException: No provider for PlatformRef!”

Question

I've upgraded an app from Angular 4.2 to 5, but got this error: unhandled exception occurred while processing the request , more specifically:

NodeInvocationException: No provider for PlatformRef! Error: No provider for PlatformRef! at injectionError (e:\\myapp\\ClientApp\\dist\\vendor.js:12066:90)

The app also uses webpack and ASP.NET Core .

I have installed node v9.1 , and typescript 2.6.1 .

I also have updated package.json , with the command:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest 

And afterwards, ran the following:

 npm install --save-dev @ngtools/webpack@latest

I've also used HttpClient instead of Http :

import { HttpClient } from '@angular/common/http'; 
.....
 getThings() {
        return this.http.get('/api/things');

  }

If I downgrade back Angular 4, the app works fine, is there anything in my line of thought that has been done incorrectly?

Answer 1

I found a solving solution: I've used this Angular 5 Asp Core template

I've updated dependecies to latest angular 5 version: npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest

npm install --save-dev @ngtools/webpack@latest

I've recompiled webpack --config webpack.config.vendor.js (must have webpack installed globally: npm install -g webpack@2.5.1 )

I've replaced ClientApp/ASP files with my project files Manully changed in app.module :

import { HttpModule } from '@angular/http';

to

import { HttpClientModule } from '@angular/common/http';

in services files instead of Http I've used HttpClient :

import { HttpClient } from '@angular/common/http'; 

Answer 2

Two different things, which you can try:

1) import HttpClientModule at your NgModule's import array first.(If you are using HttpClient in your component)

2) https://stackoverflow.com/a/39206501/2810015

Note: to upgrade your application : https://onlyforcoder.blogspot.in/2017/11/angular-5-upgrade-your-project-To-Angular5.html