Warning when building CLI app in prod mode for mat-menu

after the update from angular material 5 to 6 when i try to build with "--prod" flag i give different warning such:

"export 'MAT_FORM_FIELD_DEFAULT_OPTIONS' (imported as 'i9') was not found in '@angular/material/form-field'

WARNING in ./node_modules/@angular/material/tabs/typings/index.ngfactory.js 153:374-400 "export '_MAT_INK_BAR_POSITIONER' (imported as 'i1') was not found in '@angular/material/tabs'

WARNING in ./src/app/app.module.ngfactory.js 90:13675-13704 "export 'MAT_CHIPS_DEFAULT_OPTIONS' (imported as 'i61') was not found in '@angular/material/chips'

this make the page broken on the browser and not load at all, with: ERROR Error: StaticInjectorError[t -> t]: StaticInjectorError(Platform: core)[t -> t]: NullInjectorError: No provider for t!

if i switch back to older version of Angular Material seems all work fine.

PACKAGE.json

{
  "name": "iptvWeb",
  "version": "0.0.6",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.0.0",
    "@angular/cdk": "^6.0.1",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/flex-layout": "github:angular/flex-layout-builds",
    "@angular/forms": "6.0.0",
    "@angular/http": "6.0.0",
    "@angular/material": "^6.0.1",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.1.2",
    "@ngx-progressbar/core": "^4.3.0",
    "@ngx-progressbar/http": "^4.3.0",
    "@webcomponents/custom-elements": "^1.1.0",
    "ag-grid": "^17.1.1",
    "ag-grid-angular": "^17.1.0",
    "angular-font-awesome": "^3.1.2",
    "angular-in-memory-web-api": "^0.5.4",
    "angular2-virtual-scroll": "^0.3.2",
    "angularfire2": "^5.0.0-rc.5-next",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.6",
    "crypto-js": "^3.1.9-1",
    "dashjs": "^2.6.8",
    "firebase": "^4.13.1",
    "flex-layout-srcs": "5.0.0-beta.14",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "hls.js": "^0.8.9",
    "ng-sidebar": "^7.1.0",
    "ngx-flickity": "0.0.9",
    "ngx-infinite-scroll": "^0.8.4",
    "ngx-scrollbar": "^1.5.7",
    "promise-polyfill": "7.1.0",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "videogular2": "^6.1.1",
    "xml2js": "^0.4.19",
    "xmltv": "^0.3.0",
    "xmltv-parser": "^1.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^6.0.0",
    "@angular/compiler-cli": "6.0.0",
    "@angular/language-service": "6.0.0",
    "@types/core-js": "^0.9.46",
    "@types/crypto-js": "^3.1.39",
    "@types/jasmine": "^2.8.7",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^6.0.109",
    "codelyzer": "^4.3.0",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "2.7.2"
  }
}

@isnob46 can you share the code related to the error? Just the version info isn't quite enough to know anything

yes,you're right sorry; This is the error in the browser: ERROR Error: StaticInjectorError[t -> t]: StaticInjectorError(Platform: core)[t -> t]: NullInjectorError: No provider for t! at t.get (main.3e537e1f7c27752f3601.js:1) at main.3e537e1f7c27752f3601.js:1 at t (main.3e537e1f7c27752f3601.js:1) at t.get (main.3e537e1f7c27752f3601.js:1) at main.3e537e1f7c27752f3601.js:1 at t (main.3e537e1f7c27752f3601.js:1) at t.get (main.3e537e1f7c27752f3601.js:1) at ko (main.3e537e1f7c27752f3601.js:1) at t.get (main.3e537e1f7c27752f3601.js:1) at ba (main.3e537e1f7c27752f3601.js:1) Wt @ main.3e537e1f7c27752f3601.js:1 t.handleError @ main.3e537e1f7c27752f3601.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 e.invoke @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.run @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.runOutsideAngular @ main.3e537e1f7c27752f3601.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 e.invoke @ polyfills.4c3d40fcda2fd7f4e37a.js:1 onInvoke @ main.3e537e1f7c27752f3601.js:1 e.invoke @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.run @ polyfills.4c3d40fcda2fd7f4e37a.js:1 (anonymous) @ polyfills.4c3d40fcda2fd7f4e37a.js:1 e.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 onInvokeTask @ main.3e537e1f7c27752f3601.js:1 e.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.runTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 d @ polyfills.4c3d40fcda2fd7f4e37a.js:1 Promise.then (async) v @ polyfills.4c3d40fcda2fd7f4e37a.js:1 e.scheduleTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 onScheduleTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 e.scheduleTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.scheduleTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.scheduleMicroTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 z @ polyfills.4c3d40fcda2fd7f4e37a.js:1 e.then @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.appInitializer @ main.3e537e1f7c27752f3601.js:1 t.runInitializers @ main.3e537e1f7c27752f3601.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 e.invoke @ polyfills.4c3d40fcda2fd7f4e37a.js:1 onInvoke @ main.3e537e1f7c27752f3601.js:1 e.invoke @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.run @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.run @ main.3e537e1f7c27752f3601.js:1 t.bootstrapModuleFactory @ main.3e537e1f7c27752f3601.js:1 zUnb @ main.3e537e1f7c27752f3601.js:1 p @ runtime.6afe30102d8fe7337431.js:1 9 @ main.3e537e1f7c27752f3601.js:1 p @ runtime.6afe30102d8fe7337431.js:1 n @ runtime.6afe30102d8fe7337431.js:1 e @ runtime.6afe30102d8fe7337431.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 main.3e537e1f7c27752f3601.js:1 Error: StaticInjectorError[t -> t]: StaticInjectorError(Platform: core)[t -> t]: NullInjectorError: No provider for t! at t.get (main.3e537e1f7c27752f3601.js:1) at main.3e537e1f7c27752f3601.js:1 at t (main.3e537e1f7c27752f3601.js:1) at t.get (main.3e537e1f7c27752f3601.js:1) at main.3e537e1f7c27752f3601.js:1 at t (main.3e537e1f7c27752f3601.js:1) at t.get (main.3e537e1f7c27752f3601.js:1) at ko (main.3e537e1f7c27752f3601.js:1) at t.get (main.3e537e1f7c27752f3601.js:1) at ba (main.3e537e1f7c27752f3601.js:1) main.3e537e1f7c27752f3601.js:1 [WDS] Warnings while compiling. warnings @ main.3e537e1f7c27752f3601.js:1 o.onmessage @ main.3e537e1f7c27752f3601.js:1 r.dispatchEvent @ main.3e537e1f7c27752f3601.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 C._transportMessage @ main.3e537e1f7c27752f3601.js:1 o.emit @ main.3e537e1f7c27752f3601.js:1 ws.onmessage @ main.3e537e1f7c27752f3601.js:1 S @ polyfills.4c3d40fcda2fd7f4e37a.js:1 e.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.runTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 _ @ polyfills.4c3d40fcda2fd7f4e37a.js:1 m @ polyfills.4c3d40fcda2fd7f4e37a.js:1 main.3e537e1f7c27752f3601.js:1 ./node_modules/@angular/material/form-field/typings/index.ngfactory.js 42:1040-1073 "export 'MAT_FORM_FIELD_DEFAULT_OPTIONS' (imported as 'i1') was not found in '@angular/material/form-field' warnings @ main.3e537e1f7c27752f3601.js:1 o.onmessage @ main.3e537e1f7c27752f3601.js:1 r.dispatchEvent @ main.3e537e1f7c27752f3601.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 C._transportMessage @ main.3e537e1f7c27752f3601.js:1 o.emit @ main.3e537e1f7c27752f3601.js:1 ws.onmessage @ main.3e537e1f7c27752f3601.js:1 S @ polyfills.4c3d40fcda2fd7f4e37a.js:1 e.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.runTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 _ @ polyfills.4c3d40fcda2fd7f4e37a.js:1 m @ polyfills.4c3d40fcda2fd7f4e37a.js:1 main.3e537e1f7c27752f3601.js:1 ./src/app/search/search.component.ngfactory.js 53:1028-1061 "export 'MAT_FORM_FIELD_DEFAULT_OPTIONS' (imported as 'i5') was not found in '@angular/material/form-field' warnings @ main.3e537e1f7c27752f3601.js:1 o.onmessage @ main.3e537e1f7c27752f3601.js:1 r.dispatchEvent @ main.3e537e1f7c27752f3601.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 C._transportMessage @ main.3e537e1f7c27752f3601.js:1 o.emit @ main.3e537e1f7c27752f3601.js:1 ws.onmessage @ main.3e537e1f7c27752f3601.js:1 S @ polyfills.4c3d40fcda2fd7f4e37a.js:1 e.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.runTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 _ @ polyfills.4c3d40fcda2fd7f4e37a.js:1 m @ polyfills.4c3d40fcda2fd7f4e37a.js:1 main.3e537e1f7c27752f3601.js:1 ./src/app/playlist/playlist.component.ngfactory.js 57:214-247 "export 'MAT_FORM_FIELD_DEFAULT_OPTIONS' (imported as 'i9') was not found in '@angular/material/form-field' warnings @ main.3e537e1f7c27752f3601.js:1 o.onmessage @ main.3e537e1f7c27752f3601.js:1 r.dispatchEvent @ main.3e537e1f7c27752f3601.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 C._transportMessage @ main.3e537e1f7c27752f3601.js:1 o.emit @ main.3e537e1f7c27752f3601.js:1 ws.onmessage @ main.3e537e1f7c27752f3601.js:1 S @ polyfills.4c3d40fcda2fd7f4e37a.js:1 e.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.runTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 _ @ polyfills.4c3d40fcda2fd7f4e37a.js:1 m @ polyfills.4c3d40fcda2fd7f4e37a.js:1 main.3e537e1f7c27752f3601.js:1 ./src/app/app.module.ngfactory.js 92:13807-13836 "export 'MAT_CHIPS_DEFAULT_OPTIONS' (imported as 'i61') was not found in '@angular/material/chips' warnings @ main.3e537e1f7c27752f3601.js:1 o.onmessage @ main.3e537e1f7c27752f3601.js:1 r.dispatchEvent @ main.3e537e1f7c27752f3601.js:1 (anonymous) @ main.3e537e1f7c27752f3601.js:1 C._transportMessage @ main.3e537e1f7c27752f3601.js:1 o.emit @ main.3e537e1f7c27752f3601.js:1 ws.onmessage @ main.3e537e1f7c27752f3601.js:1 S @ polyfills.4c3d40fcda2fd7f4e37a.js:1 e.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.runTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 t.invokeTask @ polyfills.4c3d40fcda2fd7f4e37a.js:1 _ @ polyfills.4c3d40fcda2fd7f4e37a.js:1 m @ polyfills.4c3d40fcda2fd7f4e37a.js:1

and my search component look like: ` <input matInput #searchBox type="text"

     placeholder="search"
     (keyup)="search(searchBox.value)"

     [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let channel of channels$ | async" [value]="channel.name" (click)="play(channel)">
        {{ channel.name }}
    </mat-option>
</mat-autocomplete>
 <fa matSuffix name="fas fa-search fa-fw"></fa>

Just like to report that I have encountered similar warnings too when migrating to 6.0. In my case, it happened in @angular/material/menu. WARNING in ./node_modules/@angular/material/menu/typings/index.ngfactory.js 48:191-198 "export '??e24' (imported as 'i1') was not found in '@angular/material/menu' Some observations:

It seems it only happens in production build. When I running the development live server, I do not see this warning.
It's a warning not error in my case. And the application seems running okay despite the warnings.
I suspect it is introduce in 6.0.1. I do not see this warning when I build it in 6.0.0

Hope it helps the investigation:

Turns out I get these same warnings on material.angular.io, but they don't seem to actually affect anything. I have a suspicion about the cause being related to a collision with the ɵ renamings but it need some investigations.

I have the same issue: ../node_modules/@angular/material/menu/typings/index.ngfactory.js 50:191-198 "export 'ɵe24' (imported as 'i1') was not found in '@angular/material/menu'

It appeared initially with 6.0.0 and still present in 6.02.

---- UPDATE ---- Unlike @okeydoky , I have errors during runtime when I'm clicking on a mat-select: ERROR TypeError: this._document.createElement is not a function at t._createHostElement (main.4ff054835109d3c52eb8.js:1) at t.create (main.4ff054835109d3c52eb8.js:1) at t._createOverlay (main.4ff054835109d3c52eb8.js:1) at t._attachOverlay (main.4ff054835109d3c52eb8.js:1) at t.ngOnChanges (main.4ff054835109d3c52eb8.js:1) at main.4ff054835109d3c52eb8.js:1 at main.4ff054835109d3c52eb8.js:1 at Xi (main.4ff054835109d3c52eb8.js:1) at Co (main.4ff054835109d3c52eb8.js:1) at Object.updateDirectives (0.ee592ce57352c581c70a.js:1)

--- UPDATE 2 --- The workaround is to disable build-optimizer during build.

same issue here and I still got error when disable build-optimizer

After a few tries, here is the version that eliminate the warnings. Hope it helps!

Angular CLI: 6.0.3
Node: 10.0.0
OS: linux x64
Angular: 6.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, material, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@angular/flex-layout              6.0.0-beta.15
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

The version that changes from the previous are webpack (4.60 -> 4.83) and angular-devkit (0.6.1 -> 0.6.3)

I can confirm that the latest cli/devkit resolve this for the material.angular.io project

I'm still getting this error, even after updating @angular-devkit/build-angular to latest ~0.6.8.

Error:

TypeError: this._document.createElement is not a function
    at e._createHostElement (main.3e28d49b89aaf1cd3ac4.js:1)
    at e.create (main.3e28d49b89aaf1cd3ac4.js:1)
    at e._createOverlay (main.3e28d49b89aaf1cd3ac4.js:1)
    at e.open (main.3e28d49b89aaf1cd3ac4.js:1)
    at l.addNewFront (11.d08cc6f4a24b087ef19b.js:1)
    at Object.handleEvent (11.d08cc6f4a24b087ef19b.js:1)
    at Object.handleEvent (main.3e28d49b89aaf1cd3ac4.js:1)
    at Object.handleEvent (main.3e28d49b89aaf1cd3ac4.js:1)
    at to (main.3e28d49b89aaf1cd3ac4.js:1)
    at main.3e28d49b89aaf1cd3ac4.js:1

Package.json:

{
  "name": "app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "ngsw-config": "node_modules/.bin/ngsw-config dist src/ngsw-config.json",
    "ngsw-copy": "cp node_modules/@angular/service-worker/ngsw-worker.js dist/",
    "build-prod-ngsw": "ng build --prod && npm run ngsw-config && npm run ngsw-copy",
    "serve-prod-ngsw": "npm run build-prod-ngsw && http-server dist --port 8080"
  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "7.1.1",
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "6.3.1",
    "@angular/common": "6.0.3",
    "@angular/compiler": "6.0.3",
    "@angular/core": "6.0.3",
    "@angular/forms": "6.0.3",
    "@angular/http": "6.0.3",
    "@angular/material": "6.3.1",
    "@angular/platform-browser": "6.0.3",
    "@angular/platform-browser-dynamic": "6.0.3",
    "@angular/router": "6.0.3",
    "@angular/service-worker": "6.0.3",
    "angular-calendar": "0.23.7",
    "core-js": "2.5.4",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "js-base64": "^2.4.5",
    "moment": "2.18.0",
    "net": "^1.0.2",
    "ng-pick-datetime": "^5.2.6",
    "ng2-pdf-viewer": "^3.0.6",
    "ng2-stomp-service": "^1.2.2",
    "ng4-intl-phone": "^1.2.1",
    "ngx-carousel": "^1.3.3",
    "ngx-quill": "^2.2.0",
    "node-sass": "^4.9.1",
    "npm": "^6.1.0",
    "redux": "^3.7.2",
    "rxjs": "6.2.1",
    "sass-loader": "^6.0.7",
    "sockjs-client": "^1.1.5",
    "stompjs": "^2.3.3",
    "videogular2": "^6.2.2",
    "xlsx": "^0.11.19",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "6.0.8",
    "@angular/compiler-cli": "6.0.3",
    "@angular/language-service": "6.0.3",
    "@types/core-js": "^0.9.46",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "@types/stompjs": "^2.3.3",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "~0.2.2",
    "ol": "^4.6.5",
    "protractor": "~5.3.0",
    "rxjs-compat": "6.2.1",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

Same here:

ERROR TypeError: this._document.createElement is not a function
    at t._createHostElement (overlay.es5.js.pre-build-optimizer.js:3446)
    at t.create (overlay.es5.js.pre-build-optimizer.js:3393)
    at t._createOverlay (dialog.es5.js.pre-build-optimizer.js:781)
    at t.open (dialog.es5.js.pre-build-optimizer.js:719)
    at l.cancelDispatch (cancel-dispatch.component.ts:25)
    at Object.handleEvent (cancel-dispatch.component.ngfactory.js.pre-build-optimizer.js:23)
    at Object.handleEvent (core.js.pre-build-optimizer.js:10050)
    at Object.handleEvent (core.js.pre-build-optimizer.js:10595)
    at Hi (core.js.pre-build-optimizer.js:7509)
    at core.js.pre-build-optimizer.js:7953

{
  "name": "my-proj",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-prod": "ng build --prod --source-map",
    "watch": "ng build --watch",
    "clean": "RMDIR wwwroot /S /Q",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.7",
    "@angular/cdk": "^6.3.2",
    "@angular/common": "^6.0.7",
    "@angular/compiler": "^6.0.7",
    "@angular/core": "^6.0.7",
    "@angular/forms": "^6.0.7",
    "@angular/http": "^6.0.7",
    "@angular/material": "^6.3.2",
    "@angular/platform-browser": "^6.0.7",
    "@angular/platform-browser-dynamic": "^6.0.7",
    "@angular/router": "^6.0.7",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@nicky-lenaers/ngx-scroll-to": "^1.0.0",
    "amazing-time-picker": "^1.5.3",
    "angular-in-memory-web-api": "^0.6.0",
    "angular2-text-mask": "^9.0.0",
    "bootstrap": "^4.1.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "intl": "^1.2.5",
    "ng-pick-datetime": "^5.1.5",
    "ngx-loading": "^1.0.14",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.3",
    "@angular/compiler-cli": "^6.0.7",
    "@angular/language-service": "^6.0.7",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-junit-reporter": "^1.2.0",
    "node-sass": "^4.9.0",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }

On a production deployment today I came across the same problem and I think the main cause is angular/material 6.3.x.

Using 6.3.3 I got only warnings like

WARNING in ./src/app/app.module.ngfactory.js
88:5377-5412 "export 'MAT_MOMENT_DATE_ADAPTER_OPTIONS' (imported as 'i30') was not found in '@angular/material-moment-adapter'

Using 6.3.2 I got the warnings from 6.3.3 and warnings like

WARNING in ./src/app/main/toolbar/toolbar.component.ngfactory.js
146:855-863 "export 'ɵf23' (imported as 'i14') was not found in '@angular/material/menu'

First I though they are just warnings but they prevented my application from loading, presenting the StaticInjectorError described in this issue.

I then reverted to 6.2.1 and all warnings are gone and my angular app loads without errors.

My working dependencies are:

 "dependencies": {
    "@angular/animations": "6.0.9",
    "@angular/cdk": "6.2.1",
    "@angular/common": "6.0.9",
    "@angular/compiler": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/flex-layout": "6.0.0-beta.16",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/material": "6.2.1",
    "@angular/material-moment-adapter": "6.2.1",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/pwa": "0.6.8",
    "@angular/router": "6.0.9",
    "@angular/service-worker": "6.0.9",
    "@ionic/storage": "2.1.3",
    "@ngx-loading-bar/http-client": "2.1.1",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "3.0.1",
    "angularx-social-login": "1.2.0",
    "blob-polyfill": "3.0.20180112",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.7",
    "cropperjs": "1.4.0",
    "file-saver": "1.3.8",
    "hammerjs": "2.0.8",
    "lodash-es": "4.17.10",
    "moment": "2.22.2",
    "moment-timezone": "0.5.21",
    "ng2-dragula": "1.5.0",
    "quill": "1.3.6",
    "quill-image-resize-module": "3.0.0",
    "rxjs": "6.2.1",
    "split.js": "1.3.5",
    "ts-md5": "1.2.4",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.8",
    "@angular/compiler-cli": "6.0.9",
    "@angular/language-service": "6.0.9",
    "@types/file-saver": "1.3.0",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/lodash-es": "4.17.0",
    "@types/node": "10.5.2",
    "@types/quill": "0.0.31",
    "@types/split.js": "1.3.1",
    "codelyzer": "4.4.2",
    "jasmine-core": "3.1.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "2.0.4",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "2.0.1",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "1.2.0",
    "protractor": "5.3.2",
    "ts-node": "6.1.1",
    "tslint": "5.10.0",
    "typescript": "2.7.2",
    "webpack-bundle-analyzer": "2.13.1",
    "@angular-devkit/build-angular": "0.6.8"
  }

I experienced the same with 6.3.3 which caused elements that use the material menu to disappear and generate script errors written to the console: "@angular/cdk": "^6.3.3", "@angular/material": "^6.3.3",

but forcing install of 6.3.2 resolves the issue: "@angular/cdk": "6.3.2", "@angular/material": "6.3.2",

From my own testing, things seems to works fine up to version 6.3.1 of @angular/material. If build-optimizer is enabled, things start to break in 6.3.2, then more breaks in 6.3.3. Tested with @angular-devkit 0.6.8 and webpack 4.8.3.

6.3.2 breaks the Moment date adapter Building gives a warning:

WARNING in ./src/app/app.module.ngfactory.js
156:4731-4766 "export 'MAT_MOMENT_DATE_ADAPTER_OPTIONS' (imported as 'i41') was not found in '@angular/material-moment-adapter'

With Chrome giving the error:

ERROR TypeError: Cannot read property 'ngInjectableDef' of undefined

6.3.3 additionally breaks menus: Build warning:

WARNING in ./src/app/app.module.ngfactory.js
156:4629-4637 "export 'ɵd23' (imported as 'i40') was not found in '@angular/material/menu'

Chrome error:

ERROR TypeError: _angular_core__WEBPACK_IMPORTED_MODULE_0__.ɵnov(...)._getAriaLabel is not a function

UPDATE: This seems to have been a regression in angular-devkit somewhere between 0.6.3 and 0.6.8 that has since been fixed. Latest angular/material works fine for me after updating devkit to 0.7.1

@cusher Yes, moving to the 0.7.1 has fixed it also here. Frustrating. Thanks for the input.

updating @angular-devkit/build-angular not worked for me, here is my package.json `{ "name": "mr", "version": "2.1.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build",

}, "private": true, "dependencies": { "@agm/core": "1.0.0-beta.2", "@angular/animations": "6.1.3", "@angular/cdk": "6.4.6", "@angular/common": "6.1.3", "@angular/compiler": "6.1.3", "@angular/core": "6.1.3", "@angular/forms": "6.1.3", "@angular/http": "6.1.3", "@angular/material": "6.4.6", "@angular/material-moment-adapter": "^6.4.7", "@angular/platform-browser": "6.1.3", "@angular/platform-browser-dynamic": "6.1.3", "@angular/platform-server": "6.1.4", "@angular/router": "6.1.3", "@auth0/angular-jwt": "^2.0.0", "ajv": "6.4.0", "arrive": "2.4.1", "bootstrap": "4.1.0", "bootstrap-material-design": "4.1.1", "bootstrap-notify": "3.1.3", "chartist": "0.11.0", "classlist.js": "1.1.20150312", "core-js": "2.5.5", "googleapis": "28.1.0", "hammerjs": "2.0.8", "jquery": "3.2.1", "moment": "^2.22.2", "ng-pick-datetime": "^5.2.6", "ngx-bootstrap": "^3.0.1", "perfect-scrollbar": "1.1.0", "popper.js": "1.14.3", "rxjs": "6.2.2", "rxjs-compat": "6.2.2", "web-animations-js": "2.3.1", "zone.js": "0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "0.7.1", "@angular/cli": "^6.1.4", "@angular/compiler-cli": "6.1.4", "@angular/language-service": "6.1.4", "@types/bootstrap": "3.3.32", "@types/chartist": "0.9.34", "@types/googlemaps": "^3.30.8", "@types/jasmine": "2.5.38", "@types/jquery": "1.10.31", "@types/node": "^6.0.73", "codelyzer": "4.2.1", "jasmine-core": "3.1.0", "jasmine-spec-reporter": "4.2.1", "karma": "2.0.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "1.4.2", "karma-jasmine": "1.1.1", "protractor": "^5.4.0", "ts-node": "5.0.1", "tslint": "5.9.1", "typescript": "2.9.2" } } ` and the error am getting is given below

main.dbeb1735f9287d0af752.js:1 ERROR TypeError: this._document.createElement is not a function at t._createHostElement (main.dbeb1735f9287d0af752.js:1) at t.create (main.dbeb1735f9287d0af752.js:1) at t._attachOverlay (main.dbeb1735f9287d0af752.js:1) at t._handleFocus (main.dbeb1735f9287d0af752.js:1) at Object.handleEvent (0.6098c61070f0a4810ed2.js:1) at Object.handleEvent (main.dbeb1735f9287d0af752.js:1) at Object.handleEvent (main.dbeb1735f9287d0af752.js:1) at cr (main.dbeb1735f9287d0af752.js:1) at main.dbeb1735f9287d0af752.js:1 at HTMLInputElement. (main.dbeb1735f9287d0af752.js:1)

This appears only after building the angular 6 app with AOT(--PROD) and when clicking on mat-autocomplete element, this works fine with ng serve

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.}

angular / components

Warning when building CLI app in prod mode for mat-menu #11259

PACKAGE.json