Saturday, June 16, 2018

I migrated an Angular 4 application to an Angular 6 application today.

I used the Angular CLI to install a new app and then I copied the package.json and package-lock.json files over their counterparts in the old app. Finally, I destroyed my old node_modules folder and copied over the node_modules folder from the new app I made. When I tried to run the application, I hit a few errors. What follows is what they were and how I got around them:

  1. Local workspace file ('angular.json') could not be found.
    Alright this is a new file. It sits side by side with package.json and I had to copy it next to package.json.
     
  2. ...rxjs/Observable"' has no exported member 'Obervable'.
    This really sucks. To fix this, you have to go through your codebase and replace this...
    import { Observable } from 'rxjs/Observable';
    ...with this...
    import { Observable } from 'rxjs';
     
  3. import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; was an import in my outermost module which got the squiggly red line under it in Visual Studio Code like InMemoryWebApiModule could not be found. I just deleted this line of code. InMemoryWebApiModule was not used anywhere. It must have been some version 4 scaffolding stuff.
     
  4. Can't resolve 'rxjs/add/observable/of'
    There is no good way around this. There is a hack to make some old code behave in an Angular 6 application though. Run this Angular CLI command:
    npm install rxjs@6 rxjs-compat@6 --save
     
  5. You seem to not be depending on '@angular/core'. This is an error.
    Huh?
    Alright, I beat this stupid error by running this Angular CLI command:
    npm install
     

Addendum 6/17/2018: I think, strictly speaking, this last command is just an npm command and not an Angular CLI command. An Angular CLI command would probably have ng in it as its lead in instead of npm.

 
 

Addendum 1/22/2020: There is a typo above. Obervable has no s in it. Lame.

No comments:

Post a Comment