I want to use Owl Carousel slider in my Angular page. I have installed Owl Carousel and imported all needed code. However, I get this error when I run the file:
Unexpected value 'undefined' imported by the module 'AppModule' angular js 6
Can anyone kindly find the error for me?
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { HeaderComponent } from './header/header.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { AppRoutingModule } from './app-routing.module';
import {OwlCarousel} from 'angular-owl-carousel2';
import { SlickModule } from 'ngx-slick';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
HeaderComponent,
NavbarComponent,
FooterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
OwlCarousel,
SlickModule.forRoot()
//RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Related
I am using angular, and I have this two script here inside index.html, theses scripts are used in the navbar component ( this navebar is inside "shared module" ,
in app.module :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
//modules
import { SharedModule } from './shared/shared.module';
#NgModule({
declarations: \[
AppComponent
\],
imports: \[
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
SharedModule,
\],
providers: \[\],
bootstrap: \[AppComponent\]
})
export class AppModule { }
in app.routing.module
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { FeaturesComponent } from './features/features.component';
const routes: Routes = \[
{
path: 'feature',
component: FeaturesComponent,
loadChildren: () =\> import('./features/features.module').then(m =\> m.FeaturesModule) },
\];
#NgModule({
imports: \[RouterModule.forRoot(routes)\],
exports: \[RouterModule\]
})
export class AppRoutingModule { }
in features module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FeaturesRoutingModule } from './features-routing.module';
import { FeaturesComponent } from './features.component';
mport { SharedModule } from '../shared/shared.module';
//component
import { DashboardComponent } from './dashboard/dashboard.component';
#NgModule({
declarations: \[
FeaturesComponent,
DashboardComponent
\],
imports: \[
CommonModule,
FeaturesRoutingModule,
SharedModule
\]
})
export class FeaturesModule { }
so when i use <app-navbar></app-navbar> in app.component.html everything works fine
bu when i use <app-navbar></app-navbar> in features.component.html the script used in the navbar is not working like i can see the navbar and all but the script declared in the index is not working
I want the <app-navbar> in my features module
i have 2 libs.
1 - ui-templates
2 - ui-components
To import ui-templates from app, im doing that:
import {UiTemplatesModule} from '#growerdiaries-web/ui-templates';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, UiTemplatesModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
And everything works fine.
But now, i want to use some components of ui-components into ui-templates.
To do that, on ui-templates module, i created this code:
//if i use #growerdiaries-web/ui-components dosent works. Dosent find the reference.
import {UiComponentsModule} from '../../../ui-components/src/lib/ui-components.module';
import { LoginTemplateComponent } from './login-template/login-template.component';
#NgModule({
imports: [CommonModule, UiComponentsModule],
declarations: [
LoginTemplateComponent
],
exports: [
LoginTemplateComponent
],
})
export class UiTemplatesModule {}
Why module cant find the reference from ui-components library direcly? Im doing something wrong?
ui-components module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ButtonComponent } from './button/button.component';
import { InputComponent } from './input/input.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
#NgModule({
imports: [CommonModule],
declarations: [
ButtonComponent,
InputComponent,
HeaderComponent,
FooterComponent
],
exports: [
ButtonComponent,
InputComponent,
HeaderComponent,
FooterComponent
],
})
export class UiComponentsModule {}
It was necessary to clear the visual studio code cache. Resolved.
Hi my application was working fine till i added NgxDatetimeRangePickerModule, Once i added it in my shared module , I am getting BrowserModule has already been loaded error. Borwser module is present in only app.module and not in any module. What might be the issue.
Error :
vendor.js:77185 ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
App.module.ts
import { NgModule, ApplicationModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { NgHttpLoaderModule } from 'ng-http-loader';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 3rd party module
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
// import { Cardscomponent } from './cards/cards.component';
import { NotificationToastComponent } from './_shared/notification-toast/notification-toast.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './_services/auth.guard';
import { AuthInterceptor } from './_services/auth.interceptor';
import { ErrorInterceptor } from './_services/error.interceptor';
import { SharedModule } from './_shared/shared.module';
#NgModule({
declarations: [
AppComponent,
NotificationToastComponent,
LoginComponent,
],
imports: [
SharedModule,
BrowserModule,
BrowserAnimationsModule,
ApplicationModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
NgHttpLoaderModule.forRoot(),
NgbModule,
],
providers: [
AuthGuard,
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
],
entryComponents: [
NotificationToastComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
My Shared Module:
import { NgModule } from '#angular/core';
import { FilterDataPipe } from '../_pipes/filter-data.pipe';
import { AngularMaterialModule } from '../angular-material.module';
import { CommonModule } from '#angular/common';
import { AngularKendoModule } from '../angular-kendo.module';
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
import { MustMatchDirective } from '../_helpers/must-match.directive';
#NgModule({
imports:[
CommonModule,
AngularMaterialModule,
AngularKendoModule,
],
declarations: [
FilterDataPipe,
MustMatchDirective
],
exports: [
CommonModule,
FilterDataPipe,
AngularMaterialModule,
MustMatchDirective,AngularKendoModule,
NgxDatetimeRangePickerModule
]
})
export class SharedModule {}
My child Module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { Cardscomponent } from './cards.component';
import { SharedModule } from '../_shared/shared.module';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { CardsRoutingModule } from './cards-routing.module';
import { CardDetailsComponent } from './card-details/card-details.component';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
#NgModule({
imports: [
CommonModule,
SharedModule,
FormsModule,
ReactiveFormsModule,
CardsRoutingModule,
NgbModule,
NgMultiSelectDropDownModule.forRoot(),
],
declarations: [Cardscomponent,CardDetailsComponent]
})
export class CardsModule { }
Remove NgxDatetimeRangePickerModule from app.module move it to shared module.
In shared.module import NgxDatetimeRangePickerModule.forRoot() inside import section.
Thanks
Rahul Tokase
Error
compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden">
I have a NavbarComponent and a FooterComponent that I want to move into the SharedModule, to keep the root app.module cleaner.
app.module
import { AdminComponent } from './admin/admin.component';
// import { NavbarComponent } from './navbar/navbar.component';
// import { FooterComponent } from './footer/footer.component';
// Modules
import { DashboardModule } from './dashboard/dashboard.module';
import { HomeModule } from './home/home.module';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
RegisterComponent,
PasswordResetComponent,
ResetPasswordComponent,
AdminComponent,
// NavbarComponent,
// FooterComponent,
share.module
However, once I moved those components into here, and update their paths correctly ./ -> ../ the app breaks.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { NavbarComponent } from '../navbar/navbar.component';
import { FooterComponent } from '../footer/footer.component';
import { TermsComponent } from './terms.component';
import { PageNotFoundComponent } from './not-found.component';
import { PrivacyPolicyComponent } from './privacy-policy.component';
#NgModule({
imports: [
CommonModule
],
declarations: [
NavbarComponent,
FooterComponent,
TermsComponent,
PageNotFoundComponent,
PrivacyPolicyComponent
]
})
export class SharedModule { }
navbar.component.ts
import { Component, OnInit } from '#angular/core';
import { AuthService } from '../auth.service';
import { environment } from '../../environments/environment';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
isHidden = true;
oauthUrl = this.authService.generateOauthUrl();
constructor(public authService: AuthService) { }
ngOnInit() {
}
logout() {
sessionStorage.clear();
}
}
Then a couple of lines with the [ngbCollapse] in navbar.component.html
<div *ngIf="!authService.isLoggedIn()" class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isHidden">
I think this has something to do with the relative paths, any ideas?
To use ng-bootstrap components and directives in Angular templates, you need to import the NgbModule. In your case, you should import it in the SharedModule. Also, in order to use the shared components in other parts of the application, you should export them from the SharedModule and import the SharedModule in the modules when the components are to be used.
shared.module.ts
...
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
imports: [
CommonModule,
NgbModule
],
declarations: [
NavbarComponent,
FooterComponent,
TermsComponent,
PageNotFoundComponent,
PrivacyPolicyComponent
],
exports: [
NavbarComponent,
FooterComponent,
TermsComponent,
PageNotFoundComponent,
PrivacyPolicyComponent
]
})
export class SharedModule { }
app.module.ts
import { SharedModule } from './shared/shared.module';
...
#NgModule({
imports: [
SharedModule,
...
],
...
})
Note: if you want to use ng-bootstrap components and directives in templates outside of the SharedModule, you should add NgbModule to the exports of the SharedModule.
To work with ng-bootsrap you should add this dependency first :
ng add #ng-bootstrap/ng-bootstrap
source: https://ng-bootstrap.github.io/#/home
then imporst the module as follows :
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
imports: [
CommonModule,
NgbModule
],
...
In angular 1.4 i was using ng6 boilerplate and it was generating an awesome structure, like:
app
common
components
services
etc...
Now i'm trying to learn angular2 with typescript. I'm using Angular CLI.
And i wanna port some of structure from angular 1.4: i mean to separate, for example, select-component from customer-component etc.
And i created such structure:
components - is a module, customer is a module, list - is a component.
How in my app.component.html i can use list-component? Like:
<app-customer-list></app-customer-list>
I have troubles with importing modules & components.
I do it in a such way:
**app.module.ts**
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
declarations: []
})
export class ComponentsModule { }
--
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
--
**list.component.ts**
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-customer-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
What i do wrong? How can i correctly import them?
You are forgetting to export your components/modules in those modules that you are sharing with other modules:
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent],
exports: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
exports: [CustomerModule]
declarations: []
})