Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error: AppModule is not an NgModule

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"
  }
}
like image 781
Mingyu Jeon Avatar asked Jan 02 '17 01:01

Mingyu Jeon


2 Answers

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

  1. Check typescript version using tsc -v
  2. Remove typescript
  3. Install npm install [email protected] --save

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

like image 169
Mingyu Jeon Avatar answered Oct 14 '22 03:10

Mingyu Jeon


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:

  1. Revert version of angular-cli as follows: stack overflow
  2. Create new angular app using the cli.
  3. 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.

like image 1
trees_are_great Avatar answered Oct 14 '22 02:10

trees_are_great



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!