Ошибка: AppModule не является NgModule

Question

Недавно я обновил версию 2.4.1.

"@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" 

Когда я использовал 2.0.0, он не делает ошибку, но теперь она делает ошибку, как GET http://localhost:4200/null 404 (Not Found).

Также, когда я пытаюсь развернуть, возникает ошибка, например: «AppModule is not an NgModule».

Несмотря на то, что он делает ошибку, он хорошо работает на локальном компьютере. Если кто знает об этом, сообщите мне. Спасибо :)

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" 
    } 
} 

угловой 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" 
    } 
} 

Answer 1

Я нашел решение. Изменить версию машинописи на 2.0.10 я отвечаю за себя и других людей, которые застряли эту проблему :)

1. Проверить машинописный вариант с использованием tsc -v
2. Удалить машинопись
3. Установите npm install typescript@2.0.10 --save

Если у кого-то есть лучшее решение, дайте мне знать :)

Answer 2

Изменить: эта проблема исправлена. issue ref

Creadit to MartinHN комментировать ответ Minyu Jeon.

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

Я был ранее с помощью v1.0.0-beta.28.3 и перенести обратно на это следующим образом: версия

1. Возвратить из угловых Cli следующим образом: stack overflow
2. Создать новую угловую приложение с помощью кли.

3. сделать несколько изменений в коде, которые необходимы для этой старой версии, в том числе:

   импорт»./polyfills.ц;

в верхней части main.ts ошибки будет отображаться с деталями при попытке запустить приложение. Они не заставили себя долго ждать.

Answer 3

добавить тег к файлу tsconfig.json

"skipMetadataEmit":false 

будет так

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