Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

After upgrading from Angular 5 to Angular 6: Current document does not have a doctype

I just upgraded my Angular 5 project to Angular 6. After the upgrade it compiles fine, but the website shows up blank. In the console I get:

Current document does not have a doctype. This may cause some Angular Material components not to behave as expected. push../node_modules/@angular/material/esm5/core.es5.js.MatCommonModule._checkDoctypeIsDefined @ core.es5.js:127 MatCommonModule @ core.es5.js:92 _createClass @ core.js:8116 createProviderInstance$1 @ core.js:8088 initNgModule @ core.js:8024 NgModuleRef @ core.js:8747 createNgModuleRef @ core.js:8736 debugCreateNgModuleRef @ core.js:10561 push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create @ core.js:11263 (anonymous) @ core.js:4161 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:3671 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3585 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory @ core.js:4159 (anonymous) @ core.js:4200 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 (anonymous) @ zone.js:872 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188 drainMicroTaskQueue @ zone.js:595 Promise.then (async)
scheduleMicroTask @ zone.js:578 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4200 ./src/main.ts @ main.ts:12 webpack_require @ bootstrap:76 0 @ main.ts:13 webpack_require @ bootstrap:76 checkDeferredModules @ bootstrap:43 webpackJsonpCallback @ bootstrap:30 (anonymous)

TypeError: Cannot read property 'appendChild' of null at MatCommonModule.push../node_modules/@angular/material/esm5/core.es5.js.MatCommonModule._checkThemeIsPresent (core.es5.js:141) at new MatCommonModule (core.es5.js:93) at _createClass (core.js:8116) at createProviderInstance$1 (core.js:8088) at initNgModule (core.js:8024) at new NgModuleRef (core.js:8747) at createNgModuleRef (core.js:8736) at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:10561) at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:11263) at core.js:4161

Is this something wrong with @angular/material, or did something not upgrade correctly in the project?

If there is anything I can add to help diagnose, let me know.

like image 665
David Hauck Avatar asked Jun 08 '18 21:06

David Hauck


1 Answers

If you want to remove this warning, just add a Doctype at the top of your general index.html file, like that:

<!doctype html>
<html lang="en">
<head>
  ...
</html>
like image 144
veben Avatar answered Oct 30 '22 18:10

veben