NG002 Error: Could not be resolved to an NgModule class - javascript

I have added a new component to my angular project and made sure it is imported in my app module however I get a NG002 error saying:
error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
Is it missing an #NgModule annotation?
export class NavigationBarDriverComponent {
My app module looks like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import {GoogleMapsAPIWrapper} from '#agm/core';
import { AppComponent } from './app.component';
import { ButtonComponent } from './button/button.component';
import { AgmCoreModule } from '#agm/core';
import { AgmDirectionModule } from 'agm-direction';
import { GooglePlaceModule } from "ngx-google-places-autocomplete";
import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
import { NavigationBarDriverComponent} from './navigation-bar-driver/navigation-bar-driver.component';
import { LayoutModule } from '#angular/cdk/layout';
import { MatToolbarModule } from '#angular/material/toolbar';
import { MatButtonModule } from '#angular/material/button';
import { MatSidenavModule } from '#angular/material/sidenav';
import { MatIconModule } from '#angular/material/icon';
import { MatListModule } from '#angular/material/list';
import { NoopAnimationsModule } from '#angular/platform-browser/animations';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatDialogModule } from '#angular/material/dialog';
import { RouteDialogComponent } from './route-dialog/route-dialog.component';
import { AppRoutingModule, routingComponents } from './app-routing.module';
#NgModule({
declarations: [
AppComponent,
ButtonComponent,
NavigationBarComponent,
NavigationBarDriverComponent,
RouteDialogComponent,
routingComponents
],
imports: [
BrowserModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyDnibzvTPaquvcrp9ZYZZ5EFgzncyK1jys'
}),
AgmDirectionModule,
GooglePlaceModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule,
NoopAnimationsModule,
HttpClientModule,
OwlDateTimeModule,
OwlNativeDateTimeModule,
BrowserAnimationsModule,
MatDialogModule,
MatButtonModule,
AppRoutingModule,
NavigationBarDriverComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and my NavigationBarDriverComponent looks like this:
import { Component, NgModule } from '#angular/core';
import { BreakpointObserver, Breakpoints } from '#angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
#Component({
selector: 'app-navigation-bar-driver',
templateUrl: './navigation-bar-driver.component.html',
styleUrls: ['./navigation-bar-driver.component.css']
})
export class NavigationBarDriverComponent {
drawer;
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
}
I tried to restart the angular server with both "ng serve" and also "ng serve --prod" as I saw it suggested in another thread.

Remove NavigationBarDriverComponent from your app module import.

Related

How to utilize appModule in platformBrowserDynamic?

I receive an error message saying “unexpected value ‘undefined’ declared by the module ‘AppModule’ “I want to be able to see my angular app that I imported into codesandbox. Here is the link https://codesandbox.io/s/xenodochial-yalow-ox2sw?file=/bookface/src/app/app.module.ts:0-2354
Main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
App.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { HomeComponent } from './home/home.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { PostsComponent } from './posts/posts.component';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { NotiBarComponent } from './noti-bar/noti-bar.component';
import { MessagesComponent } from './messages/messages.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { PostsComComponent } from './posts-com/posts-com.component';
import { ProfileComponent } from './profile/profile.component';
import { SearchComponent } from './search/search.component';
import { MessagesBoxComponent } from './messages-box/messages-box.component';
import {
AuthGuardService as AuthGuard
} from './auth/auth-guard.service';
import {
AuthService
} from './auth/auth.service';
import { ProfileFriendComponent } from './profile-friend/profile-friend.component';
import { ProfilePhotosComponent } from './profile-photos/profile-photos.component';
import { RequestsComponent } from './requests/requests.component';
import { DmsComponent } from './dms/dms.component';
import { PostComponent } from './post/post.component';
import { AppPostSingleComponent } from './app-post-single/app-post-single.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
SidebarComponent,
PostsComponent,
NotiBarComponent,
MessagesComponent,
NavbarComponent,
SignUpComponent,
PostsComComponent,
ProfileComponent,
SearchComponent,
MessagesBoxComponent,
ProfileFriendComponent,
ProfilePhotosComponent,
RequestsComponent,
DmsComponent,
PostComponent,
AppPostSingleComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule ,
AppRoutingModule,
HttpClientModule,
FontAwesomeModule,
],
providers: [AuthGuard,AuthService],
bootstrap: [AppComponent]
})
export class AppModule {
}

NullInjectorError: StaticInjectorError(AppModule)[NGXLoggerHttpService -> HttpBackend]:

I keep getting the following error after upgrading my NgxLogger module:
main.ts:17 NullInjectorError: StaticInjectorError(AppModule)[NGXLoggerHttpService -> HttpBackend]:
StaticInjectorError(Platform: core)[NGXLoggerHttpService -> HttpBackend]:
NullInjectorError: No provider for HttpBackend!
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { RecaptchaComponent } from 'ng-recaptcha';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
if (window['ngRef']) {
window['ngRef'].destroy();
}
window['ngRef'] = ref;
}).catch(err => console.error(err));
RecaptchaComponent.prototype.ngOnDestroy = function () {
if (this.subscription) {
this.subscription.unsubscribe();
}
};
core.module.ts
import { NgModule } from '#angular/core';
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '#angular/fire';
import { AngularFirestoreModule } from '#angular/fire/firestore';
import { AngularFireAuthModule } from '#angular/fire/auth';
import { BrowserModule } from '#angular/platform-browser';
import { AngularFireDatabaseModule } from '#angular/fire/database';
import { StoreModule } from '#ngrx/store';
import { metaReducers, reducers } from './core.state';
import { EffectsModule } from '#ngrx/effects';
import { AuthEffects } from '../modules/auth/auth.effects';
import { CustomNGXLoggerService, LoggerModule, NGXLogger, NGXLoggerHttpService } from 'ngx-logger';
#NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
AngularFireDatabaseModule,
AngularFireAuthModule,
BrowserModule,
StoreModule.forRoot(reducers, {
metaReducers,
runtimeChecks: {
strictActionImmutability: true,
strictStateImmutability: true,
},
}),
EffectsModule.forRoot([
AuthEffects
]),
],
providers: [
NGXLogger,
NGXLoggerHttpService,
CustomNGXLoggerService
]
})
export class CoreModule {
}
app.module.ts
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AuthService } from './modules/auth/auth.service';
import { ReferralService } from './modules/referral/referral.service';
import { UserService } from './modules/shared/services/user.service';
import { UtilService } from './modules/shared/services/util.service';
import { CoreModule } from './core/core.module';
import { NavbarModule } from './modules/shared/components/navbar/navbar.module';
import { FooterModule } from './modules/shared/components/footer/footer.module';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
import { RouterModule, Routes } from '#angular/router';
import { LoggerModule } from 'ngx-logger';
import { environment } from '../environments/environment';
const routes: Routes = [
{ path: '', loadChildren: './modules/main/main.module#MainModule' },
];
#NgModule({
declarations: [
AppComponent
],
imports: [
RouterModule.forRoot(routes),
NavbarModule,
FooterModule,
CoreModule,
LoggerModule.forRoot(environment.logging),
NgxUiLoaderModule
],
providers: [
AuthService,
UtilService,
UserService,
ReferralService
],
bootstrap: [AppComponent]
})
export class AppModule {
}
You have that error because your NGXLoggerHttpService is depend on HttpBackend class but HttpBackend class did not import to your providers section in your module.ts. Try to import HttpBackend to your provider.
As mentioned in this issue, importing HttpClientModule and adding it in the imports of the module solves the problem
import { HttpClientModule } from '#angular/common/http';
...
imports: [ ..., HttpClientModule, ...]

Namespace has no exported member "User" Angularfire 2

Service file:
import { Injectable } from '#angular/core';
import {AngularFireAuth} from 'angularfire2/auth';
import {Observable} from 'rxjs/Observable';
import * as firebase from 'firebase/app';
#Injectable()
export class AfService {
user: Observable<firebase.User>;
constructor(public afAuth : AngularFireAuth){
this.user=afAuth.authState;
}
loginWithGoogle(){
const provider= new firebase.auth.GoogleAuthProvider();
this.afAuth.auth.signInWithPopup(provider);
}
logout(){
this.afAuth.auth.signOut();
}
}
app.module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule,AngularFireDatabase} from 'angularfire2/database';
import {AppRoutingModule} from './app-routing-module';
import { AppComponent } from './app.component';
import {environment} from '../environments/environment';
import { PagesListComponent } from './pages-list/pages-list.component';
import { LoginPageComponent } from './login-page/login-page.component';
import {AfService} from './providers/af.service';
import {AngularFireAuthModule} from 'angularfire2/auth';
#NgModule({
declarations: [
AppComponent,
PagesListComponent,
LoginPageComponent,
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AppRoutingModule,
AngularFireAuthModule
],
providers: [AfService],
bootstrap: [AppComponent]
})
export class AppModule { }
Error while compiling -
*******Namespace '"/Users/Triathlon/Desktop/cms/cms-app/node_modules/firebase/app/index"' has no exported member 'User'.
Property 'auth' does not exist on type 'typeof "/Users/Triathlon/Desktop/cms/cms-app/node_modules/firebase/app/index"'.**

Angular 4 and Angular Material long loading

Currently working on a portal https://scrawlless.com . I have an issue with long loading and not loading on some devices at all! Can you please check this web site? How can i reduce time of it's loading? It is powered by Angular 4, using Angular Material lib.
Why it can happen? It is not working at all on devices like Iphone 4, Lumia 520, 540 etc.
That is my app.module.ts file code:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthenticationService } from './_services/authentication.service';
import { SocketService } from './_services/socket.service';
import { AuthGuard } from './_guards/auth.guard';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MdNativeDateModule, MdDatepickerModule, MdButtonToggleModule, MdListModule, MdSnackBarModule, MdSelectModule, MdCheckboxModule, MdDialogModule, MdProgressSpinnerModule, MdInputModule, MdGridListModule, MdTooltipModule, MdSidenavModule, MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MdTabsModule } from '#angular/material';
import { BodyComponent } from './_components/pages/body/body.component';
import { WorkspaceComponent } from './_components/pages/workspace/workspace.component';
import { IndexComponent } from './_components/pages/index/index.component';
import { UserDashboardComponent } from './_components/dashboards/user-dashboard/user-dashboard.component';
import { TeacherDashboardComponent } from './_components/dashboards/teacher-dashboard/teacher-dashboard.component';
import { UserSidebarComponent } from './_components/sidebars/user-sidebar/user-sidebar.component';
import { TeacherSidebarComponent } from './_components/sidebars/teacher-sidebar/teacher-sidebar.component';
import { SeparatorComponent } from './_components/other/separator/separator.component';
import { LearnMoreDialogComponent } from './_components/dialogs/learn-more-dialog/learn-more-dialog.component';
import { AdditionDialogComponent } from './_components/dialogs/addition-dialog/addition-dialog.component';
import { SearchUsersDialogComponent } from './_components/dialogs/search-users-dialog/search-users-dialog.component';
import { SearchDialogsDialogComponent } from './_components/dialogs/search-dialogs-dialog/search-dialogs-dialog.component';
import { ProfileViewDialogComponent } from './_components/dialogs/profile-view-dialog/profile-view-dialog.component';
import { NewListCreateComponent } from './_components/dialogs/new-list-create/new-list-create.component';
import { AdditionColumnComponent } from './_components/columns/addition-column/addition-column.component';
import { MultiplicationColumnComponent } from './_components/columns/multiplication-column/multiplication-column.component';
import { DivisionColumnComponent } from './_components/columns/division-column/division-column.component';
import { StudentInfoComponent } from './_components/info/student-info/student-info.component';
import { TeacherInfoComponent } from './_components/info/teacher-info/teacher-info.component';
import { UsersListComponent } from './_components/dashboards/users-list/users-list.component';
import { ChatComponent } from './_components/dashboards/chat/chat.component';
import { ConnectedDevicesComponent } from './_components/dashboards/connected-devices/connected-devices.component';
import { MarksTableComponent } from './_components/dashboards/marks-table/marks-table.component';
import { ListsComponent } from './_components/dashboards/lists/lists.component';
import { EditProfileComponent } from './_components/dashboards/edit-profile/edit-profile.component';
import { MessagesOverviewComponent } from './_components/other/messages-overview/messages-overview.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MobileKeyboardComponent } from './_components/pages/mobile-keyboard/mobile-keyboard.component';
#NgModule({
declarations: [
AppComponent,
BodyComponent,
UserDashboardComponent,
TeacherDashboardComponent,
UserSidebarComponent,
TeacherSidebarComponent,
SeparatorComponent,
IndexComponent,
LearnMoreDialogComponent,
WorkspaceComponent,
AdditionColumnComponent,
MultiplicationColumnComponent,
DivisionColumnComponent,
AdditionDialogComponent,
StudentInfoComponent,
TeacherInfoComponent,
UsersListComponent,
ChatComponent,
ConnectedDevicesComponent,
MarksTableComponent,
ListsComponent,
SearchUsersDialogComponent,
SearchDialogsDialogComponent,
MessagesOverviewComponent,
ProfileViewDialogComponent,
EditProfileComponent,
NewListCreateComponent,
MobileKeyboardComponent,
],
entryComponents: [
LearnMoreDialogComponent,
AdditionDialogComponent,
SearchUsersDialogComponent,
SearchDialogsDialogComponent,
ProfileViewDialogComponent,
NewListCreateComponent
],
imports: [
AppRoutingModule,
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
MdNativeDateModule,
MdDatepickerModule,
MdButtonToggleModule,
MdListModule,
MdSnackBarModule,
MdSelectModule,
MdCheckboxModule,
MdDialogModule,
MdProgressSpinnerModule,
MdInputModule,
MdGridListModule,
MdTooltipModule,
MdSidenavModule,
MdButtonModule,
MdMenuModule,
MdCardModule,
MdToolbarModule,
MdIconModule,
MdTabsModule
],
providers: [
AuthGuard,
AuthenticationService,
SocketService,
MdNativeDateModule
],
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