does not have any exported directive named 'MD_XXX_DIRECTIVES'

I am currently learning Angular2 and I have decided to incorporate angular material into my project. However, I am encountering the following errors:

"has no exported member MD_XXX_DIRECTIVES" errors (e.g: MD_SIDENAV_DIRECTIVES,MD_LIST_DIRECTIVES).

Here are the dependencies listed in my package.json:

"dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "@angular2-material/button": "^2.0.0-alpha.5-2",
    "@angular2-material/card": "^2.0.0-alpha.5-2",
    "@angular2-material/checkbox": "^2.0.0-alpha.5-2",
    "@angular2-material/core": "^2.0.0-alpha.8-2",
    "@angular2-material/grid-list": "^2.0.0-alpha.6",
    "@angular2-material/icon": "^2.0.0-alpha.5-2",
    "@angular2-material/input": "^2.0.0-alpha.5-2",
    "@angular2-material/list": "^2.0.0-alpha.5-2",
    "@angular2-material/progress-circle": "^2.0.0-alpha.6",
    "@angular2-material/radio": "^2.0.0-alpha.5-2",
    "@angular2-material/sidenav": "^2.0.0-alpha.5-2",
    "@angular2-material/toolbar": "^2.0.0-alpha.5-2"}

I appreciate any assistance or guidance you can provide. Thank you.

angulartypescriptangular-material

Answer №1

By utilizing the ^ symbol in the npm package version, it enabled npm to automatically install the most recent version available. However, the latest versions have made a switch from exporting a Directive to a Module. After making this change and uninstalling all packages, specifically installing version 2.0.0-alpha.5-2 allowed for the use of the Directive once again.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

showing javascript strings on separate lines

I need assistance with displaying an array value in a frontend Angular application. How can I insert spaces between strings and show them on two separate lines? x: any = [] x[{info: "test" + ',' + "tested"}] // Instead of showing test , teste ...

javascripttypescript

Navigating through JSON in Angular

I am facing an issue with looping through my JSON data to extract the data output. While I can successfully loop through {GET_PUT_AWAY_Inspection_F:{.....}}, attempting (this.myData.GET_PUT_AWAY_Inspection.data) results in an error stating it is undefined. ...

jsonangular

How to use attributes in Angular 2 when initializing a class constructor

Is there a way to transfer attributes from a parent component to the constructor of their child components in Angular 2? The process is halfway solved, with attributes being successfully passed to the view. /client/app.ts import {Component, View, bootst ...

typescriptangular

Instantiate a fresh object using the new keyword followed by the Class constructor, and if desired,

I'm looking for a class that I can easily create new instances from and optionally assign properties using the constructor. For instance: class Person { name: string; age: number; constructor(props: {name?: string, age?: number}) { this.nam ...

typescriptclassconstructor

nginx setup for hosting Angular app on subdomain successfully implemented

I have an Angular application that I deployed on a server. It currently works with the following URL: However, I need it to also work when accessed through a sub-domain: server { listen 80 default_server; listen [::]:80 default_server; roo ...

angularnginxnginx-config

Converting TypeScript to ES5 in Angular 2: A Comprehensive Guide

I am currently diving into Angular 2 and delving into Typescript to create simple applications within the Angular 2 framework. What I have discovered is that with Typescript, we can utilize classes, interfaces, modules, and more to enhance our application ...

javascriptangulartypescript

export keyword in TypeScript disassociates the interface implementation from a class

Currently, I am facing an issue with my files. I have a .ts file that contains a class declaration, and a .d.ts file that contains an interface declaration. An example from the .ts file: class A { constructor() { this.name = "Jo"; } } A ...

typescriptclassinterfaceexport

AgGrid:CellRenderer and Observables

Having trouble getting my backend data to display in the AGGrid cell renderer component despite using observables Here are the methods I've attempted so far: Directly calling the service within the cellRenderer component Invoking the service in the ...

angularobservableag-gridag-grid-angular

Revitalizing ngFor in Angular 9: Refreshing object properties for re-rendering

I am currently working with an array of objects named Guests: [ {id: 1, first_name: "Tom", last_name: "", logo: 2}, {id: 2, first_name: "John", last_name: "", logo: 3}, {id: 3, first_name: "Jim", l ...

angular

Button to expand or collapse all sections in Ant Design Collapse component

Is there a way to create a button that can expand or collapse all tabs in an ant.design Collapse component? I attempted to modify defaultActiveKey but it seems like this can only be done during page rendering. If possible, could someone share a code snip ...

reactjstypescriptreact-hooksantd

Ways to dynamically generate a generic that expands a union class type

Reviewing the code snippet: const events = { a: ['event1' as const, 'event2' as const], b: ['event3' as const, 'event4' as const], }; class SomeClass< T extends AnotherClass<typeof events[keyof typeof ev ...

typescripttypescript-generics

Bundling JSPM with an external system JS file

Currently, I am loading my Angular2 file as a System js module from a CDN. Within my project, I have multiple files importing various System js modules of Angular2. However, I am now looking to bundle my local JavaScript files using JSPM. But when I ente ...

javascriptnode.jsangularjspm

Organizing files in an ExpressJs project with Angular2

What is the conventional file structure for a mix of ExpressJs and Angular2 projects? Here's my current setup: Project | |--bin |--node_modules |--public |--images |--javascripts |--stylesheets |--routes |--views |--app.js |-- ...

node.jsexpressangular

The element 'mat-form-field' is unrecognized: 1. Confirm if 'mat-form-field' is an Angular component and ensure it is included in this module

I've been struggling to configure Angular material components in my project. Whenever I try to use mat-input, I encounter errors even after importing all the necessary dependencies. Here is a snippet of the code within my component: <form class="e ...

angularangular-material

The server has access to an environment variable that is not available on the client, despite being properly prefixed

In my project, I have a file named .env.local that contains three variables: NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=pk_test_<get-your-own> MAGIC_SECRET_KEY=sk_test_<get-your-own> TOKEN_SECRET=some-secret These variables are printed out in the file ...

typescriptenvironment-variablesnext.js

Modify the value of mat-slide-toggle from TypeScript code

This is the HTML code I have for a mat-slide-toggle element, with a toggleStatus() function: <span class="form-control form-control-plaintext"> <mat-slide-toggle name="status" checked="" ...

angulartypescriptangular-materialangular-material2

What is the process for initializing the default/prefilled value of an input element within a mat-form-field when the page loads?

I'm looking to create an HTML element where the default data (stored in the variable 'preselectedValue') is automatically filled into the input field when the component loads. The user should then be able to directly edit this search string. ...

htmlangulartypescriptangular-material

What is the method to assert that two arguments are equal within a function?

When working with TypeScript, you can pass a value to a function and have that function assert the value is true for type narrowing. For example: function assertTrue(v: unknown, message: string): asserts v { if (!v) { throw new MySpecialError(message ...

typescript

Best practices for handling HTTP requests in Angular 5

I'm currently developing multiple applications using Angular 5. My aim is to adhere to all the dos and don'ts of Angular. However, I'm facing some confusion regarding a few things. 1) What is the difference between this... this._http.g ...

angularresttypescriptobservableangular5

How to trigger a component programmatically in Angular 6

Whenever I hover over an <li> tag, I want to trigger a function that will execute a detailed component. findId(id:number){ console.log(id) } While this function is executing, it should send the id to the following component: export class ...

javascriptangulartypescriptangular6