Migrating from Angular2 to Angular4 getting build error "unexpected-value-t-imported by the module 'AppModule'.Please use @NgAModule Annotation"

[DnyaneshwarShivbhakta]

Hello All, I upgrade my angular application from Angular2 to Angular4 but I'm getting build error "unexpected-value-t-imported by the module 'AppModule'.Please use @NgAModule Annotation"

Package.json is

{
  "name": "portal",
  "version": "1.0.0",
  "license": "Refer to XCell Software, Inc. License Agreement",
  "repository": "",
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@angular/upgrade": "^4.0.0",
    "@types/node": "^6.0.38",
    "angular2-color-picker": "^1.3.1",
    "bootstrap": "4.0.0-alpha.6",
    "chart.js": "2.4.0",
    "clipboard-js": "0.3.3",
    "core-js": "2.4.1",
    "css": "2.2.1",
    "file-saver": "1.3.3",
    "font-awesome": "4.7.0",
    "jquery": "^2.2.1",
    "moment": "2.17.1",
    "ng2-charts": "1.4.4",
    "ng2-datetime-picker": "0.14.1",
    "ng2-file-upload": "^1.2.1",
    "ngx-bootstrap": "1.9.3",
    "ngx-monaco-editor": "^1.0.4",
    "rxjs": "^5.0.2",
    "tether": "1.4.0",
    "web-animations-js": "2.2.2",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/chai": "^4.0.1",
    "@types/jquery": "^3.2.10",
    "@types/mocha": "^2.2.41",
    "@types/sinon": "^2.3.2",
    "angular2-template-loader": "^0.4.0",
    "aspnet-webpack": "1.0.26",
    "awesome-typescript-loader": "^2.2.4",
    "babel-core": "6.21.0",
    "babel-loader": "6.2.10",
    "babel-preset-env": "^1.1.4",
    "babel-preset-es2015-native-modules": "^6.9.4",
    "chai": "^4.1.0",
    "commander": "^2.11.0",
    "compression-webpack-plugin": "0.3.2",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "0.26.1",
    "csv-writer": "0.0.3",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "2.0.0-beta.4",
    "file-loader": "0.10.1",
    "karma": "^1.5.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-htmlfile-reporter": "^0.3.5",
    "karma-jquery": "^0.2.2",
    "karma-mocha": "^1.3.0",
    "karma-read-json": "^1.1.0",
    "karma-scss-preprocessor": "^3.0.0",
    "karma-sinon": "^1.0.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-typescript": "^3.0.7",
    "karma-typescript-es6-transform": "^1.0.2",
    "karma-webpack": "^2.0.4",
    "mocha": "^3.4.2",
    "mocha-typescript": "^1.1.7",
    "node-sass": "^4.5.3",
    "pkginfo": "^0.4.0",
    "raw-loader": "0.5.1",
    "reflect-metadata": "^0.1.10",
    "sass-loader": "^6.0.7",
    "sinon": "^2.3.8",
    "source-map-loader": "^0.2.1",
    "style-loader": "0.13.1",
    "svg-url-loader": "2.0.2",
    "to-string-loader": "^1.1.5",
    "ts-loader": "1.3.3",
    "typescript": "2.1.4",
    "url-loader": "0.5.7",
    "webpack": "2.2.1",
    "webpack-externals-plugin": "1.0.0",
    "webpack-hot-middleware": "2.17.1",
    "webpack-merge": "4.1.0"
  },
  "scripts": {
    "WebPack-Vendor": "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js",
    "WebPack-Vendor-Prod": "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod --optimize-minimize ",
    "WebPack-Watch": "webpack -d --watch --color",
    "test": "karma start ClientApp/karma.conf.js --single-run",
    "exportNpmPackageInfo": "node ./ClientApp/npmPackageInfoExporter.js exportedNpmPackageInfo",
    "tsc": "tsc -p ClientApp"
  }
}

AppModule.ts is

import { NgModule } from "@angular/core";
import { DatePipe } from "@angular/common";
import { CurrencyPipe } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule, Router } from "@angular/router";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpModule, Http, XHRBackend, RequestOptions } from "@angular/http";

import { ChartsModule } from "ng2-charts/ng2-charts";

import { AlertComponent } from "./components/directives/alert.component";
import { AppComponent } from "./components/app/app.component";
import { AwsAccountMaintenanceComponent } from "./components/admin/aws-account-maintenance.component";
import { BottomNavBarComponent } from "./components/app/bottomnavbar.component";
import { BlogMaintenanceComponent } from "./components/admin/blog-maintenance.component";
import { ConfirmComponent } from "./components/directives/confirm.component";
import { OnlyNumber } from "./components/directives/onlynumber.component";
import { DashboardComponent } from "./components/home/dashboard.component";
import { DashboardSectionMaintenanceComponent } from "./components/admin/dashboard-section-maintenance.component";
import { FileSelectDirective, FileDropDirective } from "ng2-file-upload";
import { GridBudgetMaintenanceComponent } from "./components/admin/grid-budget-maintenance.component"
import { GridDashboardComponent } from "./components/home/grid-dashboard.component";
import { GridMaintenanceComponent } from "./components/admin/grid-maintenance.component";
import { GridClusterStatusComponent } from "./components/shared/component/grid-cluster/grid-cluster-status.component";
import { GridClusterBudgetListComponent } from "./components/shared/component/grid-cluster/grid-cluster-budget-list.component";
import { LoginPopupComponent } from "./components/directives/login-popup.component";
import { ModalComponent } from "./components/directives/modal.component";
import { TypeToSearchComponent } from "./components/directives/type.to.search.component";
import { OrganizationMaintenance } from "./components/admin/organization-maintenance.component";
import { OrganizationMaintenanceService } from "./components/services/organization-maintenance.service";
import { PasswordComponent } from "./components/directives/password.component";
import { GridOperatorMaintenanceComponent } from "./components/admin/grid-operator-maintenance.component";

import { TaskRunnerMaintenanceService } from "./components/services/task-runner-maintenance.service";
import { TaskRunnerMaintenanceComponent } from "./components/admin/task-runner-maintenance.component";
import { TopNavBarComponent } from "./components/app/topnavbar.component";
import { UserMaintenanceComponent } from "./components/admin/user-maintenance.component";
import { UserMaintenanceService } from "./components/services/user-maintenance.service";
import { LaunchAppMaintenanceComponent } from "./components/admin/launch-app-maintenance.component";

import { AuthGuard } from "./components/guards/auth.guard";

import { AdminService } from "./components/services/admin.service";
import { AlertService, } from "./components/services/alert.service";
import { AuthenticationService } from "./components/services/authentication.service";
import { BrowserService } from "./components/services/browser.service";
import { ErrorService } from "./components/services/error.service";
import { ForgotPasswordComponent } from "./components/login/forgot-password.component";
import { ForgotPasswordConfirmationComponent } from "./components/login/forgot-password-confirmation.component";
import { UserService } from "./components/services/user.service";
import { CsvService } from "./components/services/csv.service";
import { NavigationListService } from "./components/services/navigation-list.service";
import { HttpService } from "./components/services/http.service";
import { SearchService } from "./components/services/search.service";
import { MailService } from "./components/services/mail.service";
import { ModalService } from "./components/services/modal.service";
import { WorkspaceService } from "./components/services/workspace.service";
import { LoginPopupService } from "./components/services/login-popup.service";
import { GridClusterService } from "./components/services/gridCluster.service";
import { GridClusterOperatorService } from "./components/services/gridClusterOperator.service";
import { GridMaintenanceService } from "./components/services/gridMaintenance.service";
import { LoginComponent } from "./components/login/login.component";
import { RegisterComponent } from "./components/register/register.component";
import { CodeXAppLauncherComponent } from "./components/home/codex-app-launcher.component";
import { ProxyAppLauncherCompontent } from "./components/home/proxy-app-launcher.component";
import { ShinyAppService } from "./components/services/shiny-app.service";
import { RConnectService } from "./components/services/rConnect.service";
import { SessionService } from "./components/services/session.service";
import { LaunchApplicationService } from "./components/services/launchApplication.service";
import { Ng2DatetimePickerModule } from "ng2-datetime-picker";
import { UserProfileComponent } from "./components/home/user-profile.component";
import { ShinyAppComponent } from "./components/admin/shiny-app.component";
import { BillingComponent } from "./components/admin/billing.component";
import { NavigationList } from "./components/admin/navigation-list.component";
import { WorkspaceComponent } from "./components/shared/component/workspace/workspace.component";
import { WorkspaceInfoComponent } from "./components/shared/component/workspace/workspace-info.component";
import { WorkspaceWatchComponent } from "./components/shared/component/workspace/workspace-watch.component";
import { WorkspaceUploadComponent } from "./components/shared/component/workspace/workspace-upload.component";
import { WorkspaceUploadService } from "./components/services/workspace.upload.service";
import { FileLinkComponent } from "./components/shared/component/workspace/file-link.component";
import { InputDebounceDirective } from "./components/directives/inputDebounce.directive";
import { MouseWheelDirective } from "./components/directives/mousewheel.directive";
import { RefreshSessionDirective } from "./components/directives/refreshSession.directive";
import { TokenService } from "./components/services/token.service";
import { DashboardComponentService } from "./components/services/dashboard-component.service";
import { GridDashboardComponentService } from "./components/services/grid-dashboard-component.service";

import { ToggleSwitchComponent } from "./components/shared/component/toggle-switch.component";
import { HealthStatusComponent } from "./components/shared/component/health-status.component";

import { TruncatePipe } from "./components/pipes/truncate";
import { ValidationService } from './components/services/validation.service';
import { FocusDirective } from "./components/directives/focus.directive";

import { ModalModule } from 'ngx-bootstrap/modal';
import { MonacoEditorModule } from 'ngx-monaco-editor';
import { UtcDatePipe } from "./components/services/utc-date-pipe";

import { CustomColorPickerComponent } from './components/shared/component/custom-color-picker.component';
import { ColorPickerModule } from 'angular2-color-picker';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AlertComponent,
        AppComponent,
        AwsAccountMaintenanceComponent,
        BlogMaintenanceComponent,
        BottomNavBarComponent,
        ConfirmComponent,
        OnlyNumber,
        DashboardComponent,
        DashboardSectionMaintenanceComponent,
        FileDropDirective,
        FileSelectDirective,
        ForgotPasswordComponent,
        ForgotPasswordConfirmationComponent,
        LoginComponent,
        LoginPopupComponent,
        GridClusterStatusComponent,
        GridBudgetMaintenanceComponent,
        GridClusterBudgetListComponent,
        GridDashboardComponent,
        GridMaintenanceComponent,
        ModalComponent,
        OrganizationMaintenance,
        RegisterComponent,
        TaskRunnerMaintenanceComponent,
        TopNavBarComponent, 
        TypeToSearchComponent,
        PasswordComponent,
        NavigationList,
        WorkspaceComponent,
        WorkspaceUploadComponent,
        WorkspaceWatchComponent,
        FileLinkComponent,
        UserMaintenanceComponent,
        UserProfileComponent,
        LaunchAppMaintenanceComponent,
        ShinyAppComponent,
        BillingComponent,
        GridOperatorMaintenanceComponent,
        MouseWheelDirective,
        InputDebounceDirective,
        TruncatePipe,
        FocusDirective,
        CodeXAppLauncherComponent,
        ProxyAppLauncherCompontent,
        RefreshSessionDirective,
        WorkspaceInfoComponent,
        ToggleSwitchComponent,
        HealthStatusComponent,
        CustomColorPickerComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot([
            { path: "", redirectTo: "dashboard", pathMatch: "full" },
            { path: "dashboard", component: DashboardComponent, canActivate: [AuthGuard]  },
            { path: "login", component: LoginComponent },
            { path: "forgot-password", component: ForgotPasswordComponent },
            { path: "forgot-password-confirmation/:userId", component: ForgotPasswordConfirmationComponent },
            { path: "register", component: RegisterComponent },
            { path: "organization-maintenance", component: OrganizationMaintenance, canActivate: [AuthGuard] },
            { path: "user-maintenance", component: UserMaintenanceComponent, canActivate: [AuthGuard] },
            { path: "blog-maintenance", component: BlogMaintenanceComponent, canActivate: [AuthGuard] },
            { path: "launch-app-maintenance", component: LaunchAppMaintenanceComponent, canActivate: [AuthGuard] },
            { path: "grid-dashboard", component: GridDashboardComponent, canActivate: [AuthGuard] },
            { path: "grid-maintenance", component: GridMaintenanceComponent, canActivate: [AuthGuard] },
            { path: "grid-operator-maintenance", component: GridOperatorMaintenanceComponent, canActivate: [AuthGuard] },
            { path: "task-runner-maintenance", component: TaskRunnerMaintenanceComponent, canActivate: [AuthGuard] },
            { path: "dashboard-section-maintenance", component: DashboardSectionMaintenanceComponent, canActivate: [AuthGuard] },
            { path: "aws-account-maintenance", component: AwsAccountMaintenanceComponent, canActivate: [AuthGuard] },
            { path: "grid-budget-maintenance", component: GridBudgetMaintenanceComponent, canActivate: [AuthGuard] },
            { path: "user-profile", component: UserProfileComponent, canActivate: [AuthGuard] },
            { path: "shiny-app", component: ShinyAppComponent, canActivate: [AuthGuard] },
            { path: "billing", component: BillingComponent, canActivate: [AuthGuard] },
            { path: "workspace-watch/:id", component: WorkspaceWatchComponent },
            { path: "codex-app-launcher/:launchApplicationUuid", component: CodeXAppLauncherComponent, canActivate: [AuthGuard] },
            { path: "app-launcher/:launchApplicationUuid", component: ProxyAppLauncherCompontent, canActivate: [AuthGuard] },
            { path: "**", redirectTo: "dashboard" }
        ]),
        FormsModule,
        ReactiveFormsModule,
        ChartsModule,
        Ng2DatetimePickerModule,
        ModalModule.forRoot(),
        ColorPickerModule,
        MonacoEditorModule
    ],
    providers: [
        {
            provide: HttpService,
            useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, alertService: AlertService, router: Router, http: Http, loginPopupService: LoginPopupService, tokenService: TokenService) => {
                return new HttpService(backend, defaultOptions, alertService, router, http, loginPopupService, tokenService);
            },
            deps: [XHRBackend, RequestOptions, AlertService, Router, Http, LoginPopupService, TokenService]
        },
        AuthGuard,
        AlertService,
        AuthenticationService,
        BrowserService, 
        CurrencyPipe,
        DatePipe,
        UtcDatePipe,
        UserService,
        CsvService,
        AdminService,
        ErrorService,
        LoginPopupService,
        ModalService,
        NavigationListService,
        MailService,
        ValidationService,
        SearchService,
        GridClusterService,
        GridClusterOperatorService,
        GridMaintenanceService,
        ShinyAppService,
        RConnectService,
        SessionService,
        LaunchApplicationService,
        WorkspaceService,
        WorkspaceUploadService,
        TokenService,
        OrganizationMaintenanceService,
        TaskRunnerMaintenanceService,
        UserMaintenanceService,
        DashboardComponentService,
        GridDashboardComponentService
    ]
})
export class AppModule {
}

[kara]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}