npm run build:prod, hatası “ TS2307: Cannot find module” angular ng toolkit universal - angular

I wanted to edit the site for seo.
I have a package named ng toolkit universal which I'm trying to use.
I installed it as described on this link, *
I installed this package using ng add # ng-toolkit / universal --http false
After running npm run build: prod
I got the following errors-
ERROR in src\app\app.module.ts(169,7): Error during template compile
of 'AppModule' Could not resolve
src/shared/confirm-equal-validator.directive relative to [object
Object].. src/app/home/stream-videos/stream-videos.component.ts(3,31):
error TS2307: Cannot find module 'src/app/services/router.service'.
src/app/home/stream-videos/stream-videos.component.ts(5,27): error
TS2307: Cannot find module 'src/app/models/Twchannel'.
src/app/admin/login/login.component.ts(2,32): error TS2307: Cannot
find module 'src/app/app_classes/globalvariable'.
src/app/admin/login/login.component.ts(3,29): error TS2307: Cannot
find module 'src/app/services/auth.service'.
src/app/admin/login/login.component.ts(4,27): error TS2307: Cannot
find module 'src/app/models/loginUser'.
src/app/home/instagram/instagram.component.ts(2,34): error TS2307:
Cannot find module 'src/app/services/instagram.service'.
src/app/home/instagram/instagram.component.ts(3,33): error TS2307:
Cannot find module 'src/app/models/instagramPhotos'.
src/app/home/instagram/instagram.component.ts(5,30): error TS2307:
Cannot find module 'src/app/app.component'.
src/app/home/instagram/instagram.component.ts(6,30): error TS2307:
Cannot find module 'src/app/nav/nav.component'.
src/app/admin/streams-ctrl/streams-ctrl.component.ts(2,32): error
TS2307: Cannot find module 'src/app/services/streams.service'.
src/app/admin/streams-ctrl/streams-ctrl.component.ts(3,25): error
TS2307: Cannot find module 'src/app/models/streams'.
src/app/admin/videos-ctrl/videos-ctrl.component.ts(2,24): error
TS2307: Cannot find module 'src/app/models/videos'.
src/app/admin/videos-ctrl/videos-ctrl.component.ts(3,31): error
TS2307: Cannot find module 'src/app/services/videos.service'.
src/app/home/stream-videos/stream-details/stream-details.component.ts(3,32):
error TS2307: Cannot find module 'src/app/services/streams.service'.
src/app/home/stream-videos/stream-details/stream-details.component.ts(4,25):
error TS2307: Cannot find module 'src/app/models/streams'.
src/app/admin/modal/modal.component.ts(10,37): error TS2307: Cannot
find module 'src/app/models/achievementsAddEdit'.
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! unchained#0.0.0
build:client-and-server-bundles: ng build --prod && ng run
Unchained:server:production npm ERR! Exit status 1 npm ERR! npm ERR!
Failed at the unchained#0.0.0 build:client-and-server-bundles script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\Zafer.Kirik\AppData\Roaming\npm-cache_logs\2019-04-24T12_47_29_290Z-debug.log
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! unchained#0.0.0
build:ssr: npm run build:client-and-server-bundles && npm run
compile:server npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the
unchained#0.0.0 build:ssr script. npm ERR! This is probably not a
problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\Zafer.Kirik\AppData\Roaming\npm-cache_logs\2019-04-24T12_47_29_333Z-debug.log
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! unchained#0.0.0
build:prod: npm run build:ssr npm ERR! Exit status 1 npm ERR! npm
ERR! Failed at the unchained#0.0.0 build:prod script. npm ERR! This is
probably not a problem with npm. There is likely additional logging
output above.
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\Zafer.Kirik\AppData\Roaming\npm-cache_logs\2019-04-24T12_47_29_374Z-debug.log
PS D:\UnchainedRepoClone\unchained 25032019\unchained-9> node -v
v11.14.0 PS D:\UnchainedRepoClone\unchained 25032019\unchained-9>
angular -v angular : The term 'angular' is not recognized as the name
of a cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the path
is correct and try ag ain. At line:1 char:1
+ angular -v
+ ~~~~~~~
+ CategoryInfo : ObjectNotFound: (angular:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
My AppModule.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AnimateComponent } from './animate/animate.component';
import { HttpClientModule } from "#angular/common/http";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SliderComponent } from './home/slider/slider.component';
import { NavComponent } from './nav/nav.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { TeamsComponent } from './teams/teams.component';
import { StreamVideosComponent } from './home/stream-videos/stream-videos.component';
import { NewsComponent } from './home/news/news.component';
import { CalendarMinComponent } from './home/news/calendar-min/calendar-min.component';
import { FixtureComponent } from './fixture/fixture.component';
import { OurTeamsComponent } from './home/our-teams/our-teams.component';
import { InstagramComponent } from './home/instagram/instagram.component';
import { InstagramService } from './services/instagram.service';
import { GalleryComponent } from './gallery/gallery.component';
import { FooterComponent } from './footer/footer.component';
import { PartnersComponent } from './partners/partners.component';
import { StreamsComponent } from './streams/streams.component';
import { VideoComponent } from './video/video.component';
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './admin/login/login.component';
import { OthernavComponent } from './othernav/othernav.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { LoginGuard } from './app_classes/login.guard';
import { AuthService } from './services/auth.service';
import { JwtHelperService } from '#auth0/angular-jwt';
import { LeftsidebarComponent } from './admin/leftsidebar/leftsidebar.component';
import { StreamsCtrlComponent } from './admin/streams-ctrl/streams-ctrl.component';
import { SafePipe } from './pipe/safe.pipe';
import { VideosCtrlComponent } from './admin/videos-ctrl/videos-ctrl.component';
import { StreamDetailsComponent } from './home/stream-videos/stream-details/stream-details.component';
import { IconControlPipe } from './pipe/iconControl.pipe';
import { AchievementsComponent } from './achievements/achievements.component';
import { AchievementsCtrlComponent } from './admin/achievements-ctrl/achievements-ctrl.component';
import { AchievementsSearchPipe } from './pipe/AchievementsSearch.pipe';
import { AchievementsFilterByDatePipe } from './pipe/achievementsFilterByDate.pipe';
import { AchievementsFilterByPrizePipe } from './pipe/achievementsFilterByPrize.pipe';
import { ModalComponent } from './admin/modal/modal.component';
import {
MatButtonModule,
MatCardModule,
MatDialogModule,
MatIconModule,
MatMenuModule,
MatToolbarModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonToggleModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatInputModule,
MatListModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatTooltipModule,
MatTreeModule,
} from '#angular/material';
import { FileUploadModule } from 'ng2-file-upload';
import { AchievementsFilterByGamePipe } from './pipe/achievementsFilterByGame.pipe';
import { IntToactivepassivePipe } from './pipe/intToactivepassive.pipe';
import { SanitizeHtmlPipe } from './pipe/sanitizeHtml.pipe';
import { StreamsHomeComponent } from './home/stream-videos/streamsHome/streamsHome.component';
import { VideosHomeComponent } from './home/stream-videos/videosHome/videosHome.component';
import { VideoDetailsComponent } from './home/stream-videos/video-details/video-details.component';
import { VideoOrderByDescPipe } from './pipe/videoOrderByDesc.pipe';
import { RouterLinkReplacePipe } from './pipe/routerLinkReplace.pipe';
import { RouterLinkUnReplacePipe } from './pipe/RouterLinkUnReplace.pipe';
import { TwitchchannelsCtrlComponent } from './admin/twitchchannels-ctrl/twitchchannels-ctrl.component';
import { ModalfortwitchctrlComponent } from './admin/twitchchannels-ctrl/modalfortwitchctrl/modalfortwitchctrl.component';
import { TwchannelsGameIdToNameConvertPipe } from './pipe/twchannelsGameIdToNameConvert.pipe';
import { TwchannelsPlayerIdToNameConvertPipe } from './pipe/twchannelsPlayerIdToNameConvert.pipe';
import { TwhannelsSearchByUserNamePipe } from './pipe/twhannelsSearchByUserName.pipe';
import { TwchannelsSearchByIdPipe } from './pipe/twchannelsSearchById.pipe';
import { UsersCtrlComponent } from './admin/users-ctrl/users-ctrl.component';
import { ModalforusersctrlComponent } from './admin/users-ctrl/modalforusersctrl/modalforusersctrl.component';
import { ConfirmEqualValidatorDirective } from 'src/shared/confirm-equal-validator.directive';
import { A11yModule } from '#angular/cdk/a11y';
import { CdkStepperModule } from '#angular/cdk/stepper';
import { CdkTableModule } from '#angular/cdk/table';
import { CdkTreeModule } from '#angular/cdk/tree';
import { PortalModule } from '#angular/cdk/portal';
import { ScrollingModule } from '#angular/cdk/scrolling';
import { DragDropModule } from '#angular/cdk/drag-drop';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
SliderComponent,
NavComponent,
TeamsComponent,
TeamsComponent,
StreamVideosComponent,
NewsComponent,
AnimateComponent,
CalendarMinComponent,
FixtureComponent,
OurTeamsComponent,
GalleryComponent,
InstagramComponent,
FooterComponent,
PartnersComponent,
StreamsComponent,
VideoComponent,
AdminComponent,
LoginComponent,
OthernavComponent,
LeftsidebarComponent,
StreamsCtrlComponent,
VideosCtrlComponent,
StreamDetailsComponent,
AchievementsComponent,
AchievementsCtrlComponent,
ModalComponent,
StreamsHomeComponent,
VideosHomeComponent,
VideoDetailsComponent,
TwitchchannelsCtrlComponent,
ModalfortwitchctrlComponent,
UsersCtrlComponent,
ModalforusersctrlComponent,
SafePipe,
IconControlPipe,
AchievementsSearchPipe,
AchievementsFilterByDatePipe,
AchievementsFilterByPrizePipe,
AchievementsFilterByGamePipe,
IntToactivepassivePipe,
SanitizeHtmlPipe,
VideoOrderByDescPipe,
RouterLinkReplacePipe,
RouterLinkUnReplacePipe,
TwchannelsGameIdToNameConvertPipe,
TwchannelsPlayerIdToNameConvertPipe,
TwhannelsSearchByUserNamePipe,
TwchannelsSearchByIdPipe,
ConfirmEqualValidatorDirective
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
NgbModule,
BrowserAnimationsModule,
FormsModule,
MatToolbarModule,
MatCardModule,
MatMenuModule,
MatIconModule,
MatButtonModule,
MatDialogModule,
FileUploadModule,
MatAutocompleteModule,
ReactiveFormsModule,
A11yModule,
CdkStepperModule,
CdkTableModule,
CdkTreeModule,
DragDropModule,
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,
PortalModule,
ScrollingModule
],
exports: [
A11yModule,
CdkStepperModule,
CdkTableModule,
CdkTreeModule,
DragDropModule,
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,
PortalModule,
ScrollingModule,
],
providers: [
InstagramService,
LoginGuard,
AuthService
],
bootstrap: [
AppComponent
],
entryComponents: [ModalComponent, ModalfortwitchctrlComponent, ModalforusersctrlComponent]
})
export class AppModule { }

It seems that you haven't done the command: npm install which will download and install all the needed modules and dependencies.
(according to the log, modules are missed)

Related

angular - mat-slide-toggle is not visible

problem
mat-slide-toggle is not visible.
I'm trying to implement this example from below url https://material.angular.io/components/autocomplete/examples.
testcomponent.html
<mat-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule,Component, ElementRef, ViewChild,Pipe,PipeTransform,CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
//import service libraries declare all services used in project here//
import { HeroService } from './hero.service';
import { UserService } from './user.service';
import { AlertService } from './alert.service';
import {AuthenticationService } from './authentication.service';
import { ApiDashboard } from './api-dashboard';
import { ApiDashboardDataService } from './api-dashboard-data.service';
import {FormService} from './form.service';
import {UserRegistrationService} from './user-registration.service';
//services closed//
//import {DataTableModule} from "angular2-datatable";
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import {RouterTestingModule} from '#angular/router/testing';
import { AppRoutingModule } from './app-routing/app-routing.module';
// used to create fake backend
//import { fakeBackendProvider } from './helpers/fake-backend';
import { MockBackend, MockConnection } from '#angular/http/testing';
import { BaseRequestOptions } from '#angular/http';
//import { routing } from '../app-routing';
import { AuthGuard } from './auth.guard';
// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
import { HeroSearchComponent } from './hero-search/hero-search.component';
import { MaterialDashboardComponent } from './material-dashboard/material-dashboard.component';
//import {MatSidenavModule} from '#angular/material';
import { UserComponent } from './user/user.component';
import {Http, Response} from '#angular/http';
import {LoginComponent} from './login/login.component';
import { AlertComponent } from './alert/alert.component';
import { RegisterComponent } from './register/register.component';
//import {MatMenuModule} from '#angular/material';
//component for input fields
//import {MatInputModule} from '#angular/material';
import { HomeComponent } from './home/home.component';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import {CdkTableModule} from '#angular/cdk/table';
import { DataTablesModule } from 'angular-datatables';
//import { MaterialModule,MatAutocompleteModule, MatFormFieldModule } from '#angular/material';
import { MatFormFieldModule } from '#angular/material';
import {MATERIAL_COMPATIBILITY_MODE} from '#angular/material';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
//MatCoreModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
} from '#angular/material';
//import {MenuIconsExample} from './menu-icons-example';
//import {HttpModule} from '#angular/http';
import { ApiDashboardComponent } from './api-dashboard/api-dashboard.component';
import { ApiDashboardformComponent } from './api-dashboardform/api-dashboardform.component';
import { EditApiDashboardComponent } from './edit-api-dashboard/edit-api-dashboard.component';
import { MaterialThemeComponent } from './material-theme/material-theme.component';
import { LoginFosUserandRestBundleComponent } from './login-fos-userand-rest-bundle/login-fos-userand-rest-bundle.component';
import { LoginuserbundleComponent } from './loginuserbundle/loginuserbundle.component';
import { FormGroup, FormBuilder } from '#angular/forms';
import { MaterialTestthemeComponent } from './material-testtheme/material-testtheme.component';
//import {FlashMessagesModule} from 'angular2-flash-messages/module';
//import {Mat2Module} from 'Mat2';
//import {HttpModule} from '#angular/http';
//import {CdkTableModule} from '#angular/cdk';
#NgModule({
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent,
HeroSearchComponent,
MaterialDashboardComponent,
UserComponent,
LoginComponent,
AlertComponent,
RegisterComponent,
HomeComponent,
ApiDashboardComponent,
ApiDashboardformComponent,
EditApiDashboardComponent,
MaterialThemeComponent,
LoginFosUserandRestBundleComponent,
LoginuserbundleComponent,
MaterialTestthemeComponent
//MenuIconsExample
//AppRoutingModule
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterTestingModule,
InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), // fake in memory API simulation
// InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule,
MatSidenavModule,
MatInputModule,
MatMenuModule,
BrowserAnimationsModule,
MatTableModule,
CdkTableModule,
DataTablesModule,
//MaterialModule,
ReactiveFormsModule,
MatAutocompleteModule,
MatFormFieldModule,
//Mat2Module
],
//exports: [MatSidenavModule,MatInputModule,MatMenuModule],
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
//MatCoreModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
//declare your service here
providers: [HeroService,UserService,AlertService,AuthGuard,
AuthenticationService,
UserService,
ApiDashboard,
ApiDashboardDataService,
FormService,
UserRegistrationService,
FormBuilder,
// providers used to create fake backend
// fakeBackendProvider,
MockBackend,
BaseRequestOptions],
bootstrap: [AppComponent]
})
export class AppModule { }
ng version
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped
#angular/animation: 4.0.0-beta.8
#angular/cdk: 2.0.0-beta.12
#angular/cli: 1.6.7
#angular/material: 2.0.0-beta.12
#angular-devkit/build-optimizer: 0.0.42
#angular-devkit/core: 0.0.29
#angular-devkit/schematics: 0.0.52
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.9.7
#schematics/angular: 0.1.17
typescript: 2.7.1
webpack: 3.10.0
i have tried to load hammer.js from cdn path in index.html
<script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script
i have also
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
Problem
cannot view slide toggle in front end.
snapshot.
can anyone suggest what im missing though im new angular material .
any suggestion is most welcome.
In your module definition you forgot to add MatSlideToggleModule (you are importing the file but your app doesn't use it) in the imports section and you need BrowserAnimationsModule:
#NgModule({
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent,
HeroSearchComponent,
MaterialDashboardComponent,
UserComponent,
LoginComponent,
AlertComponent,
RegisterComponent,
HomeComponent,
ApiDashboardComponent,
ApiDashboardformComponent,
EditApiDashboardComponent,
MaterialThemeComponent,
LoginFosUserandRestBundleComponent,
LoginuserbundleComponent,
MaterialTestthemeComponent
//MenuIconsExample
//AppRoutingModule
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterTestingModule,
InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true }), // fake in memory API simulation
// InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule,
MatSidenavModule,
MatInputModule,
MatMenuModule,
BrowserAnimationsModule,
MatTableModule,
CdkTableModule,
DataTablesModule,
//MaterialModule,
ReactiveFormsModule,
MatAutocompleteModule,
MatFormFieldModule,
MatSlideToggleModule, // here otherwise it's not possible to use the component mat-slide-toggle defined in this module
BrowserAnimationsModule
],
//exports: [MatSidenavModule,MatInputModule,MatMenuModule],
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
//MatCoreModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
//declare your service here
providers: [HeroService, UserService, AlertService, AuthGuard,
AuthenticationService,
UserService,
ApiDashboard,
ApiDashboardDataService,
FormService,
UserRegistrationService,
FormBuilder,
// providers used to create fake backend
// fakeBackendProvider,
MockBackend,
BaseRequestOptions],
bootstrap: [AppComponent]
})
export class AppModule { }
You didn't see any error because you use
schemas: [CUSTOM_ELEMENTS_SCHEMA]
You didn't provide your css but you will also need to import a material theme in your style.(s)css like:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
You can find a simple example here https://stackblitz.com/edit/angular-eszrpl

'mat-card' is not a known element in Angular 7

I've seen a lot of questions on this but doesn't seem to be the same issue Im encountering. I have just created my 2nd angular project. I have a new component under src/app/employees where I am trying to use in employees.component.html . The error I am getting is:
Uncaught Error: Template parse errors:
'mat-card' is not a known element:
1. If 'mat-card' is an Angular component, then verify that it is part of this module.
2. If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-card> </mat-card>
Now, in app.module.ts I have:
import { BrowserModule } from "#angular/platform-browser";
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { LOCALE_ID, NgModule } from "#angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "#angular/common/http";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatListModule,
MatSelectModule,
MatSidenavModule,
MatCardModule,
MatTableModule
} from "#angular/material";
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatListModule,
MatInputModule,
MatSelectModule,
MatSidenavModule,
MatCardModule,
MatTableModule
],....
})
export class AppModule {}
And there aren't any errors if I use mat-card in app.component.html.
What am I missing here?
I can not see your EmployeesComponent in your list of declarations. The EmployeesComponent need to be declared in the same module as where you import the MatCardModule, like:
declarations: [
EmployeesComponent
],
imports: [
MatCardModule
]
I am guessing either that you have forgotten to declare the EmployeesComponent in your app module, or that you have another module, perhaps Employees module, where you have to import the MatCardModule.

Angular Material #NgModule annotation?

How can I use the Angular-Material Components in different components? I watched and read some tutorials, but they didn't solve my problem. I still can't use them. Here is the error:
compiler.js:2430 Uncaught Error: Unexpected directive 'MatToolbar' imported by the module 'MaterialModule'. Please add a #NgModule annotation.
at syntaxError (compiler.js:2430)
at compiler.js:18645
at Array.forEach (<anonymous>)
at CompileMetadataResolver.push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18620)
at CompileMetadataResolver.push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:18555)
at compiler.js:18642
at Array.forEach (<anonymous>)
at CompileMetadataResolver.push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18620)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26029)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
I made a TypeScript file that imports me all the Material-Components that I want.
material.ts :
import { MatButtonModule, MatCheckboxModule, MatToolbar, MatToolbarRow, } from '#angular/material';
import { NgModule } from '#angular/core';
import {MatToolbarModule} from '#angular/material/toolbar';
#NgModule({
imports: [
MatButtonModule,
MatCheckboxModule,
MatToolbar,
MatToolbarRow,
MatToolbarModule
],
exports: [
MatButtonModule,
MatCheckboxModule,
MatToolbar,
MatToolbarRow,
MatToolbarModule
]
})
export class MaterialModule { }
app.module.ts :
import { MaterialModule } from './material';
import { CvServiceService } from './service/cv-service.service';
import { environment } from './../environments/environment';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {FormsModule} from '#angular/forms';
import { AngularFireModule } from '#angular/fire';
import { AngularFirestoreModule } from '#angular/fire/firestore';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SkillsComponent } from './skills/skills.component';
import { MenubarComponent } from './menubar/menubar.component';
#NgModule({
declarations: [
AppComponent,
SkillsComponent,
MenubarComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
AngularFirestoreModule,
AngularFireModule.initializeApp(environment.firebase, 'angularfs'),
BrowserAnimationsModule,
MaterialModule
],
providers: [CvServiceService],
bootstrap: [AppComponent]
})
export class AppModule { }
How can I use the AngularMaterial-Componets?
You need to import MatToolbarModule, not MatToolbar.
#NgModule({
imports: [
MatButtonModule,
MatCheckboxModule,
MatToolbarModule
],
exports: [
MatButtonModule,
MatCheckboxModule,
MatToolbarModule
]
})
export class MaterialModule { }
You get the error because you are importing a non-module:
imports: [
MatButtonModule,
MatCheckboxModule,
// MatToolbar, // remove these
// MatToolbarRow, // two lines
MatToolbarModule
],
You can only import classes decorated with #NgModule, typically all of those have the "Module" suffix.

Uncaught Error: Unexpected module 'MatFormFieldModule' declared by the module 'AppModule'. Please add a #Pipe/#Directive/#Component annotation

I am getting next error on installing Angular Material to the Angular 7 Project:
Uncaught Error: Unexpected module 'MatFormFieldModule' declared by the module 'AppModule'. Please add a #Pipe/#Directive/#Component annotation.
I am putting app.module.ts code below:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule, MatFormFieldModule , MatInputModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatSortModule,
MatTableModule,
MatIconModule,
MatCardModule } from '#angular/material';
import { FormsModule } from '#angular/forms';
#NgModule({
declarations: [
AppComponent,
MatFormFieldModule
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule ,
MatButtonModule, MatCheckboxModule,
FormsModule,
MatInputModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatSortModule,
MatTableModule,
MatIconModule,
MatCardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

mat-nav-item is not a known element

import { NgModule } from '#angular/core';
import { MatButtonModule,MatMenuModule , MatTabsModule , MatToolbarModule,MatIconModule, MatCardModule} from '#angular/material';
#NgModule({
imports: [
MatButtonModule,
MatTabsModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule
],
exports: [
MatButtonModule,
MatTabsModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule
]
})
export class MaterialModule {}
I have imported all required material module but still I am getting error mentioned in subject. I don't understand which module I have missed to import. Version I used for my project is as below.
Angular CLI 6.1.5
Angular 6.1.9
Node 8.11.1
#angular/material "^6.4.7",
#angular/cdk "^6.4.7",
My HTML code
<mat-nav-bar>
<mat-nav-item mat-nav-href="#/" name="page3">Home</mat-nav-item>
<mat-nav-item mat-nav-href="#/about" name="page3">About</mat-nav-item>
</mat-nav-bar>
In Angular Material there are no mat-nav-bar and mat-nav-item. Use mat-nav-list and mat-list-item instead (add MatListModule to your MaterialModule):
<mat-nav-list>
<mat-list-item routerLink="/">Home</mat-list-item>
</mat-nav-list>
However, your MaterialModule looks fine. In case you haven't done it yet, you need to include this module within your AppModule:
#NgModule({
declarations: [
...
],
imports: [
...
MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}

Resources