Angular 6 tree diagram - javascript

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

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

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

Error: BrowserModule has already been loaded. in MDB-Angular Lazy Loading

i am facing this problem while creating the new project on MDB angular .
I have created multiple modules like public , tutor and student . public module is not lazy loaded while others are lazy loaded . public module is working perfect .
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-
browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AgmCoreModule } from '#agm/core';
import { AppComponent } from './Main/app.component';
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { PublicModule } from './public/public.module';
import { PageNotFoundComponent } from './Main/page-not-found/page-not-
found.component';
import { ToastModule } from 'ng-uikit-pro-standard';
import { CoreModule } from './core/core.module';
#NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
imports: [
PublicModule,
CoreModule,
AppRoutingModule,
BrowserModule,
ToastModule.forRoot(),
BrowserAnimationsModule,
FormsModule,
SharedModule,
AgmCoreModule.forRoot({
// https://developers.google.com/maps/documentation/javascript/get-api-
key?hl=en#key
apiKey: 'Your_api_key'
})
],
bootstrap: [AppComponent],
schemas: [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { PageNotFoundComponent } from './Main/page-not-found/page-not-
found.component';
const routes: Routes = [
{ path: 'tutor', loadChildren: './tutor/tutor.module#TutorModule' },
// { path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
// { path: '**', component: PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '#angular/core';
import { TutorRoutingModule } from './tutor-routing.module';
import { SharedModule } from '../shared/shared.module';
import { TutorLayoutComponent } from './tutor-layout/tutor-
layout.component';
#NgModule({
declarations: [TutorLayoutComponent],
imports: [
SharedModule,
TutorRoutingModule
]
})
export class TutorModule { }
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { TutorLayoutComponent } from './tutor-layout/tutor-
layout.component';
const routes: Routes = [
{path: '', component: TutorLayoutComponent}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TutorRoutingModule { }
I want to lazy load all modules except my public module.But i don't know why it is showing me the message that Browser Module Is already loaded . i have already tried multiple tries to solve it .

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

Categories