Upgrade angular 10 to 11 - template interpolation no longer working

user_2527425 0
Viewed 90

So i've been trying this a few times but was too busy to follow up on it.

Now I want to migrate on to version 13, i'm doing 1 version at the time. But the same issue still exist (even if i skip on to 13).

When upgrading to Angular 11, template interpolation just stops working resulting in all the templates filled with things like {{message}} (there are no errors in the console and everything else works perfectly fine!)

I've used the Angular Upgrade feature which said all code was fine and we only needed new packages. We are running hybrid with AngularJs though, which also means we use the custom webpack builder for the AngularJs template compiler, translations and legacy jQuery expose loading.

I can provide lots and lots of code snippets and files (and will update my question if someone wants a specific file) but was hoping someone knew anything about this without having to paste all the config files. Maybe just someone saying, ah we had this too, it's this 1 line that you need.

angular upgrade
1 Answers

After disabling everything and searching step by step I found the 4 potential culprits. I changed them all and am 99% sure it's the first one. But changing all these 4 will definitely fix it.

  1. Angular update does not properly update zone.js a fresh angular 11 project shows that you need zone.js 0.11.4 instead of 0.10.3

  2. Angular update does not properly update rxjs, a fresh angular 11 project shows that you need rxjs 6.6.7

  3. Angular update does update typescript, but a fresh angular 11 project shows that you need rxjs 4.1.6 instead of 4.0.5

  4. Angular.json does not get "aot": true added to the following section

     {
     ...
     "projects": {
         "project-name": {
             ...
             "architect": {
                 "build": {
                     ...
                     "options": {
                         ...
                         "aot": true,
user_25274250
Related