Migration from Angular 6 to Angular 8 - DOCUMENT import from @angular/platform-browser

[camila-borges]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 6.1.0

Description

I was migrating my project from Angular 6.1.0 to Angular 8.0.
I thought I was importing wrong in any part of project the DOCUMENT api, but I didn't find any code like "import { DOCUMENT } from '@angular/platform-browser';" in the project (so I couldn't import it right from '@angular/common' like I've seen as a solution in many places...).

🔬 Minimal Reproduction

Only updated my Angular version from 6.1.0 to 8.0.0 (using ng update @angular/cli @angular/core)

🔥 Exception or Error

ERROR in ./src/app/features/secure/secure.module.ngfactory.js 104:4894-4906
"export 'DOCUMENT' (imported as 'i48') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/secure/secure.module.ngfactory.js 104:5033-5045
"export 'DOCUMENT' (imported as 'i48') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/updates/updates.module.ngfactory.js 108:4963-4975
"export 'DOCUMENT' (imported as 'i50') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/updates/updates.module.ngfactory.js 108:5102-5114
"export 'DOCUMENT' (imported as 'i50') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/jobs/job.module.ngfactory.js 109:5118-5130
"export 'DOCUMENT' (imported as 'i51') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/jobs/job.module.ngfactory.js 109:4979-4991
"export 'DOCUMENT' (imported as 'i51') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/accounts/account.module.ngfactory.js 112:5035-5047
"export 'DOCUMENT' (imported as 'i52') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/accounts/account.module.ngfactory.js 112:5174-5186
"export 'DOCUMENT' (imported as 'i52') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/control/control.module.ngfactory.js 115:5134-5146
"export 'DOCUMENT' (imported as 'i55') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/control/control.module.ngfactory.js 115:5273-5285
"export 'DOCUMENT' (imported as 'i55') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/devices/device.module.ngfactory.js 122:5242-5254
"export 'DOCUMENT' (imported as 'i58') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/devices/device.module.ngfactory.js 122:5381-5393
"export 'DOCUMENT' (imported as 'i58') was not found in '@angular/platform-browser'
ERROR in ./node_modules/@swimlane/ngx-datatable/release/components/header/header.component.ngfactory.js 55:107-118
"export 'DOCUMENT' (imported as 'i8') was not found in '@angular/platform-browser'

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.1
Node: 10.16.0
OS: darwin x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cdk                      6.4.7
@angular/cli                      8.0.1
@angular/flex-layout              7.0.0-beta.24
@angular/material                 6.4.7
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

[alan-agius4]

Which version of @swimlane/ngx-datatable are you using? Is it compatible with version 8?, Also I see that your @angular/material is still version 6.

You should update this using

ng update @angular/material

[camila-borges]

I tried updating @angular/material and @swimlane/ngx-datatable, here are the dependencies versions used on the project:

"dependencies": {
    "@angular/animations": "8.0.0",
    "@angular/cdk": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "8.0.0",
    "@angular/material": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@asymmetrik/ngx-leaflet": "4.0.0",
    "@fortawesome/fontawesome-free": "5.3.1",
    "@ng-select/ng-select": "2.9.1",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "3.0.1",
    "@swimlane/ngx-charts": "~10.0.0",
    "@swimlane/ngx-datatable": "~14.0.0",
    "angular-markdown-directive": "^0.3.1",
    "angular-svg-round-progressbar": "2.0.0",
    "angular6-json-schema-form": "7.0.1",
    "bootstrap": "4.1.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.7",
    "file-saver": "1.3.8",
    "leaflet": "1.4.0",
    "lodash": "4.17.11",
    "moment": "2.22.2",
    "ng-pick-datetime": "6.0.16",
    "ngx-bootstrap": "^3.0.1",
    "ngx-markdown": "^7.1.4",
    "ngx-papaparse": "3.0.1",
    "ngx-toastr": "9.1.1",
    "rxjs": "~6.4.0",
    "rxjs-compat": "6.3.2",
    "tslib": "^1.9.0",
    "url-parse": "^1.4.4",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.1",
    "@angular/compiler-cli": "8.0.0",
    "@angular/language-service": "8.0.0",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "^1.4.0",
    "@types/lodash": "^4.14.117",
    "@types/node": "8.9.4",
    "@types/url-parse": "^1.4.3",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.3",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "~1.4.2",
    "node-sass": "^4.12.0",
    "protractor": "5.4.0",
    "shelljs": "0.8.2",
    "sonar-scanner": "3.1.0",
    "system-sleep": "1.3.6",
    "ts-node": "7.0.0",
    "tslint": "5.11.0",
    "typescript": "~3.4.3",
    "webpack-bundle-analyzer": "^3.0.4"
  }

It keeps bringing me these errors:

ERROR in ./src/app/features/secure/secure.module.ngfactory.js 104:4913-4925
"export 'DOCUMENT' (imported as 'i48') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/secure/secure.module.ngfactory.js 104:5052-5064
"export 'DOCUMENT' (imported as 'i48') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/updates/updates.module.ngfactory.js 108:4982-4994
"export 'DOCUMENT' (imported as 'i50') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/updates/updates.module.ngfactory.js 108:5121-5133
"export 'DOCUMENT' (imported as 'i50') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/jobs/job.module.ngfactory.js 109:5137-5149
"export 'DOCUMENT' (imported as 'i51') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/jobs/job.module.ngfactory.js 109:4998-5010
"export 'DOCUMENT' (imported as 'i51') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/accounts/account.module.ngfactory.js 112:5054-5066
"export 'DOCUMENT' (imported as 'i52') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/accounts/account.module.ngfactory.js 112:5193-5205
"export 'DOCUMENT' (imported as 'i52') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/control/control.module.ngfactory.js 115:5153-5165
"export 'DOCUMENT' (imported as 'i55') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/control/control.module.ngfactory.js 115:5292-5304
"export 'DOCUMENT' (imported as 'i55') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/devices/device.module.ngfactory.js 122:5261-5273
"export 'DOCUMENT' (imported as 'i58') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/devices/device.module.ngfactory.js 122:5400-5412
"export 'DOCUMENT' (imported as 'i58') was not found in '@angular/platform-browser'
ERROR in ./node_modules/@swimlane/ngx-datatable/release/components/header/header.component.ngfactory.js 55:107-118
"export 'DOCUMENT' (imported as 'i8') was not found in '@angular/platform-browser'

[santoshyadavdev]

Hi @camila-borges ,

DOCUMENT was deprecated from '@angular/platform-browser' you should start importing from @angular/common.

let me know if it works.

[trotyl]

@santoshyadav198613

The OP has stated it clearly he/she doesn't have any import of DOCUMENT from platform-browser:

I thought I was importing wrong in any part of project the DOCUMENT api, but I didn't find any code like "import { DOCUMENT } from '@angular/platform-browser';" in the project (so I couldn't import it right from '@angular/common' like I've seen as a solution in many places...).

Please consider really reading the issues before making some conclusion. (I thought I should be the last person for clarifying this)

And in the log it's clear the errors are coming from ngfactory, not user files. This is because of the directive inline mechanism in view engine AOT implementation.

@camila-borges

The fix of DOCUMENT import in @swimlane/ngx-datatable was only landed in 15.0.0 version, but in your configuration ~14.0.0 it won't get that major version upgrade, you need to manually specify the version in upgrading like npm install @swimlane/ngx-datatable@latest.

[santoshyadavdev]

Hey @trotyl ,
Sorry missed reading that part, I will be careful in future. @camila-borges please follow suggestion from @trotyl

[camila-borges]

@trotyl thank you for the answer. It resolved some errors but it still happening :(

I've upgraded @swimlane/ngx-datatable (now at version 15.0.0) and @swimlane/ngx-charts (now at version 11.1.0) to test if it would resolve all errors, here are the errors that still happening:

ERROR in ./src/app/features/secure/secure.module.ngfactory.js 104:4913-4925
"export 'DOCUMENT' (imported as 'i48') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/updates/updates.module.ngfactory.js 108:4982-4994
"export 'DOCUMENT' (imported as 'i50') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/jobs/job.module.ngfactory.js 109:4998-5010
"export 'DOCUMENT' (imported as 'i51') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/accounts/account.module.ngfactory.js 112:5054-5066
"export 'DOCUMENT' (imported as 'i52') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/control/control.module.ngfactory.js 115:5153-5165
"export 'DOCUMENT' (imported as 'i55') was not found in '@angular/platform-browser'
ERROR in ./src/app/features/devices/device.module.ngfactory.js 122:5261-5273
"export 'DOCUMENT' (imported as 'i58') was not found in '@angular/platform-browser'

[vecernik]

experiencing similar error with covalent-core:
ERROR in ./node_modules/@covalent/core/fesm2015/covalent-core.js 3821:79-87
"export 'DOCUMENT' was not found in '@angular/platform-browser'

[trotyl]

@camila-borges If you believe it’s an Angular issue, then you need to provide a minimal reproduction, or you can just search your workspace (including node_modules) to see who did that.

[mhevery]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[mvlad7402]

Hi @camila-borges ,

DOCUMENT was deprecated from '@angular/platform-browser' you should start importing from @angular/common.

let me know if it works.

Looks good in Angular 8.1.1

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}