Angular CLI (AOT) gives error: ERROR in Cannot determine the module for class

Question

I have recently migrated my project to use Angular CLI to package my project. It works fine using "ng build" but when I try to use "ng build --prod" (which in turn uses Angular AOT and other additional steps) I get these errors:

ERROR in Cannot determine the module for class CustomDialog in F:/depot/depot/code/main/web/CedarsReport/src/a
pp/dialogs/customDialog.ts! Add CustomDialog to the NgModule to fix it.
Cannot determine the module for class ConfirmDialog in F:/depot/depot/code/main/web/CedarsReport/src/app/dialo
gs/confirmDialog.ts! Add ConfirmDialog to the NgModule to fix it.
Cannot determine the module for class EditUserDialog in F:/depot/depot/code/main/web/CedarsReport/src/app/dial
ogs/editUserDialog.ts! Add EditUserDialog to the NgModule to fix it.
Cannot determine the module for class LoginDialog in F:/depot/depot/code/main/web/CedarsReport/src/app/dialogs
/loginDialog.ts! Add LoginDialog to the NgModule to fix it.
Cannot determine the module for class EditAllControlsDlg in F:/depot/depot/code/main/web/CedarsReport/src/app/
dialogs/editAllControlsDlg.ts! Add EditAllControlsDlg to the NgModule to fix it.
Cannot determine the module for class EmptyTemplateDlg in F:/depot/depot/code/main/web/CedarsReport/src/app/di
alogs/emptyDialogTemplate.ts! Add EmptyTemplateDlg to the NgModule to fix it.
Cannot determine the module for class PopupSkeleton in F:/depot/depot/code/main/web/CedarsReport/src/app/direc
tives/popupSkeleton.ts! Add PopupSkeleton to the NgModule to fix it.

However, most of these files ARE referenced in a module called CRDialogs.module.ts:

import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common'; // ngFor, ngIf, ngStyle, and so on

import { Ng2Bs3ModalModule, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';

    // Some dialogs use directives we've created
import { CRDirectives } from '../directives/CRDirectives.module';   

    // What we want to declare and export. Also, anything in 'imports' below is made available to all of these components
import { ChangePasswordDialog } from "./changePasswordDialog"
import { ConfirmDialog } from "./ConfirmDialog"
import { CreateShortcutDialog } from "./CreateShortcutDialog"
import { CustomDialog } from "./CustomDialog"
import { EditControlDlg } from "./EditControlDlg"
import { EditSectionDlg } from "./EditSectionDialog"
import { EditSitesDialog } from "./EditSitesDialog"
import { StandardFieldDialog } from "./editStandardFieldDialog"
import { EditUserDialog } from "./EditUserDialog"
import { ErrorsDialog } from "./ErrorsDialog"
import { GenericListDlg } from "./GenericListDialog"
import { LoginDialog } from "./LoginDialog"
import { ReferringPhysDialog } from "./ReferringPhysDialog"
import { SignReportDlg } from "./SignReportDlg"


@NgModule(
{
    imports: [CommonModule, CRDirectives, Ng2Bs3ModalModule],       // Other modules to import

    declarations: [  
        ChangePasswordDialog, ConfirmDialog, CreateShortcutDialog, CustomDialog, EditControlDlg, EditSectionDlg, EditSitesDialog, 
        EditUserDialog, StandardFieldDialog, ErrorsDialog, GenericListDlg, LoginDialog, ReferringPhysDialog, SignReportDlg
    ],

    exports: [ 
        ChangePasswordDialog, ConfirmDialog, CreateShortcutDialog, CustomDialog, EditControlDlg, EditSectionDlg, EditSitesDialog,
        EditUserDialog, StandardFieldDialog, ErrorsDialog, GenericListDlg, LoginDialog, ReferringPhysDialog, SignReportDlg
    ]
})

export class CRDialogs {}

And this module in turn is referenced in my app.module.ts:

import { CRGlobals } from "./globals"

[...]

@NgModule({
    declarations: [
        CSReportMain,
        AppTestTemp
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        CRDirectives,
        **CRDialogs,**
        CRPages,

       [...]
    ],
    providers: [
        CRGlobals
    ],
    bootstrap: [CSReportMain]
})

Here it 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);

So why am I getting this error?

Answer 1

in the app.module.ts have you try to do the actual imports instead of just referencing them back to CRDialogs.module.ts I also noticed that in main.ts you are only importing the app.module.ts, you could probably try to import the CRDialogs.module.ts there first before you do any importing inside the app.module.ts.

I'm new to Angular and I just fixed a similar issue, my problem was that I didn't do the correct importing in the app.model.ts I hope this helps