We Keep Coding

Angular Change Component Declarations Location

this might be a dumb question but there it goes:
In my angular project i want to change my components declarations from angular.module.ts to modules/modules.modules.ts.
In order to make my src/app structure look like:
src/
app/
. modules/
. . about/...
. . banner/...
. . contact/...
. . portfolio/...
. . services/...
. . testimonial/...
. . modules.module.ts
. app-routing.module.ts
. app.component.html
. app.component.scss
. app.component.spec.ts
. app.component.ts
. app.module.ts
In Resume want to move all my component declarations to modules/modules.module.ts
This is my best attemp so far:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
// Modules Components
import { BannerComponent } from './banner/banner.component';
import { ServicesComponent } from './services/services.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { TestimonialComponent } from './testimonial/testimonial.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
#NgModule({
imports: [CommonModule],
declarations: [
AboutComponent,
BannerComponent,
ContactComponent,
PortfolioComponent,
ServicesComponent,
TestimonialComponent,
],
exports: [
AboutComponent,
BannerComponent,
ContactComponent,
PortfolioComponent,
ServicesComponent,
TestimonialComponent,
],
})
export class ModulesModule {}
app.module.ts:
// Angular CLI
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
// App Component
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Pages Components
import { HomePageComponent } from './pages/home-page/home-page.component';
import { AboutPageComponent } from './pages/about-page/about-page.component';
import { ServicesPageComponent } from './pages/services-page/services-page.component';
import { PortfolioPageComponent } from './pages/portfolio-page/portfolio-page.component';
import { PortfolioSinglePageComponent } from './pages/portfolio-single-page/portfolio-single-page.component';
import { ContactPageComponent } from './pages/contact-page/contact-page.component';
// Modules Components
//import { BannerComponent } from './modules/banner/banner.component';
//import { ServicesComponent } from './modules/services/services.component';
//import { PortfolioComponent } from './modules/portfolio/portfolio.component';
//import { TestimonialComponent } from './modules/testimonial/testimonial.component';
//import { AboutComponent } from './modules/about/about.component';
//import { ContactComponent } from './modules/contact/contact.component';
import { ModulesModule } from './modules/modules.module';
// Angular Material
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
// Third Party
import { OwlModule } from 'ngx-owl-carousel';
import { NgxSpinnerModule } from 'ngx-spinner';
// PWA
import { ServiceWorkerModule } from '#angular/service-worker';
// Environment
import { environment } from '../environments/environment';
// Firebase
import { AngularFireModule } from '#angular/fire';
import { AngularFireDatabaseModule } from '#angular/fire/database';
#NgModule({
declarations: [
AppComponent,
HomePageComponent,
AboutPageComponent,
ServicesPageComponent,
ContactPageComponent,
PortfolioPageComponent,
PortfolioSinglePageComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
ModulesModule, // here
BrowserAnimationsModule,
MaterialModule,
OwlModule,
NgxSpinnerModule,
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: true, //environment.production,
}),
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Please note that i just changes the names to simplify the question. And it was fully working when the declarations wore in the app.module.ts

You need to export each component in ModulesModule. This strategy is similar to what is described in Sharing modules. Also it looks like the errors you are receiving are unknown element errors surrounding owl carousel, angular router, and possibly other modules. Try creating a SharedModule that imports/exports these third party modules as well as any shared components and import it into your other modules where they are used:
Shared:
#NgModule({
imports: [CommonModule],
declarations: [],
exports: [CommonModule, OwlModule, RouterModule]
})
export class SharedModule { }
Modules:
#NgModule({
imports: [SharedModule],
declarations: [
Component1,
Component2,
],
exports: [
Component1,
Component2,
],
})
export class ModulesModule { }
Hopefully that helps!

According to your error you need to:
Import RouterModule in your ModulesModule
Import OwlModule in your ModulesModule
Since I am old and my eyesight is not the best I might have missed some :)

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.

Error trying to use a shared module in Angular 9 make my components cant recognise my material module

I have created a shared module to modularize my app so in case i want to use for example a Material component i can have it in other module by import it, the problem is when i do that give this kind of error If 'mat-menu' is an Angular component, then verify that it is part of this module. How can i solve it?.In the past without the shared module it worked perfectly but now no, and Its required to be with the shared module because its for homework
Below i will let my three modules
App Module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//My imports
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { UsersDashboardComponent } from './components/users-dashboard/users-dashboard.component';
import { AdminDashboardComponent } from './components/admin-dashboard/admin-dashboard.component';
import { RouterModule } from '#angular/router';
import { HttpClientModule} from '#angular/common/http';
import { HomeAdminComponent } from './auth/home-admin/home-admin.component';
import { HomeComponent } from './auth/home/home.component';
import { CoreModule } from './../app/core/core.module';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AdminDashboardComponent,
UsersDashboardComponent,
HomeAdminComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
BrowserAnimationsModule,
RouterModule,
HttpClientModule,
CoreModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Auth Module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../shared/shared.module';
import { AuthRoutingModule } from './auth-routing.module';
import { HomeComponent } from 'src/app/auth/home/home.component';
import { HomeAdminComponent } from 'src/app/auth/home-admin/home-admin.component';
#NgModule({
declarations: [HomeComponent,HomeAdminComponent],
imports: [
CommonModule,
AuthRoutingModule,
SharedModule,
],
})
export class AuthModule { }
Shared module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MaterialModule } from 'src/app/shared/material/material.module';
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
declarations: [],
imports: [
CommonModule,
MaterialModule,
ReactiveFormsModule
],
exports: [
MaterialModule,
ReactiveFormsModule
]
})
export class SharedModule { }

To avoid this problem you need to Add SharedModule as an import in all the FeatureModules where your components reside as declarations. Same like you have done in AuthModule. And also all the material modules imported into the MaterialModule should be exported in exports.

I solve it putting the SharedModule into the imports of the AppModule

I would recommend to create your own custom Components build on top whatever module you are using (in your case it is angular material) inside the shared module and then export these components and import your shared module in any other modules then, use these components, this will help you in the future if you decided to use another library instead of angular material or if you want to build some custom design.

Runtime Error: Cannot find module "./config"

Hi Guys i'm trying to make changes on an Ionic 3 App, i have downgraded my node and ran npm install but i keep getting this error on my browser any time i run ionic serve.
Please Help
Runtime Error: Cannot find module "./config"
Stack
Error: Cannot find module "./config"
at Object.<anonymous> (http://localhost:8100/build/main.js:95985:7)
at __webpack_require__ (http://localhost:8100/build/main.js:48:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:139326:70)
at __webpack_require__ (http://localhost:8100/build/main.js:48:30)
at http://localhost:8100/build/main.js:140:18
at http://localhost:8100/build/main.js:143:10
App.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { FormsModule } from "#angular/forms";
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { IonicStorageModule } from '#ionic/storage';
import { HttpModule } from "#angular/http";
import { MyApp } from './app.component';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StorageService } from "../providers/storage";
import { Auth } from "../providers/auth";
import { Api } from "../providers/api";
import { DatabaseService } from "../providers/database";
import { AngularFireModule } from "angularfire2";
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { firebaseConfig } from './config';
import { ValidateProvider } from '../providers/validate/validate';
#NgModule({
declarations: [
MyApp,
],
imports: [
BrowserModule,
HttpModule,
FormsModule,
IonicStorageModule.forRoot(),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
StorageService,
DatabaseService,
Auth,
Api,
{provide: ErrorHandler, useClass: IonicErrorHandler},
ValidateProvider
]
})
export class AppModule {}
I'm still new to this, and i know a'm just missing something please help out.
Thanks

in your app.module.ts
remove import { firebaseConfig } from './config';
or try to remove firebase and install it again : npm plugin remove

Just Make sure the Firebase Configuration is linked properly to the app.module.ts
Thanks

Unexpected value 'undefined' imported by the module 'AppModule' at syntaxError

I am Beginner and following tutorials, in which i am working in angular with firebase. I use HTML table which was working fine but after using angular-4-data-table i got following error
Unexpected value 'undefined' imported by the module 'AppModule' in console and with this error
This is my app.module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
declarations: [
AppComponent,
BsNavbarComponent,
HomeComponent,
ProductsComponent,
ShoppingCartComponent,
CheckCheckoutComponent,
OrderSucessComponent,
MyOrderComponent,
AdminProductsComponent,
AdminOrdersComponent,
LoginComponent,
ProductFormComponent
],
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot()
],
providers: [
AuthService,
AuthGaurd,
AdminAuthGuard,
UserService,
CategoryService,
ProductsComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
and this is Import in component
import { Component, OnInit, OnDestroy } from '#angular/core';
import { ProductService } from 'src/app/product.service';
import { Subscription } from 'rxjs';
import { Product } from 'src/app/models/product';
import { DataTableResource } from 'angular-4-data-table';
I also watched previously asked questions on this forum but did not work for me.

Your AppModule the decorator NgModule.
A typical ngModule looks like this:
#NgModule({
declarations: [...],
imports: [...]
})
export class AppModule{}
Pay attention that the imports that look like
import { BrowserModule } from '#angular/platform-browser'; are meant to "include" the modules from different files but without a declaration like the one above you cannot use them in the current NgModule.
In the end, your AppModule should look like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import {RouterModule} from '#angular/router';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { FormsModule} from '#angular/forms';
import { CustomFormsModule } from 'ng2-validation';
import { DataTableModule } from 'angular-4-data-table';
#NgModule({
imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule
....
],
declarations: [....]
})
export class AppModule{}

I was facing same problem with Angular-4-Data-table
Actually i was using a higher version of angular which was not working with angular-4-data-table so i try this and upgrade
npm install angular5-data-table --save
In App Module i use
import {DataTableModule} from 'angular5-data-table';
And same in component
import { DataTableResource } from 'angular5-data-table';
it worked for me hopefully it will work for you.

imports: [
BrowserModule,
FormsModule,
DataTableModule,
CustomFormsModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
NgbModule.forRoot(),
]
problem is in last comma remove comma after NgbModule.forRoot()