Inputting/importing MatButtonModule, MatMenuModule, MatIconModule into my project - javascript

I have an Angular app, but I am not sure how I can add MatButtonModule, MatMenuModule, MatIconModule into my project.
Whenever I try to, I get the below error:
"Module has no exported member"
I believe this may have something to do with the Angular material installation but I am not too sure.
MatButtonModule, MatMenuModule, MatIconModule are all underlined as red in my IDE but I currently have MatFormFieldModule and MatInputModule and those are working fine.
Even if I add them to the Imports section, that does not help.
Here is my code for app.module.ts, does anything stick out:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { ItemService } from './items.service';
import { NewItemFormComponent } from './new-item-form/new-item-form.component';
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule, MatButtonModule, MatMenuModule, MatIconModule } from '#angular/material/input';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component';
#NgModule({
declarations: [
AppComponent,
NewItemFormComponent,
NavigationMenuComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule
],
providers: [ItemService],
bootstrap: [AppComponent]
})
export class AppModule { }

You are trying to import MatButtonModule, MatMenuModule and MatIconModule from input (#angular/material/input), which is not the correct way, you should import them from their respective modules like below
import { MatButtonModule } from '#angular/material/button';
import { MatMenuModule } from '#angular/material/menu';
import { MatIconModule } from '#angular/material/icon';

Related

Angular javascript page compiles but shows blank

When I compile my Angular app it works, but the HTML page is blank and it my application will not display. I've had issues like this before and usually it has been one of the Imports, but I'm not sure now. When I use Google Chrome to inspect, the error that I see is record.factory is not a function. Is anyone familiar with this?
Here is my module.ts code:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { ItemService } from './items.service';
import { NewItemFormComponent } from './new-item-form/new-item-form.component';
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule } from '#angular/material/input';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { FormsModule } from '#angular/forms';
#NgModule({
declarations: [
AppComponent,
NewItemFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule
],
providers: [ItemService, BrowserModule,
AppRoutingModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
You placed in wrong place couple of your modules. You should put them into imports section, not providers. I am talking
BrowserModule,
AppRoutingModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
FormsModule
Also there might be problem if you have #Injectable and #NgModule decorators added to same class.

Unexpected value 'undefined' imported by the module 'AppModule' at syntaxError

I am Beginner and following tutorials, in which i am working in angular with firebase. I use HTML table which was working fine but after using angular-4-data-table i got following error
Unexpected value 'undefined' imported by the module 'AppModule' in console and with this error
This is my app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
declarations: [
AppComponent,
BsNavbarComponent,
HomeComponent,
ProductsComponent,
ShoppingCartComponent,
CheckCheckoutComponent,
OrderSucessComponent,
MyOrderComponent,
AdminProductsComponent,
AdminOrdersComponent,
LoginComponent,
ProductFormComponent
],
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot()
],
providers: [
AuthService,
AuthGaurd,
AdminAuthGuard,
UserService,
CategoryService,
ProductsComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
and this is Import in component
import { Component, OnInit, OnDestroy } from '#angular/core';
import { ProductService } from 'src/app/product.service';
import { Subscription } from 'rxjs';
import { Product } from 'src/app/models/product';
import { DataTableResource } from 'angular-4-data-table';
I also watched previously asked questions on this forum but did not work for me.
Your AppModule the decorator NgModule.
A typical ngModule looks like this:
#NgModule({
declarations: [...],
imports: [...]
})
export class AppModule{}
Pay attention that the imports that look like
import { BrowserModule } from '#angular/platform-browser'; are meant to "include" the modules from different files but without a declaration like the one above you cannot use them in the current NgModule.
In the end, your AppModule should look like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule
....
],
declarations: [....]
})
export class AppModule{}
I was facing same problem with Angular-4-Data-table
Actually i was using a higher version of angular which was not working with angular-4-data-table so i try this and upgrade
npm install angular5-data-table --save
In App Module i use
import {DataTableModule} from 'angular5-data-table';
And same in component
import { DataTableResource } from 'angular5-data-table';
it worked for me hopefully it will work for you.
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot(),
]
problem is in last comma remove comma after NgbModule.forRoot()

Cannot connect theme for Angular Material

I using Angular Material component and try to use a prebuilt theme
I added this row to my component css #import '#angular/material/prebuilt-themes/deeppurple-amber.css';
But still get an error
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Here is app.module.ts code
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {CustomMaterialModule} from "./CustomMaterialModule";
import { PaymentsComponent } from './payments/payments.component';
import { MatPaginatorModule, MatCheckboxModule} from '#angular/material';
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
#NgModule({
declarations: [
AppComponent,
PaymentsComponent
],
imports: [
BrowserModule,
CustomMaterialModule,
AppRoutingModule,
MatPaginatorModule,
MatCheckboxModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Where can be my trouble?
Seems like I found answer
I need to add
providers: [
{
provide: MATERIAL_SANITY_CHECKS,
useValue: false
}
],
Into app.module.ts and now I don't have this error

How to use angular/material version 7.0.1 component in my project?

I start, learning the Angular with Google Material Design, so far so good, I create my front-end app with the official documentation from https://angular.io/tutorial and https://material.angular.io/guides websites.
I read a similar question but that won't work for me, my app uses the Angular 7.0.0 with Angular Material 7.0.0.
So, I want to use most of the Angular Material Components in my demo app, what is the best way to have, all of them.
I read many articles and tutorials like Getting Started With Angular Material 2 or this one, but in all of them, they just using the basic components or the tutorial is about old version of Angular Material and the current official documentation doesn't provide the list of available component to Import for current version and how to use those components by the way?
My app.module.ts with basic component:(Updated code)
// angular component and
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "#angular/forms";
// my components
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NavigationComponent } from "./header/navigation/navigation.component";
import { ContainerComponent } from './container/container.component';
import { NavComponent } from './nav/nav.component';
// add animaitons for material
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
// add CDK layout for material
import { LayoutModule } from "#angular/cdk/layout";
// add material to module
import { MaterialModule } from "./class/material.module"
#NgModule({
imports: [
BrowserModule,
FormsModule, ReactiveFormsModule,
BrowserAnimationsModule,
LayoutModule,
MaterialModule
],
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NavigationComponent,
ContainerComponent,
NavComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}
I find this code in similar question, but when is add it in a separate file and then importing to the app.module.ts, my app stop working and just I will see the loading message in the browser. (Updated code)
import { NgModule } from "#angular/core";
import {
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatCheckboxModule,
MatIconModule,
MatListModule
} from "#angular/material";
#NgModule({
imports: [
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatCheckboxModule,
MatIconModule,
MatListModule
],
exports: [
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatCheckboxModule,
MatIconModule,
MatListModule
]
})
export class MyMaterialModule {}
(Updated)
For now, I just fix the material.module.ts in my class folder, but still, I can't add other components. like the following components:
import {
MatNativeDateModule,
MatSnackBarModule,
MatDialogModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTabsModule,
MatCheckboxModule,
MatCard,
MatCardModule,
MatFormField,
MatFormFieldModule,
MatProgressSpinnerModule,
MatInputModule
} from "#angular/material";
import { MatDatepickerModule } from "#angular/material/datepicker";
import { MatRadioModule } from "#angular/material/radio";
import { MatSelectModule } from "#angular/material/select";
import { MatSliderModule } from "#angular/material/slider";
import { MatDividerModule } from "#angular/material/divider";
You need to use comman module while using seprate file:
1] material.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CdkTableModule } from '#angular/cdk/table';
import { CdkTreeModule } from '#angular/cdk/tree';
import {
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule
} from '#angular/material';
#NgModule({
exports: [
CdkTableModule,
CdkTreeModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule
],
imports: [CommonModule],
declarations: []
})
export class MaterialModule {}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { NgForm,ReactiveFormsModule } from '#angular/forms';
import {
HttpClient,
HTTP_INTERCEPTORS,
HttpClientModule
} from '#angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NavigationComponent } from "./header/navigation/navigation.component";
import { ContainerComponent } from './container/container.component';
import { NavComponent } from './nav/nav.component';
import { LayoutModule } from "#angular/cdk/layout";
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NavigationComponent,
ContainerComponent,
NavComponent,
NgForm
],
imports: [
CommonModule,
MaterialModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule,
HttpClientModule,
LayoutModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }

How to embed twitter timeline to Angular4 app

New to Angular, please bear with me. I need to load in tweets from a specific timeline. What is the best way to accomplish this? I've tried using this package (https://www.npmjs.com/package/ng4-twitter-timeline), and have followed the instructions in that documentation, but I still get the error that "ng4-twitter-timeline is not a known element."
I've also tried adding in
<script src="https://platform.twitter.com/widgets.js" async></script>
to index.html...
Are there additional scripts that need to be loaded in for this to work?
app.module.ts
...
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '#angular/router';
import { SwiperModule } from 'angular2-useful-swiper';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { ShareModule } from 'ng2share/share.module';
import { MasonryModule } from 'angular2-masonry';
import { routes } from './app-routing.module';
import { Ng4TwitterTimelineModule } from 'ng4-twitter-timeline/lib/index';
#NgModule({
declarations: [
...
],
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
AngularFontAwesomeModule,
SwiperModule,
RouterModule.forRoot(routes),
ShareModule,
MasonryModule,
Ng4TwitterTimelineModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
tweets.component.ts
import { Component, OnInit } from '#angular/core';
import { Ng4TwitterTimelineService } from 'ng4-twitter-timeline/lib/index';
#Component({
selector: 'app-tweets',
templateUrl: './tweets.component.html',
styleUrls: ['./tweets.component.scss']
})
export class TweetsComponent implements OnInit {
constructor(private ng4TwitterTimelineService: Ng4TwitterTimelineService) {}
ngOnInit() {}
}
tweets.component.html
<ng4-twitter-timeline [dataSrc]="{sourceType: 'profile',screenName: 'lokers_one'}" [opts]="{tweetLimit: 2}"></ng4-twitter-timeline>
You should add .forRoot when you imports Ng4TwitterTimelineModule in #ngModule. So your app.module.ts should look like that:
...
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '#angular/router';
import { SwiperModule } from 'angular2-useful-swiper';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { ShareModule } from 'ng2share/share.module';
import { MasonryModule } from 'angular2-masonry';
import { routes } from './app-routing.module';
import { Ng4TwitterTimelineModule } from 'ng4-twitter-timeline/lib/index';
#NgModule({
declarations: [
...
],
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
AngularFontAwesomeModule,
SwiperModule,
RouterModule.forRoot(routes),
ShareModule,
MasonryModule,
Ng4TwitterTimelineModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Figured it out, everyone. The account used in the demo has protected tweets... which is why nothing was embedding... I changed the account and it does work. But still don't understand why I'm still getting this error: 'ng4-twitter-timeline' is not a known element'

Categories