bug: ionic 4.7 update bug

[MrBokeh]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
There are three errors by following the 4.7.0 updating guide:

First problem:

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@angular-dev": Tags may not have any characters that encodeURIComponent encodes.
...
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@angular-dev": Tags may not have any characters that encodeURIComponent encodes.

Second problem, the migrate command doesn't work:

------ Static Query Migration ------
            With Angular version 8, developers need to
            explicitly specify the timing of ViewChild and
            ContentChild queries. Read more about this here:
            https://v8.angular.io/guide/static-query-migration
            
            The template migration strategy uses the Angular compiler internally and therefore projects that no longer build successfully after the update cannot use the template migration strategy. Please ensure there are no AOT compilation errors.
            
            Could not setup migration strategy for "src/tsconfig.app.json". The following error has been reported:
            
            TypeError: compiler_1.findStaticQueryIds is not a function
            
            Migration can be rerun with: "ng update @angular/core --from 7 --to 8 --migrate-only"
            
            ------------------------------------------------

The third problem when I run ionic serve even I have that package installed with -D:

> ng run app:serve --host=localhost --port=8100
[ng] Could not find module "@angular-devkit/build-angular" from "......".

Expected behavior:

Follow the guide without issues I suppose

Steps to reproduce:
npm install @ionic/angular-toolkit@2.0.0 -D
npx ng update @angular/core @angular/cli
npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-dev

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   ios-deploy : 2.0.0
   NodeJS     : v10.16.0 (/usr/local/bin/node)
   npm        : 6.10.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.3 Build version 10G8

[liamdebeasi]

Thanks for the issue. Did you follow our Angular 8 Migration Guide? https://docs.google.com/document/d/1QOpQeDifPSg6F9WycDLcbQnpqjN96ew-Ap0_CB7CcCQ/edit

There is a link in the guide to a known issue in the Angular CLI where the Static Query Migration might not work.

Also for the EINVALIDTAGNAME error it sounds like you may have been missing a space somewhere. I would recommend trying that again, but copying the commands from the migration guide doc.

Can you try that and let me know if it resolves your issue? Thanks!

[zmoshansky]

@liamdebeasi @brandyscarney, It may be worth noting in the changelog that Ionic 4.7 brings support for NG8 via #18414.

[MrBokeh]

@liamdebeais, the migration guide causes so much issue with npm modules folder. Eventually I need to delete the npm module folder and the package json lock file.. reinstall everything. Reinstall again with the dev only command... it’s a lot of hassle and still no luck. A lot of packages has mismatch peers etc. The conference app seems to have some matching libraries but the angular 8 has so many breaking changes compare to 7... the import libraries are different etc... I will stick with angular 7 with 4.7.0 until the next starter black project that has angular 8 in it, and then I will migrate my code to 8...

[liamdebeasi]

Hi @MrBokeh,

Ionic 4.7.0 is fully compatible with Angular 8 and should not introduce the issues you are describing.

Can you post the steps you are taking to migrate your project to Angular 8? Additionally, if there is an Angular 7 code base you are testing this on, that would also be helpful to see.

[MrBokeh]

Here are the steps:

1. npm install @ionic/angular@4.7.1

2. npm install @ionic/angular-toolkit@2.0.0 -D

Step 2 generated 4 warnings
npm WARN @ionic/angular-toolkit@2.0.0 requires a peer of @angular-devkit/architect@>=0.800.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular-toolkit@2.0.0 requires a peer of @angular-devkit/build-angular@>=0.800.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular-toolkit@2.0.0 requires a peer of @angular-devkit/core@>=8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular-toolkit@2.0.0 requires a peer of @angular-devkit/schematics@>=8.0.0 but none is installed. You must install peer dependencies yourself.

3. npm install @angular/cli@latest

Same warnings
npm WARN @ionic/angular-toolkit@2.0.0 requires a peer of @angular-devkit/architect@>=0.800.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular-toolkit@2.0.0 requires a peer of @angular-devkit/build-angular@>=0.800.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular-toolkit@2.0.0 requires a peer of @angular-devkit/core@>=8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular-toolkit@2.0.0 requires a peer of @angular-devkit/schematics@>=8.0.0 but none is installed. You must install peer dependencies yourself.

4. npx ng update @angular/core @angular/cli

Repository is not clean.  Please commit or stash any changes before updating.

5. Stash and rerun the command above

### Generated 5 warnings plus 1 error:
npm WARN @angular/http@7.2.15 requires a peer of @angular/core@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/platform-browser@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@7.3.9 requires a peer of @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@7.3.9 requires a peer of typescript@>=2.4.0 < 3.3 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.5.0 requires a peer of @angular/compiler@>=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.5.0 requires a peer of @angular/core@>=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0 but none is installed. You must install peer dependencies yourself.

added 23 packages from 5 contributors, removed 54 packages, updated 27 packages and audited 55368 packages in 26.993s
found 2 vulnerabilities (1 low, 1 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
Cannot find module '../run-schematic/executor'

6. npm i @angular-devkit/{architect,build-angular,core,schematics}@latest

Generatded 6 warnings:

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN @angular/http@7.2.15 requires a peer of @angular/core@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@7.2.15 requires a peer of @angular/platform-browser@7.2.15 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular-toolkit@1.5.1 requires a peer of @angular-devkit/core@>=0.7.2 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/angular-toolkit@1.5.1 requires a peer of @angular-devkit/schematics@>=0.7.2 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.5.0 requires a peer of @angular/compiler@>=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.5.0 requires a peer of @angular/core@>=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0 but none is installed. You must install peer dependencies yourself.

7. I re-run this command again "npx ng update @angular/core @angular/cli"

 Package "@ionic/angular" has an incompatible peer dependency to "@angular/compiler" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/compiler-cli" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@angular/common" has an incompatible peer dependency to "@angular/core" (requires "8.2.0-rc.0", would install "8.1.3")
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/common" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@angular/platform-browser" has an incompatible peer dependency to "@angular/core" (requires "8.2.0-rc.0", would install "8.1.3")
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/platform-browser" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@angular/platform-browser-dynamic" has an incompatible peer dependency to "@angular/core" (requires "8.2.0-rc.0", would install "8.1.3")
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/platform-browser-dynamic" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@angular/router" has an incompatible peer dependency to "@angular/core" (requires "8.2.0-rc.0", would install "8.1.3")
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/router" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@angular/forms" has an incompatible peer dependency to "@angular/core" (requires "8.2.0-rc.0", would install "8.1.3")
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/forms" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
Incompatible peer dependencies found. See above.

8. ng update @angular/cli --allow-dirty

    Package not installed: "--allow-dirty". Skipping.
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/compiler-cli" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/compiler" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/common" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/forms" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/core" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/platform-browser" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/router" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
                  Package "@ionic/angular" has an incompatible peer dependency to "@angular/platform-browser-dynamic" (requires "7.2.1 - 8" (extended), would install "8.2.0-rc.0").
Incompatible peer dependencies found. See above.

9. ng update @angular/cli --allow-dirty --from 7 --to 8 --migrate-only

--from requires that only a single package be passed.

Please help!

[liamdebeasi]

Thanks for the follow up. I was able to reproduce the issue. It looks like you got some of your upgrade instructions mixed up.

As stated in the instructions, you should only have to run npx ng update @angular/core @angular/cli to install the latest Angular Core and Angular CLI.

There is a bug where the CLI will attempt to install Angular 8.2.0-next. The workaround for that is:

npm install @angular/cli@latest
npx ng update @angular/core

It looks like you combined both the regular instructions and the workaround with:

npm install @angular/cli@latest
npx ng update @angular/core @angular/cli

When following the guide I no longer ran into the issue you are describing. Can you try following the guide again?

[MrBokeh]

I have tried this alternative method:

1. Copy the dependencies from the latest angular 8 starter project, replace it with my project.
2. npm install
3. no errors!
4. ionic serve

These are the breaking changes:

Expected 2 arguments, but got 1.
[ng] 27   @ViewChild("chat_content") content: IonContent;

Expected 2 arguments, but got 1.
[ng] 28   @ViewChild('vid') vid: ElementRef;

Cannot find module '@angular/http'.
[ng] 2 import { Http } from '@angular/http';

Also some import errors with all these packages:

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

[liamdebeasi]

Thanks for the follow up. Please see the Angular 8 Breaking Changes list: https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes.

@ViewChild needs to have the static or dynamic flag explicitly stated. Additionally, the @angular/http package has been removed. @angular/common/http should be used instead.

Upon resolving these issues, does everything work?

[MrBokeh]

I will come back to you once I get my app working again... every .ts file has a few breaking changes...!

[liamdebeasi]

Ok great! Since it sounds like the original issue is resolved, I am going to close this issue. If you run into new issues, feel free to open a new issue, and we will take a look. Thanks!

[MrBokeh]

I think the error told me that those packages have no export member which is not right...
I guess I will migrate my project by hand into a new starter project! The migration doesn't work!

[MrBokeh]

Ok great! Since it sounds like the original issue is resolved, I am going to close this issue. If you run into new issues, feel free to open a new issue, and we will take a look. Thanks!

The original issue is the migration guide is not working which is still true...

[liamdebeasi]

Hi there,

As I commented previously the migration guide was not followed properly, but upon following the guide the migration worked. Which packages are you getting has no exported member errors with? It's likely these are due to Angular breaking changes.

[brandyscarney]

@MrBokeh Our steps provided for updating Angular 8 are there to help guide users, but it is not an all-inclusive guide. There may be potential issues that you run into when updating but those are due to the Angular update or breaking changes that are introduced by Angular. These are not caused by Ionic 4.7.0. I personally ran into issues when updating the conference app and the following steps worked for me:

On conference app master, remove node_modules and run npm i to have the same starting point

npm i @angular/cli@latest

npm install @ionic/angular@4.7.0
npm install @ionic/angular-toolkit@2.0.0 -D

This comment instead: angular/angular-cli#14589 (comment)

Had to commit in between each command below because it warned the repo wasn't clean:
Repository is not clean. Please commit or stash any changes before updating.

ng update @angular/cli
ng update @angular/cli --from 7 --to 8 --migrate-only 
ng update @angular/core
ng update @angular/cli --from 7 --to 8 --migrate-only

On a mac:

npm i @angular-devkit/{architect,build-angular,core,schematics}@latest

Or on PC:

npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest

You may want to look at the following site for more detailed steps tailored to your project: https://update.angular.io/

[brandyscarney]

@zmoshansky Thanks! We have this added to the release notes here: https://ionicframework.com/docs/release-notes#4.7.0

But I just added the same to the changelog: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#470-nitrogen-2019-07-24

[lenichols]

Still having a tough time with this. Could not find module "@ionic/angular-toolkit" from "/Users/xxx/git/ionicapp".

I am not ready to upgrade ionic. Any thoughts?

[MrBokeh]

I gave up on the migration guide. I migrated the code manually to a blank starter project...

[vagnersabadi]

I also had major issues migrating, so I will continue on the ion / angular version 4.6.2

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.