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

Error: Element type is invalid: a string was anticipated, but not found

I recently experimented with the example provided in React's documentation at this link and it functioned perfectly. My objective now is to create a button using material-ui. Can you identify what is causing the issue in this code? import * as R ...

javascriptreactjstypescriptmaterial-ui

What is the best way to duplicate a Typescript class object while making changes to specific properties?

I have a Typescript cat class: class Kitty { constructor( public name: string, public age: number, public color: string ) {} } const mittens = new Kitty('Mittens', 5, 'gray') Now I want to create a clone of the inst ...

javascripttypescriptfunctional-programming

Navigating with header tags and using the navbar in react-router

Here is the code snippet I am working with App.tsx import React, { FC, Fragment } from "react"; import Nav from "./Components/Nav/Nav"; const App: FC = () => ( <Fragment> <Nav /> </Fragment> ); export default App; Nav.tsx ...

reactjstypescriptreact-router

Ensuring a child element fills the height of its parent container in React Material-UI

Currently, I am in the process of constructing a React Dashboard using MUI. The layout consists of an AppBar, a drawer, and a content area contained within a box (Please correct me if this approach is incorrect)... https://i.stack.imgur.com/jeJBO.png Unf ...

reactjstypescriptmaterial-ui

Guide on implementing Regular Expressions in Directives for validation in Angular 8

Managing 8 different angular applications poses its unique challenges. In one of the applications, there is a directive specifically designed for validating YouTube and Vimeo URLs using regular expressions. Unfortunately, once the RegExp is declared, ther ...

javascriptangulartypescriptangular-directive

In Angular, what is the best way to update the quantity of an item in a Firestore database?

Whenever I attempt to modify the quantity of an item in the cart, the quantity does not update in the firestore database. Instead, the console shows an error message: TypeError: Cannot read properties of undefined (reading 'indexOf'). It seems li ...

javascriptangularfirebase

How can I showcase an image using Angular?

Recently, I've started working with Angular and I'm trying to display images using assets. I have a service that looks like this: const IMAGES = [ {"id":1, "category": "boats", "caption": "View from the boat", "url":"assets/img/boat_01.jpeg"}, ...

htmlangular

Stop ngOnChanges from being triggered after dispatching event (Angular 2+)

In Angular 2+, a custom two-way binding technique can be achieved by utilizing @Input and @Output parameters. For instance, if there is a need for a child component to communicate with an external plugin, the following approach can be taken: export class ...

javascriptangulartypescript

Issue TS2707: The generic type 'ɵɵDirectiveDeclaration' must be provided with 6 to 8 type arguments

After running the npm install ngx-infinite-scroll --save command to add the ngx-infinite-scroll library, I encountered an error in the library file. The specific error message reads: Error: node_modules/ngx-infinite-scroll/lib/ngx-infinite-scroll.direct ...

angularnpmangular-materialinfinite-scrollngx-bootstrap

ERROR: There was a problem with the NgbTabset class at line 12 in the inline template. This issue occurred because the 'templateRef' property could not be read as it was undefined

I am utilizing ng-bootstrap instead of ui-bootstrap in angular2 for my project. This is the HTML code I am using: <div class="row" style="height: 100%;"> <div class="col-12"> <div class="container" id="contentMain"> <div ...

angularangular-ui-bootstrapng-bootstrapangular-ui-bootstrap-tab

Changing the time in Angular while converting a string to a date object has proven to be

Can anyone help me with a problem I'm having trying to convert a String into a Date object without it being affected by timezone changes? Specifically, when I receive 2020-07-14T15:27:39Z from an http get request, I need to convert this into a Date o ...

angulartypescriptdatetimetimezone

The React DOM isn't updating even after the array property state has changed

This particular issue may be a common one for most, but I have exhausted all my options and that's why I am seeking help here. Within my React application, I have a functional component named App. The App component begins as follows: function App() ...

javascriptreactjstypescriptreact-state

Navigating in Angular is made easy with the Angular routing feature, which allows you to redirect

I have been working through the Angular Tour of Heroes Guide and encountered the section on the "default route". I decided to experiment by removing the pathMatch attribute from the Route associated with an empty string. Below is the code snippet in quest ...

angulartypescriptangular-routingangular-router

Exploring the Differences between Angular's Http Module and the Fetch API

While I grasp the process Angular uses for HTTP requests, I find myself leaning towards utilizing the Fetch API instead. It eliminates the need to subscribe and unsubscribe just for a single request, making it more straightforward. When I integrated it int ...

javascriptangulartypescripthttp

Unable to retrieve device UUID using capacitor/device on Android

I'm currently attempting to obtain the UUID of my devices so that I can send targeted notifications via Firebase. My front end and back end are connected, enabling the back end to send notifications to the front end using Firebase. However, all I am a ...

androidjsonangulartypescriptcapacitor

Using Angular to inject various service implementations into a nested module

In my app, I have a class that implements ErrorHandler and is provided at the root level. There are 3 modules in my app, two of which can use the ErrorHandler at the root level, but one of them requires a different version of the ErrorHandler. I attempted ...

angulardependency-injection

The object instance is failing to receive the Angular Injected service assignment

I am currently utilizing Angular6 and have the following code: 'use strict'; import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; import {MainService} from "./services/main.service"; import {AppService} from "../../app. ...

angularangular6

How to access type properties in typescript without using the "this" keyword

Below is a snippet of code that I am working with: class Player implements OthelloPlayer { depth; constructor(depth: number) { this.depth = depth; } getMove(state: OthelloState) { return this.MinimaxDecision(stat ...

typescript

Is it possible for me to incorporate a portion of the interface?

Is it possible to partially implement an interface? export interface AuthorizeUser { RQBody: { login: string; password: string; }; RSBody: { authorizationResult: AuthorizationResult; }; }; class AuthorizeUserRQBody implements Authorize ...

typescript

What is the best way to establish communication between the browser and an express.js server while utilizing angular ssr?

I've encountered a server-side rendering (SSR) issue that does not seem to be addressed in either the Angular documentation or the new Angular developer documentation. My inquiry pertains to transferring data from the browser to the server, as oppose ...

angularexpressangular-universalangular-ssr