14

Happened while trying to upgrade IONIC app from version 3 to 4

Updated all plugins and modules to latest available, without any luck.

ERROR in ./node_modules/ionic-angular/components/app/app.js 24:35-43
"export 'DOCUMENT' was not found in '@angular/platform-browser'
ERROR in ./node_modules/ionic-angular/module.js 195:71-79
"export 'DOCUMENT' was not found in '@angular/platform-browser'
[ERROR] An error occurred while running subprocess ng.

This is my IONIC INFO

Ionic info:
Ionic:

   Ionic CLI                     : 5.1.0 (C:\Users\Acer\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.800.6
   @angular-devkit/schematics    : 8.0.6
   @angular/cli                  : 8.0.6
   @ionic/angular-toolkit        : 2.0.0

Cordova:

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

Utility:

   cordova-res : 0.5.1
   native-run  : 0.2.6

System:

   Android SDK Tools : 26.1.1 (C:\Users\Acer\AppData\Local\Android\sdk)
   NodeJS            : v10.11.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.2
   OS                : Windows 10

would appreciate, somebody could be helpful.

BanwariLal Bamalwa
  • 439
  • 1
  • 4
  • 8

4 Answers4

24

DOCUMENT is removed from @angular/platform-browser If you use DOCUMENT from @angular/platform-browser, you should start to import this from @angular/common.

until the repo gets it fixed, you can do as below to fix it for you...

IN

\node_modules\ionic-angular\components\app\app.js

Replace

import { DOCUMENT, Title } from '@angular/platform-browser';

with

import { DOCUMENT } from '@angular/common';
import { Title } from '@angular/platform-browser';

And IN

\node_modules\ionic-angular\module.js

Replace

import { DOCUMENT, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

With

import { DOCUMENT } from '@angular/common';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
BanwariLal Bamalwa
  • 439
  • 1
  • 4
  • 8
  • This is very bad solution because you should never edit node_modules in your project. The reason why this comes is like @BanwariLal explained and you should use `@ionic/angular` instead of `@angular/platform-browser`. – Amir Aug 24 '19 at 13:12
  • 2
    Better a bad solution than no solution at all ;) – pungggi Sep 09 '19 at 06:24
  • Is there still no solution for this? Its broken for me too and I am unclear why this has not been fixed in the repo? – Gotts Oct 22 '19 at 14:36
  • 1
    still facing same issue. any solution – Malik Rizwan Nov 22 '19 at 14:24
  • @MalikRizwan have you found any solution? – Waleed Shahzaib Dec 09 '19 at 12:00
  • @WaleedShahzaib yes found the solution and now resolved – Malik Rizwan Dec 09 '19 at 12:43
  • @MalikRizwan share your solution please. – Waleed Shahzaib Dec 09 '19 at 12:45
  • in node_modules\ionic-angular\components\app\app.js i replace import { DOCUMENT, Title } from '@angular/platform-browser'; with import { DOCUMENT } from '@angular/common'; import { Title } from '@angular/platform-browser'; – Malik Rizwan Dec 09 '19 at 12:57
  • and in \node_modules\ionic-angular\module.js i replace import { DOCUMENT, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; with import { DOCUMENT } from '@angular/common'; import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; – Malik Rizwan Dec 09 '19 at 12:58
  • one thing keep in mind look the path accurately and then replace. after replacing firstly build the project then run it – Malik Rizwan Dec 09 '19 at 12:59
  • @MalikRizwan I've applied this solution, but the problem is after reinstalling node_modules, these changes will go and I'll again have to modify these two files. – Waleed Shahzaib Dec 09 '19 at 13:18
  • 2
    yes absolutly because new node-modules dont have this we have to add manually. no proper answer has been found yeh for permanent node module set – Malik Rizwan Dec 09 '19 at 13:55
5

I faced this issue while migrating to angular 8.x.x .

Actually 'DOCUMENT' has been deprecated from '@angular/platform-browser' and is now part of '@angular/common'.

Older plugins still try to import document from '@angular/platform-browser' . Just check in the .js and .js.map files under 'fesm5' as well as 'fesm2015' folder of the plugin in node_modules section.

Better to update the specific plugin to latest angular compatible version.

In my case troubling plugin was 'ngx-clipboard'.

tomerpacific
  • 4,704
  • 13
  • 34
  • 52
Awanish Singh
  • 51
  • 1
  • 1
1

It appears that you may be trying to upgrade your Ionic project from v3 to v4 inline rather than creating a new v4 project and migrating your old code over.

See the migration guide: https://ionicframework.com/docs/building/migration. Specifically this advice:

While migrating an app to take advantage of this new layout, it is suggested that a new project "base" is made with the CLI. Then, with the new project layout, migrate the features of the app piece by piece. Pages/components/etc. should be moved into the src/app/ folder.

If you are trying this by keeping your code in place and installing @ionic/angular in the current project rather than creating a NEW project and then copying code over feature by feature, then you are going to run into a lot of problems. If you are doing that, I suggest starting over employing the strategy outlined above. Having done a few of these myself, that is by far your best option.

Ken Sodemann
  • 41
  • 2
0

inside this "\node_modules\ionic-angular\module.js" && app.js file we can't change if we are changing manuvally it dosent take;

so i suggest BehaviorSubject of angular functionality we can get componet changing values in any other component

page.ts // component

import { BehaviorSubject } from 'rxjs';

public status = new BehaviorSubject('');
  currentStatus = this.status.asObservable()

; // write this code inside the export class services

changeStatus(status){
  console.log('current status from common services:',status)
  this.status.next(status); // pass value to public observable variable
  }

you can subscribe response in other componet

ALEX BABY
  • 19
  • 7