Components: There is no directive with "exportAs" set to "matMenu"
Bug, feature request, or proposal:
Bug
What is the expected behavior?
The code compiles without error
What is the current behavior?
This is only one place it yells about no exportAs but it is breaking on those areas
What are the steps to reproduce?
Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U
Look at the console when you try to run it
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 5.0.0-beta.4
Material 2.0.0-beta.11
Typescript 2.4.2
timwright35
All 18 comments
MatMenu is set to be exported as both matMenu and mdMenu here.
Can you provide a reproduction?
josephperrott
on 25 Sep 2017
@josephperrott That plunker in my bug report does it http://plnkr.co/edit/zmfowm7YP5qn7C2DyV3n?p=preview
timwright35
on 25 Sep 2017
The same error. https://angular-thwmja.stackblitz.io
ipassynk
on 25 Sep 2017
Seems that you need 4.4.1+ or 5.0.0-beta.6+. I am on beta.4 since anything higher at the moment broke to much code. Due to this change:
compiler: allow multiple exportAs names (#18723) (7ec28fe)
timwright35
on 25 Sep 2017
So I suggest changing the requires 4.4.3 or greater to requires 4.4.3 or 5.0.0-beta.6 or greater, closing this otherwise.
timwright35
on 25 Sep 2017
I am still facing this problem with mdAutoComplete: "There is no directive with "exportAs" set to "mdAutocomplete" "
Angular Version:
@angular/cli: 1.4.4
node: 7.7.2
os: win32 x64
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.11
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/compiler-cli: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/platform-server: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.4
typescript: 2.5.3
Material Version: 2.0.0-beta.11
I downgraded to Material Version 2.0.0-beta.10 and kept MaterialsModule in my imports and it worked. Removing MaterialsModule will cause the same problem.
Any Ideas?
nickjtch
on 1 Oct 2017
I just ran into the same issue (#7322) as @nicolasmichaeleljamal
Angular CLI Version
ng version
@angular/cli: 1.3.2
node: 6.11.2
os: win32 x64
@angular/animations: 4.4.3
@angular/cdk: 2.0.0-beta.11
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6
Package.json
"dependencies": {
"@angular/animations": "^4.4.3",
"@angular/cdk": "^2.0.0-beta.11",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/material": "^2.0.0-beta.11",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"angular-2-local-storage": "^1.0.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"intl": "^1.2.5",
"md5-file": "^3.2.3",
"rxjs": "^5.4.2",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.3.2",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.4",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
ericis
on 2 Oct 2017
Update: upgrading all of my dependencies resolved the issue:
"dependencies": {
"@angular/animations": "^4.4.4",
"@angular/cdk": "^2.0.0-beta.11",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.4.4",
"@angular/core": "^4.4.4",
"@angular/forms": "^4.4.4",
"@angular/http": "^4.2.4",
"@angular/material": "^2.0.0-beta.11",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"angular-2-local-storage": "^1.0.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"intl": "^1.2.5",
"md5-file": "^3.2.3",
"rxjs": "^5.4.3",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.18"
},
"devDependencies": {
"@angular/cli": "1.3.2",
"@angular/compiler-cli": "^4.4.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-phantomjs-launcher": "^1.0.4",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3"
}
Also if you are using version beta.11 don't forget to:
import { MdMenuModule, MdAutocompleteModule } from '@angular/material';
and add it to your @NgModule imports (applies also for unit tests)
Glogo
on 3 Oct 2017
@Glogo your suggestion worked but I also had to import _MatMenuModule_.
ghost
on 4 Oct 2017
Having a similar issue for
Can't bind to 'mdMenuTriggerFor' since it isn't a known property of 'button'.
after updating to 2.0.0-beta.11. In addition to the error above I am also getting
There is no directive with "exportAs" set to "mdMenu"
"dependencies": {
"@angular/animations": "^4.4.4",
"@angular/cdk": "^2.0.0-beta.11",
"@angular/common": "^4.4.4",
"@angular/compiler": "^4.4.4",
"@angular/core": "^4.4.4",
"@angular/forms": "^4.4.4",
"@angular/http": "^4.4.4",
"@angular/material": "^2.0.0-beta.11",
"@angular/platform-browser": "^4.4.4",
"@angular/platform-browser-dynamic": "^4.4.4",
"@angular/router": "^4.4.4",
"bootstrap": "^4.0.0-beta",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.3.2",
"@angular/compiler-cli": "^4.4.4",
"@angular/language-service": "^4.4.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
I've update Angular to 4.4.4 from @ericis suggesstion but still getting the error. I've added the appropriate module as below.
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatInputModule, MatDatepickerModule, MatNativeDateModule, MatProgressSpinnerModule,
MatTableModule, MatExpansionModule, MatSelectModule, MatSnackBarModule, MatTooltipModule, MatChipsModule, MatListModule, MatSidenavModule, MatTabsModule, MatProgressBarModule
} from '@angular/material';
Solved: My issue was I was using md- instead of mat- Even though this is outlined in the change log, the documentation page uses md -
ewaschenko
on 6 Oct 2017
Having a similar problem:
There is no directive with "exportAs" set to "matSort"
The MatSortModule is imported and added to the imports:[]. Interestingly, the sort component works, I can for instance, get the sort event :
(matSortChange)="sortData($event)"
but if I try to get a handle on the viewChild like:
matSort #sortForDataSource="matSort"
it gives the above error
chriszrc
on 19 Oct 2017
For anyone wondering, this is fixed now with the following versions:
$ ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.5.0
Node: 8.9.0
OS: linux x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.10
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.6.1
webpack: 3.8.1
meenie
on 4 Nov 2017
I am facing the same issue with angular 4.4.6 and material 2.0.0-beta.12
Any fixes?
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.5.0
Node: 7.7.1
OS: darwin x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router
... tsc-wrapped
@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.10
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.1
webpack: 3.8.1
cyberbeast
on 6 Nov 2017
Having the same issue. Same build. I don't think this is fixed yet.
ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.5.0
Node: 6.9.4
OS: darwin x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router
... tsc-wrapped
@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.3.4
webpack: 3.8.1
jakehowell
on 6 Nov 2017
Guys, I had this problem too. But the problem was simply a user error. I was importing Material into AppModule, but the component was declared by another module. Make sure you check what Module is declaring this component
MaximVer
on 20 Nov 2017
I got this errors also because of a user error. I had:
<mat-toolbar>
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="menu">
<button mat-menu-item>Tag</button>
<button mat-menu-item>Woche</button>
</mat-menu>
</mat-toolbar>
The problem:
#menu="menu"
should be
#menu="matMenu"
apparently?
silentsnooc
on 25 Aug 2019
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-automatic-lock-bot[bot] picture](https://avatars.githubusercontent.com/in/40213?v=4&s=40)
angular-automatic-lock-bot[bot]
on 25 Sep 2019
Related issues
RoxKilly
·
3Comments
constantinlucian
·
3Comments
shlomiassaf
·
3Comments
Miiekeee
·
3Comments
xtianus79
·
3Comments
Most helpful comment
Guys, I had this problem too. But the problem was simply a user error. I was importing Material into AppModule, but the component was declared by another module. Make sure you check what Module is declaring this component