We Keep Coding

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 {
}

NG002 Error: Could not be resolved to an NgModule class

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.

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, ...]

Angular 6 tree diagram

I want to implement a tree diagram - something like this angular2-tree-diagram. Precisely, my task is a question-answer hierarchy where the question and answer will be propagated depending on the question and answer of the current node.
However, this package was made for Angular 2. I am trying to integrate it with Angular 6 and could not able to succeed in this occasion.
Main module [app.module.ts] script:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppMaterialModule } from './app-material.module';
import {
FormsModule,
ReactiveFormsModule
} from '../../node_modules/#angular/forms';
import { HeaderComponent } from './navigation/header/header.component';
import { FlexLayoutModule } from '#angular/flex-layout';
import { FooterComponent } from './navigation/footer/footer.component';
import { MobileSidemenuComponent } from './navigation/sidemenu/mobile-sidemenu/mobile-sidemenu.component';
import { LoginComponent } from './login/login.component';
import { PhonebookComponent } from './phonebook/phonebook.component';
import { TestWelcomePageComponent } from './test-welcome-page/test-welcome-page.component';
import { AppRoutingModule } from './app-routing.module';
import { FlashMessagesModule } from 'angular2-flash-messages';
import { FlashMessagesService } from 'angular2-flash-messages';
import { NgFlashMessagesModule } from 'ng-flash-messages';
import { MatDialogModule } from '#angular/material';
import { HttpModule } from '#angular/http';
import { TasksComponent } from './tasks/tasks.component';
import { NewsComponent } from './news/news.component';
import { AuthTokenInterceptor, ErrorInterceptor } from './interceptor';
import { RecordTaskFormInterceptor } from './interceptor';
import { PerformanceDialogComponent } from './performance-dialog/performance-dialog.component';
import { ProblemOverviewComponent } from './problem-overview/problem-overview.component';
import { TaskOrProblemTrackingComponent } from './task-or-problem-tracking/task-or-problem-tracking.component';
import { RecordDeviationComponent } from './record-deviation/record-deviation.component';
import { CreateInformationComponent } from './create-information/create-information.component';
import { AdminDomainSettingComponent } from './admin-domain-setting/admin-domain-setting.component';
import { AccountSettingComponent } from './account-setting/account-setting.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { NewsDialogComponent } from './news/news-dialog/news-dialog.component';
import { HomeComponent } from './home/home.component';
import { ProblemSolvingComponent } from './problem-solving/problem-solving.component';
import { ProblemStepperComponent } from './problem-solving/problem-stepper/problem-stepper.component';
import { DeviationFormComponent } from './problem-solving/deviation-form/deviation-form.component';
import { SpecificationFormComponent } from './problem-solving/specification-form/specification-form.component';
import { DescriptionFormComponent } from './problem-solving/description-form/description-form.component';
import { DirectcauseFormComponent } from './problem-solving/directcause-form/directcause-form.component';
import { AnalysisFormComponent } from './problem-solving/analysis-form/analysis-form.component';
import { ImplementationFormComponent } from './problem-solving/implementation-form/implementation-form.component';
import { FishboneDiagramComponent } from './problem-solving/fishbone-diagram/fishbone-diagram.component';
import { RecordTaskFormComponent } from './record-deviation/record-task-form/record-task-form.component';
import { RecordProblemFormComponent } from './record-deviation/record-problem-form/record-problem-form.component';
import { TreeDiagram } from 'angular2-tree-diagram';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
MobileSidemenuComponent,
FooterComponent,
LoginComponent,
PhonebookComponent,
TestWelcomePageComponent,
TasksComponent,
NewsComponent,
RecordTaskFormComponent,
PerformanceDialogComponent,
ProblemOverviewComponent,
TaskOrProblemTrackingComponent,
RecordDeviationComponent,
CreateInformationComponent,
AdminDomainSettingComponent,
AccountSettingComponent,
RecordProblemFormComponent,
DashboardComponent,
HomeComponent,
NewsDialogComponent,
ProblemSolvingComponent,
ProblemStepperComponent,
DeviationFormComponent,
SpecificationFormComponent,
DescriptionFormComponent,
DirectcauseFormComponent,
AnalysisFormComponent,
ImplementationFormComponent,
FishboneDiagramComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppMaterialModule,
FlexLayoutModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpModule,
HttpClientModule,
FlashMessagesModule.forRoot(),
NgFlashMessagesModule.forRoot(),
TreeDiagram
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthTokenInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: RecordTaskFormInterceptor, multi: true },
FlashMessagesService,
MatDialogModule
],
bootstrap: [AppComponent],
entryComponents: [LoginComponent, PhonebookComponent, NewsDialogComponent]
})
export class AppModule { }
Any kind of help will be appreciated. Thanks

Angular2 AOT issue when compiling for production release - issue with app module

Angular2 AOT issue when compiling for production release - issue with app module
I'm using angular2, typescript, html5 with systemjs
This is the angular2 seed app I'm using: https://github.com/mgechev/angular-seed
When I do this git bash command: npm run serve.prod.exp with creates a build package for AOT. I then get an error in git bash.
This is the error AOT build error I get:
This is my app.module:
import { NgModule } from '#angular/core';
import { routes } from './app.routes';
import { BrowserModule } from '#angular/platform-browser';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { FormsModule} from '#angular/forms';
import { APP_BASE_HREF, CommonModule, Location } from '#angular/common';
import { RouterModule } from '#angular/router';
import { MetadataModule } from 'ng2-metadata';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { CanActivateViaAuthGuard } from './guard.module';
//Pages
import { HomeModule } from './components/home/home.module';
import { ContactModule } from './components/contact/contact.module';
import { ForgotPasswordModule } from './components/forgotPassword/forgotPassword.module';
import { LoginModule } from './components/login/login.module';
import { RegisterModule } from './components/register/register.module';
import { NewJobsModule } from './components/newJobs/newJobs.module';
import { NewJobModule } from './components/newJob/newJob.module';
import { BlogModule } from './components/blog/blog.module';
import { BlogArticleModule } from './components/blogArticle/blogArticle.module';
import { SocialRegisterModule } from './components/socialRegister/socialRegister.module';
import { AdminModule } from './components/admin/admin.module';
import { ApplicationsModule } from './components/applications/applications.module';
import { ChangeEmailModule } from './components/changeEmail/changeEmail.module';
import { ChangePasswordModule } from './components/changePassword/changePassword.module';
import { CompanyModule } from './components/company/company.module';
import { CreateJobModule } from './components/createJob/createJob.module';
import { DashboardModule } from './components/dashboard/dashboard.module';
import { HelpModule } from './components/help/help.module';
import { InviteModule } from './components/invite/invite.module';
import { JobModule } from './components/job/jobs.module';
import { MessagesModule } from './components/messages/messages.module';
import { MessengerModule } from './components/messenger/messenger.module';
import { ProfileModule} from './components/profile/profile.module';
import { SearchJobsModule } from './components/searchJobs/searchJobs.module';
import { SearchUsersModule } from './components/searchUsers/searchUsers.module';
import { UserApplicationsModule } from './components/userApplications/userApplications.module';
import { SiteMapModule } from './components/sitemap/sitemap.module';
import { SplashModule } from './components/splash/splash.module';
import { PageNotFoundModule } from './components/pageNotFound/pageNotFound.module';
import { TermsModule } from './components/terms/terms.module';
import { PrivacyModule } from './components/privacy/privacy.module';
import { CompetitionModule } from './components/competition/competition.module';
import { FaqModule } from './components/faq/faq.module';
import { AboutModule } from './components/about/about.module';
import { DBSModule } from './components/dbs/dbs.module';
import { Module400 } from './components/400/400.module';
import { Module404 } from './components/404/404.module';
import { Module500 } from './components/500/500.module';
//Services and modules
import { AuthService } from './services/authService/authService';
import { MessageService } from './services/messageService/messageService';
import { UserService } from './services/userService/userService';
import { UserProfile } from './models/profile/profile';
import { JobService } from './services/jobService/jobService';
import { Job } from './models/job/job';
import { Environment } from './models/environment/environment';
//Shared
import { HeaderComponent } from './components/shared/header/header.module';
import { HeaderCompanyComponent } from './components/shared/headerCompany/headerCompany.module';
import { HeaderUserComponent } from './components/shared/headerUser/headerUser.module';
import { SideMenuUserComponent } from './components/shared/sideMenuUser/sideMenuUser.module';
import { SideMenuCompanyComponent } from './components/shared/sideMenuCompany/sideMenuCompany.module';
import { FooterModule } from './components/shared/footer/footer.module';
#NgModule({
imports: [BrowserModule, FormsModule, RouterModule, CommonModule, HttpModule, FooterModule, MetadataModule.forRoot(), RouterModule.forRoot(routes),
HomeModule,
ContactModule,
ForgotPasswordModule,
LoginModule,
RegisterModule,
NewJobsModule,
NewJobModule,
BlogModule,
BlogArticleModule,
SiteMapModule,
SocialRegisterModule,
ProfileModule,
SplashModule,
CompanyModule,
ChangeEmailModule,
ChangePasswordModule,
DashboardModule,
HelpModule,
InviteModule,
MessagesModule,
MessengerModule,
UserApplicationsModule,
SearchUsersModule,
ApplicationsModule,
JobModule,
CreateJobModule,
SearchJobsModule,
TermsModule,
PrivacyModule,
FaqModule,
Module400,
Module500,
Module404,
DBSModule,
CompetitionModule,
PageNotFoundModule,
AboutModule,
AdminModule
],
declarations: [AppComponent, HeaderComponent, HeaderUserComponent, SideMenuUserComponent, SideMenuCompanyComponent, HeaderCompanyComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'},
AuthService,
UserService,
UserProfile,
JobService,
Job,
MessageService,
Environment,
CanActivateViaAuthGuard
],
bootstrap: [AppComponent]
})
export class AppModule { }
*Let me know if you need to see anymore code from my app.
I just want to get this app built so I can run it in AOT and get fast loading time for first time the app loads. Currently its 4 seconds loading time.
App routes:
import { Routes } from '#angular/router';
import { HomeRoutes } from './components/home/index';
import { ContactRoutes } from './components/contact/index';
import { ForgotPasswordRoutes } from './components/forgotPassword/index';
import { LoginRoutes } from './components/login/index';
import { RegisterRoutes } from './components/register/index';
import { NewJobsRoutes } from './components/newJobs/index';
import { NewJobRoutes } from './components/newJob/index';
import { BlogRoutes } from './components/blog/index';
import { BlogArticleRoutes } from './components/blogArticle/index';
import { SocialRegisterRoutes } from './components/socialRegister/index';
import { AdminRoutes } from './components/admin/index';
import { ApplicationsRoutes } from './components/applications/index';
import { ChangeEmailRoutes } from './components/changeEmail/index';
import { ChangePasswordRoutes } from './components/changePassword/index';
import { CompanyRoutes } from './components/company/index';
import { CreateJobRoutes } from './components/createJob/index';
import { DashboardRoutes } from './components/dashboard/index';
import { HelpRoutes } from './components/help/index';
import { InviteRoutes } from './components/invite/index';
import { JobRoutes } from './components/job/index';
import { MessagesRoutes } from './components/messages/index';
import { MessengerRoutes } from './components/messenger/index';
import { ProfileRoutes } from './components/profile/index';
import { SearchJobsRoutes } from './components/searchJobs/index';
import { SearchUsersRoutes } from './components/searchUsers/index';
import { UserApplicationsRoutes } from './components/userApplications/index';
import { SiteMapRoutes } from './components/sitemap/index';
import { TermsRoutes } from './components/terms/index';
import { FAQRoutes } from './components/faq/index';
import { PrivacyRoutes } from './components/privacy/index';
import { CompetitionRoutes } from './components/competition/index';
import { PageNotFoundRoutes } from './components/pageNotFound/index';
import { AboutRoutes } from './components/about/index';
import { Routes400 } from './components/400/index';
import { Routes404 } from './components/404/index';
import { Routes500 } from './components/500/index';
import { DBSRoutes } from './components/dbs/index';
export const routes: Routes = [
...HomeRoutes,
...ContactRoutes,
...ForgotPasswordRoutes,
...LoginRoutes,
...RegisterRoutes,
...NewJobsRoutes,
...NewJobRoutes,
...BlogRoutes,
...BlogArticleRoutes,
...SiteMapRoutes,
...SocialRegisterRoutes,
...ProfileRoutes,
...CompanyRoutes,
...ChangeEmailRoutes,
...ChangePasswordRoutes,
...DashboardRoutes,
...HelpRoutes,
...InviteRoutes,
...MessagesRoutes,
...MessengerRoutes,
...UserApplicationsRoutes,
...SearchUsersRoutes,
...ApplicationsRoutes,
...JobRoutes,
...CreateJobRoutes,
...SearchJobsRoutes,
...AdminRoutes,
...TermsRoutes,
...PrivacyRoutes,
...FAQRoutes,
...CompetitionRoutes,
...Routes400,
...Routes404,
...Routes500,
...DBSRoutes,
...AboutRoutes,
...PageNotFoundRoutes
];
This is the main file with the bootstrap:
import { enableProdMode } from '#angular/core';
// The browser platform with a compiler
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
if (String('<%= BUILD_TYPE %>') === 'prod') { enableProdMode(); }
platformBrowserDynamic().bootstrapModule(AppModule/*, options*/);