Error: AppModule is not an NgModule

Question

I updated version 2.4.1 recently.

"@angular/common": "~2.4.1",
"@angular/compiler": "~2.4.1",
"@angular/compiler-cli": "^2.4.1",
"@angular/core": "~2.4.1",
"@angular/forms": "~2.4.1",
"@angular/http": "~2.4.1",
"@angular/platform-browser": "~2.4.1",
"@angular/platform-browser-dynamic": "~2.4.1",
"@angular/router": "~3.4.1",
"angular-cli": "^1.0.0-beta.24"

When I used 2.0.0, it doesn't make an error, but now, it makes an error like GET http://localhost:4200/null 404 (Not Found).

Also when I try to deploy, it makes an error like 'AppModule is not an NgModule'.

Even though it makes an error, it's working well on local. If anyone knows about this, please let me know. Thank you :)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DeliveryComponent } from './delivery/delivery.component';
import { AreaManagementComponent } from './area-management/area-management.component';
import { CountryComponent } from './area-management/country/country.component';

import { routing } from './app.routing';

import { AreaService } from "./area-management/area-management.service";
import { FDeliveryService } from "./f-delivery-setting/f-delivery.service";
import { ProvinceComponent } from './area-management/province/province.component';
import { SigninComponent } from './signin/signin.component';
import { CityComponent } from './area-management/city/city.component';
import { AreaComponent } from './area-management/area/area.component';
import { DeliveryAreaComponent } from './area-management/delivery-area/delivery-area.component';
import { FDeliverySettingComponent } from './f-delivery-setting/f-delivery-setting.component';
import { TermsComponent } from './terms/terms.component';
import { TermsListComponent } from './terms-list/terms-list.component';
import { TermsListService } from "./terms-list/terms-list.service";
import { TermsService } from "./terms/terms.service";
import { UserManagementComponent } from './user-management/user-management.component';
import { UserService} from "./user-management/user.service";
import { NavComponent } from './nav/nav.component';

import { MaterialModule } from '@angular/material';
import 'hammerjs';

import {
  DialogModule,
  ButtonModule,
  DataTableModule,
  InputTextModule,
  TabViewModule,
  DropdownModule,
  EditorModule,
  SharedModule,
  AutoCompleteModule,
  PanelMenuModule,
  MenuModule,
  ContextMenuModule,
  PasswordModule,
  FileUploadModule,
  InputTextareaModule,
  RadioButtonModule,
  CalendarModule,
  CheckboxModule,
  ConfirmDialogModule,
  ConfirmationService, InputMaskModule, BlockUIModule
} from "primeng/primeng";
import { SignupComponent } from './signin/signup.component';
import { LicenseComponent } from './license/license.component';
import { TermsShowComponent } from './terms-show/terms-show.component';
import { AuthGuardService } from "./signin/auth-guard.service";
import { AuthService } from "./signin/auth.service";
import { UserDetailComponent } from './user-detail/user-detail.component';
import { LicenseDetailComponent } from './license/license-detail/license-detail.component';
import { UserDetailService } from "./user-detail/user-detail.service";
import { LicenseService } from "./license/license.service";
import { BranchManagementComponent } from './branch-management/branch-management.component';
import { BranchService } from "./branch-management/branch.service";
import { BranchDetailComponent } from './branch-management/branch-detail/branch-detail.component';
import { InternalComponent } from './home/internal/internal.component';
import { ExternalComponent } from './home/external/external.component';
import { ClassificationComponent } from './classification/classification.component';
import { ClientComponent } from './client/client.component';
import { DmBillingComponent } from './payment-billing/dm-billing/dm-billing.component';
import { PartnerBillingComponent } from './payment-billing/partner-billing/partner-billing.component';
import { WowbillingComponent } from './payment-billing/wowbilling/wowbilling.component';
import { DailyReportingComponent } from './daily-reporting/daily-reporting.component';
import { AccountClosingComponent } from './account-closing/account-closing.component';
import { AccountingComponent } from "./accounting-balance/accounting-balance.component";
import { DeliveryService } from "./delivery/delivery.service";
import { UserAddComponent } from './user-add/user-add.component';
import { NavService } from "./nav/nav.service";
import { PartnerService } from "./shared/partner.service";
import { ClientService } from "./shared/client.service";
import { PartnerComponent } from './partner/partner.component';
import { PartnerDetailComponent } from './partner/partner-detail/partner-detail.component';
import { NewBranchComponent } from './branch-management/new-branch/new-branch.component';
import { ForgetPasswordComponent } from './signin/forget-password/forget-password.component';
import { DeliveryDetailComponent } from './delivery/delivery-detail/delivery-detail.component';
import {FileUploadService} from "./shared/file-upload.service";
import { PartnerEditComponent } from './partner/partner-edit/partner-edit.component';
import {AgmCoreModule} from "angular2-google-maps/core/core-module";

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DeliveryComponent,
    AreaManagementComponent,
    CountryComponent,
    ProvinceComponent,
    SigninComponent,
    CityComponent,
    AreaComponent,
    DeliveryAreaComponent,
    FDeliverySettingComponent,
    TermsComponent,
    TermsListComponent,
    UserManagementComponent,
    NavComponent,
    SignupComponent,
    LicenseComponent,
    TermsShowComponent,
    UserDetailComponent,
    LicenseDetailComponent,
    BranchManagementComponent,
    BranchDetailComponent,
    InternalComponent,
    ExternalComponent,
    AccountingComponent,
    ClassificationComponent,
    ClientComponent,
    DmBillingComponent,
    PartnerBillingComponent,
    WowbillingComponent,
    DailyReportingComponent,
    AccountClosingComponent,
    UserAddComponent,
    PartnerComponent,
    PartnerDetailComponent,
    NewBranchComponent,
    ForgetPasswordComponent,
    DeliveryDetailComponent,
    PartnerEditComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    MaterialModule.forRoot(),
    ReactiveFormsModule,
    AgmCoreModule.forRoot({
      apiKey: Key
    }),

    //primeNG
    InputTextareaModule,
    InputTextModule,
    DataTableModule,
    DialogModule,
    DropdownModule,
    ButtonModule,
    TabViewModule,
    EditorModule,
    SharedModule,
    PanelMenuModule,
    MenuModule,
    ContextMenuModule,
    PasswordModule,
    FileUploadModule,
    RadioButtonModule,
    CalendarModule,
    CheckboxModule,
    ConfirmDialogModule,
    InputMaskModule
  ],
  providers: [
    AreaService,
    FDeliveryService,
    TermsListService,
    TermsService,
    UserService,
    AuthGuardService,
    AuthService,
    UserDetailService,
    LicenseService,
    BranchService,
    DeliveryService,
    NavService,
    PartnerService,
    ClientService,
    ConfirmationService,
    FileUploadService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Packages.json

{
  "name": "five-delivery-admin",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/material": "^2.0.0-beta.0",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/router": "~3.4.1",
    "@types/moment-timezone": "^0.2.33",
    "angular-cli": "^1.0.0-beta.24",
    "angular2": "^2.0.0-beta.21",
    "angular2-google-maps": "^0.17.0",
    "bootstrap": "^3.3.7",
    "bourbon": "^4.2.7",
    "core-js": "^2.4.1",
    "es6-promise": "^4.0.5",
    "es6-shim": "^0.35.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "moment": "^2.17.1",
    "moment-timezone": "^0.5.10",
    "node-sass": "^3.13.0",
    "primeng": "^1.1.0",
    "pubnub-angular2": "^1.0.0-beta.7",
    "quill": "^1.1.8",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "ts-helpers": "^1.1.1",
    "typescript": "^2.0.10",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.2.33",
    "@types/node": "^6.0.42",
    "angular-cli": "^1.0.0-beta.24",
    "bootstrap-sass": "^3.3.7",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-loader": "^1.3.3",
    "ts-node": "1.2.1",
    "tslint": "4.2.0",
    "typescript": "2.0.10"
  }
}

angular-cli.json

{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "five-delivery-admin"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.scss",
        "../node_modules/hammerjs/hammer.min.js",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/quill/dist/quill.core.css",
        "../node_modules/quill/dist/quill.snow.css",
        "../node_modules/quill/dist/quill.bubble.css"
      ],
      "scripts": [
        "../node_modules/quill/dist/quill.min.js",
        "../node_modules/hammerjs/hammer.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false
  }
}

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

typings.json

{
  "globalDependencies": {
    "es6-collections": "registry:dt/es6-collections#0.5.1+20160316155526",
    "es6-promise": "registry:dt/es6-promise#0.0.0+20160614011821"
  }
}

Surely the problem should not be in angular-cli generated files that you posted here. Might help if you post something related to your stack trace. — jal, Jan 02 '17 at 03:07
@jali-ai I have no idea which info I should post here. :( I wanted to use google maps with angular2. So I installed google maps and update some. I searched about this problem, and many of angular users have same issue now and still it doesn't solved. Do you have any idea to fix this issue? — Mingyu Jeon, Jan 02 '17 at 03:17
in your package.json your ` "angular-cli": "^1.0.0-beta.24", "angular2": "^2.0.0-beta.21",` are still in beta.. maybe edit it to the correct version,clear node_modules and do `npm install` again.. — Suraj Rao, Jan 02 '17 at 05:14
@SurajRao I installed both using npm install angular-cli@latest --save; npm install angular2@latest. I deleted angular2": "^2.0.0-beta.21 cause it is deprecated. However, it's still not working Also, angular-cli version is correct version as far as I know. — Mingyu Jeon, Jan 02 '17 at 05:30

score 9 · Accepted Answer · answered Jan 02 '17 at 09:34

9

I found a solution. Change the version of typescript to 2.0.10 I reply for myself and others who are stuck this problem :)

Check typescript version using tsc -v
Remove typescript
Install npm install typescript@2.0.10 --save

If someone has a better solution, let me know :)

answered Jan 02 '17 at 09:34

Mingyu Jeon

1,755
5
23
40

2

I got it working by using `v1.0.0-beta.21` of `angular-cli` instead of pushing back the version of Typescript. – MartinHN Jan 02 '17 at 20:21
1

Thanks for the reply! My angular-cli version is 1.0.0-beta.24, I guess that angular-cli is not compatible with typescript yet. :( – Mingyu Jeon Jan 04 '17 at 01:41
1

At least is isn't compatible with latest Typescript version. Hopefully that will get sorted out soon! – MartinHN Jan 04 '17 at 14:29
also not working with cli in version 1.0.0-beta.28.3 - fingers crossed that the RC coming soon has the fix – trees_are_great Mar 08 '17 at 08:52
MartinHN, I look forward to trying your solution. Currently, I am struggling to revert to a previous version: http://stackoverflow.com/questions/42830647/npm-unable-to-revert-to-previous-version-of-node-package-angular-cli If you were to post an answer I would happy to give it the thumbs up – trees_are_great Mar 16 '17 at 10:00

score 1 · Answer 2 · edited May 23 '17 at 11:54

Edit: This issue has now been fixed. issue ref

Creadit to MartinHN comment on Minyu Jeon's answer.

Use v1.0.0-beta.21 of angular-cli

I was previously using v1.0.0-beta.28.3 and migrated back to this as follows:

Revert version of angular-cli as follows: stack overflow
Create new angular app using the cli.
Make several changes to the code which are required for this older version, including:

import './polyfills.ts';

at the top of main.ts Errors will show up with details when trying to run the app. They didn't take long to resolve.

Fadid · Answer 3 · 2018-01-05T14:33:51.930

0

add tag to the file tsconfig.json

"skipMetadataEmit":false

will be like that

"angularCompilerOptions": {
      "skipMetadataEmit":false ,
      "genDir": "./dist/ngfactory",    
      "entryModule": "./src/app/app.module#AppModule"
  }

edited Jan 05 '18 at 14:33

answered Jan 05 '18 at 12:09

Fadid

1,250
15
16

Error: AppModule is not an NgModule

3 Answers3

Linked