Build Error "Type .... is part of the declarations of 2 modules: AppModule


#1

Hello i need hep as i am not able to do a prod build on my App

getting a error that is telling me my components are declared twice and not sure what i can do to fix it. Please can you help

below is the detailed error

Error: Type CommunitiesSlidesComponent in C:/GitHub/CommunitiesV3/src/components/communities-slides/communities-slides.ts is part of the declarations of 2 modules: AppModule in C:/GitHub/CommunitiesV3/src/app/app.module.ts and CommunitiesSlidesComponentModule in C:/GitHub/CommunitiesV3/src/components/communities-slides/communities-slides.module.ts! Please consider moving CommunitiesSlidesComponent in C:/GitHub/CommunitiesV3/src/components/communities-slides/communities-slides.ts to a higher module that imports AppModule in C:/GitHub/CommunitiesV3/src/app/app.module.ts and CommunitiesSlidesComponentModule in C:/GitHub/CommunitiesV3/src/components/communities-slides/communities-slides.module.ts. You can also create a new NgModule that exports and includes CommunitiesSlidesComponent in C:/GitHub/CommunitiesV3/src/components/communities-slides/communities-slides.ts then import that NgModule in AppModule in C:/GitHub/CommunitiesV3/src/app/app.module.ts and CommunitiesSlidesComponentModule in C:/GitHub/CommunitiesV3/src/components/communities-slides/communities-slides.module.ts.
    at syntaxError (C:\GitHub\CommunitiesV3\node_modules\@angular\compiler\bundles\compiler.umd.js:1550:34)
    at CompileMetadataResolver._addTypeToModule (C:\GitHub\CommunitiesV3\node_modules\@angular\compiler\bundles\compiler.umd.js:14655:31)
    at C:\GitHub\CommunitiesV3\node_modules\@angular\compiler\bundles\compiler.umd.js:14543:27
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (C:\GitHub\CommunitiesV3\node_modules\@angular\compiler\bundles\compiler.umd.js:14534:54)
    at addNgModule (C:\GitHub\CommunitiesV3\node_modules\@angular\compiler\bundles\compiler.umd.js:23050:58)
    at C:\GitHub\CommunitiesV3\node_modules\@angular\compiler\bundles\compiler.umd.js:23061:14
    at Array.forEach (<anonymous>)
    at _createNgModules (C:\GitHub\CommunitiesV3\node_modules\@angular\compiler\bundles\compiler.umd.js:23060:26)
    at analyzeNgModules (C:\GitHub\CommunitiesV3\node_modules\@angular\compiler\bundles\compiler.umd.js:22935:14)

Really stuck, will appreciate any help


#2

Hello,

it seems that you have your component declared in app.module.ts and whatever.module.ts

Iy you wanna use eagerly loaded component, then declare in app-module.ts and use it as object.

If you wanna use lazy loaded component, then decare it in it’s whatever.module.ts and use it as string.

You can mix both types for different components in an app, but never both for the same component.

Best regards, anna-liebt.


#3

See:


#4

I am not getting it guys what am i doing wrong.

This is my app module

import { Pro } from '@ionic/pro';
import { Injectable, Injector, NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
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 { CloudModule, CloudSettings } from '@ionic/cloud-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Facebook } from '@ionic-native/facebook';
import { ImagePicker } from '@ionic-native/image-picker';
import { Keyboard } from '@ionic-native/keyboard';
import { LaunchNavigator } from '@ionic-native/launch-navigator';
import { Deeplinks } from '@ionic-native/deeplinks';
import { Firebase } from '@ionic-native/firebase';
import { GooglePlus } from '@ionic-native/google-plus';
import { TabsPage } from '../pages/tabs/tabs';
import { CommunityPage } from '../pages/community/community';
import { LiveFeed } from '../pages/live-feed/live-feed';
import { MyCommunitiesPage } from '../pages/my-communities/my-communities';
import { SettingsPage } from '../pages/settings/settings';
import { UserSearchComponent } from '../pages/user-search-component/user-search-component';
import { UserLocation } from '../pages/user-location/user-location';
import { Login } from '../pages/login/login';
import { OpenGraphServiceProvider } from '../providers/open-graph-service/open-graph-service';
import { GeoProviderServiceProvider } from '../providers/geo-provider-service/geo-provider-service';
import { BaseLinkProvider } from '../providers/base-link/base-link';
import { ErrorLogServiceProvider } from '../providers/error-log-service/error-log-service';
import { FacebookApiProvider } from '../providers/facebook-api/facebook-api';
import { EventFeedPage } from '../pages/event-feed/event-feed';
import { EventProvider } from '../providers/event/event';
import { Camera } from '@ionic-native/camera';
import { MediaCapture } from '@ionic-native/media-capture';
import { FileTransfer } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { CameraPluginProvider } from '../providers/camera-plugin/camera-plugin';
import { HelperProvider } from '../providers/helper/helper';
import { IonicStorageModule } from '@ionic/storage';
import { NotificationsPage } from '../pages/notifications/notifications';


/*
const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'bb16c680'
  },
  'auth': {
    'facebook': {
      'scope': ['permission1', 'permission2']
    }
  }
}*/

Pro.init('caa89fcc', {
  appVersion: '0.0.1'
});

@Injectable()
export class CommunitiesErrorHandler implements ErrorHandler {
  ionicErrorHandler: IonicErrorHandler;

  constructor(injector: Injector) {
    try {
      this.ionicErrorHandler = injector.get(IonicErrorHandler);
    } catch (e) {
      // Unable to get the IonicErrorHandler provider, ensure
      // IonicErrorHandler has been added to the providers list below
    }
  }

  handleError(err: any): void {
    Pro.monitoring.handleNewError(err);
    // Remove this if you want to disable Ionic's auto exception handling
    // in development mode.
    this.ionicErrorHandler && this.ionicErrorHandler.handleError(err);
  }
}




@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    CommunityPage,
    UserSearchComponent,
    LiveFeed,
    Login,
    UserLocation,
    MyCommunitiesPage,
    SettingsPage,
    EventFeedPage,
    NotificationsPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    //CloudModule.forRoot(cloudSettings),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPage,
    CommunityPage,
    UserSearchComponent,
    LiveFeed,
    Login,
    UserLocation,
    MyCommunitiesPage,
    SettingsPage,
    NotificationsPage,
    EventFeedPage
  ],
  providers: [
    StatusBar,
    Deeplinks,
    SplashScreen,
    Geolocation,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    OpenGraphServiceProvider,
    GeoProviderServiceProvider,
    BaseLinkProvider,
    ErrorLogServiceProvider,
    Facebook,
    FacebookApiProvider,
    EventProvider,
    Camera,
    Keyboard,
    ImagePicker,
    MediaCapture,
    FileTransfer,
    File,
    CameraPluginProvider,
    HelperProvider,
    Firebase,
    GooglePlus,
    LaunchNavigator,
    IonicErrorHandler,
    [{ provide: ErrorHandler, useClass: CommunitiesErrorHandler }]
  ]
})
export class AppModule { }

I made a new component module and added all components in there

import { NgModule } from '@angular/core';
/*
import { MarkerNewPostComponent } from './marker-new-post-component/marker-new-post-component';
import { UserCommentsComponent } from './user-comments-component/user-comments-component';
import { UserPostActionComponent } from './user-post-action-component/user-post-action-component';
import { UserPostsComponent } from './user-posts-component/user-posts-component';
import { UserTagComponent } from './user-tag-component/user-tag-component';
import { UserSearchItemComponent } from './user-search-item-component/user-search-item-component';
import { NewCommentComponent } from './new-comment-component/new-comment-component';
import { LoginComponent } from './login-component/login-component';
import { RegisterUserComponent } from './register-user-component/register-user-component';
import { CommunityItemComponent } from './community-item/community-item';
import { UploadedMediaPostComponent } from './uploaded-media-post/uploaded-media-post';
import { NewEventComponent } from './new-event/new-event';
import { ImageUploadComponent } from './image-upload/image-upload';
import { VideoUploadComponent } from './video-upload/video-upload';
import { LocalGalleryUploadComponent } from './local-gallery-upload/local-gallery-upload';
import { SocialSharingPopoverComponent } from './social-sharing-popover/social-sharing-popover';
import { EventPostComponent } from './event-post/event-post';
import { ForgetPasswordComponent } from './forget-password/forget-password';
import { CommunitiesSlidesComponent } from './communities-slides/communities-slides';
import { CommunityTopicMarkerComponent } from './community-topic-marker/community-topic-marker';
import { CreateTopicComponent } from './create-topic/create-topic';
import { ViewTopicsComponent } from './view-topics/view-topics';
*/


@NgModule({
    declarations: [
       /*
        UserSearchItemComponent,
        MarkerNewPostComponent,
        UserCommentsComponent,
        UserPostActionComponent,
        UserPostsComponent,
        UserTagComponent,
        NewCommentComponent,
        LoginComponent,
        RegisterUserComponent,
        CommunityItemComponent,
        UploadedMediaPostComponent,
        NewEventComponent,
        ImageUploadComponent,
        VideoUploadComponent,
        LocalGalleryUploadComponent,
        SocialSharingPopoverComponent,
        EventPostComponent,
        ForgetPasswordComponent,
        CommunitiesSlidesComponent,
        CommunityTopicMarkerComponent,
        CreateTopicComponent,
        ViewTopicsComponent
       */
    ],
    imports: [],
    exports: [
        /*
        UserSearchItemComponent,
        MarkerNewPostComponent,
        UserCommentsComponent,
        UserPostActionComponent,
        UserPostsComponent,
        UserTagComponent,
        NewCommentComponent,
        LoginComponent,
        RegisterUserComponent,
        CommunityItemComponent,
        UploadedMediaPostComponent,
        NewEventComponent,
        ImageUploadComponent,
        VideoUploadComponent,
        LocalGalleryUploadComponent,
        SocialSharingPopoverComponent,
        EventPostComponent,
        ForgetPasswordComponent,
        CommunitiesSlidesComponent,
        CommunityTopicMarkerComponent,
        CreateTopicComponent,
        ViewTopicsComponent
       */
    ]
})
export class ComponentsModule { }

This appears to be a significant change, i have been working on this app for a year i am not sure how to get back on again. Can someone please let me know steps to get this going

I will really appreciate it


#5

@SaeedAnsari Your CommunitiesSlidesComponent is probably declared in another module besides ComponentsModule. Check where else it is declared. It should be in 1 module only.

If you are using an IDE/Editor, see if it has the option to find the referencies, or just do a search in your src directory for files with CommunitiesSlidesComponent to find where it is used.