Problem Upgrading from Angular4 to 5

Hey guys,

appreciate this template very much! So helpful. I stated an app months ago with Anuglar4. However there seemed to be a bug within the refreshToken functionality and i wanted to do the upgrade to this version to make sure its gone (couldn't find it by myself). But I'm stuck for three days now and i can't make it work.

After updating the sources, packages and configs I end up getting the error:

Uncaught Error: Unexpected value '[object Object]' imported by the module 'AppModule'. Please add a @NgModule annotation. at syntaxError (main-client.js:96242) at main-client.js:110963 at Array.forEach () at CompileMetadataResolver.getNgModuleMetadata (main-client.js:110946) at JitCompiler._loadModules (main-client.js:129983) at JitCompiler._compileModuleAndComponents (main-client.js:129944) at JitCompiler.compileModuleAsync (main-client.js:129838) at CompilerImpl.compileModuleAsync (main-client.js:95052) at PlatformRef.bootstrapModule (main-client.js:6506) at Object. (main-client.js:91546)

It seems to be very generic error none of the solutions online helped so far. You guys have any idea where to look at?

this is my package.config: "dependencies": { "@angular/animations": "5.1.0", "@angular/common": "5.1.0", "@angular/compiler": "5.1.0", "@angular/compiler-cli": "5.1.0", "@angular/core": "5.1.0", "@angular/forms": "5.1.0", "@angular/platform-browser": "5.1.0", "@angular/platform-browser-dynamic": "5.1.0", "@angular/platform-server": "5.1.0", "@angular/router": "5.1.0", "@ngtools/webpack": "1.9.0", "@types/webpack-env": "1.13.3", "@ngx-translate/core": "9.0.1", "@swimlane/ngx-datatable": "11.1.5", "@types/jquery": "3.2.16", "ng2-daterangepicker": "2.0.12", "angular2-template-loader": "0.6.2", "aspnet-webpack": "2.0.1", "awesome-typescript-loader": "3.4.1", "bootstrap": "3.3.7", "bootstrap-select": "1.12.4", "bootstrap-toggle": "2.2.2", "bootstrap-vertical-tabs": "1.2.2", "chart.js": "2.7.1", "core-js": "2.5.3", "css": "2.2.1", "css-loader": "0.28.7", "event-source-polyfill": "0.0.12", "expose-loader": "0.7.4", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "font-awesome": "4.7.0", "html-loader": "0.5.1", "jquery": "3.2.1", "json-loader": "0.5.7", "ng2-charts": "1.6.0", "ng2-toasty": "4.0.3", "ngx-bootstrap": "2.0.0-beta.11", "ngx-pagination": "3.0.3", "node-sass": "4.7.2", "raw-loader": "0.5.1", "rxjs": "5.5.5", "sass-loader": "6.0.6", "style-loader": "0.19.0", "to-string-loader": "1.1.5", "typescript": "2.6.2", "url-loader": "0.6.2", "web-animations-js": "2.3.1", "webpack": "3.10.0", "webpack-hot-middleware": "2.21.0", "webpack-merge": "4.1.1", "zone.js": "0.8.18", "angular-tree-component": "6.1.0", "pdfmake": "0.1.35", "ng2-select": "2.0.0", "file-saver": "1.3.3" }, "devDependencies": { "@angular/cli": "^1.6.6", "@types/chai": "4.0.10", "@types/jasmine": "2.8.2", "chai": "4.1.2", "jasmine-core": "2.8.0", "karma": "1.7.1", "karma-chai": "0.1.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-jasmine": "1.1.1", "karma-jasmine-html-reporter": "0.2.2", "karma-webpack": "2.0.6" }, "scripts": { "dev-build": "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js", "test": "karma start ClientApp/test/karma.conf.js" },

App.module: `import { NgModule, ErrorHandler } from "@angular/core"; import { DatePipe } from '@angular/common'; import { RouterModule } from "@angular/router"; import { FormsModule } from "@angular/forms"; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule } from '@angular/common/http';

import 'bootstrap'; import { TranslateModule, TranslateLoader } from "@ngx-translate/core"; import { Daterangepicker } from 'ng2-daterangepicker'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { ToastyModule } from 'ng2-toasty'; import { ModalModule } from 'ngx-bootstrap/modal'; import { TooltipModule } from "ngx-bootstrap/tooltip"; import { PopoverModule } from "ngx-bootstrap/popover"; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { CarouselModule } from 'ngx-bootstrap/carousel'; import { CollapseModule } from 'ngx-bootstrap/collapse'; import { DatepickerModule, BsDatepickerModule } from 'ngx-bootstrap/datepicker'; import { ChartsModule } from 'ng2-charts'; import { AppRoutingModule } from './app-routing.module'; import { AppErrorHandler } from './app-error.handler'; import { TreeModule } from 'angular-tree-component'; import { NgxPaginationModule } from 'ngx-pagination'; import { SelectModule } from 'ng2-select';

import { AppTitleService } from './services/app-title.service'; import { AppTranslationService, TranslateLanguageLoader } from './services/app-translation.service'; import { ConfigurationService } from './services/configuration.service'; import { AlertService } from './services/alert.service'; import { LocalStoreManager } from './services/local-store-manager.service'; import { EndpointFactory } from './services/endpoint-factory.service'; import { NotificationService } from './services/notification.service'; import { AccountService } from './services/account.service'; import { AccountEndpoint } from './services/account-endpoint.service'; import { CustomerService } from './services/customer.service'; import { FileService } from './services/file-upload.service'; import { PolicyService } from './services/policy.service'; import { DefectService } from './services/defect.service'; import { TaskService } from './services/task.service';

import { EqualValidator } from './directives/equal-validator.directive'; import { LastElementDirective } from './directives/last-element.directive'; import { AutofocusDirective } from './directives/autofocus.directive'; import { BootstrapTabDirective } from './directives/bootstrap-tab.directive'; import { BootstrapToggleDirective } from './directives/bootstrap-toggle.directive'; import { BootstrapSelectDirective } from './directives/bootstrap-select.directive'; import { GroupByPipe } from './pipes/group-by.pipe'; import { DateFormat } from './pipes/custom-date-pipe'

import { AppComponent } from "./components/app.component"; import { LoginComponent } from "./components/login/login.component"; import { HomeComponent } from "./components/home/home.component"; import { CustomersComponent } from "./components/customers/customers.component"; import { PolicyComponent } from "./components/policies/policy.component"; import { SettingsComponent } from "./components/settings/settings.component"; import { AboutComponent } from "./components/about/about.component"; import { DefectComponent } from "./components/defects/defect.component"; import { NotFoundComponent } from "./components/not-found/not-found.component";

import { BannerDemoComponent } from "./components/controls/banner-demo.component"; import { TodoComponent } from "./components/controls/todo.component"; import { TodoActivityComponent } from "./components/controls/todo-activity.component"; import { StatisticsDemoComponent } from "./components/controls/statistics-demo.component"; import { NotificationsViewerComponent } from "./components/controls/notifications-viewer.component"; import { SearchBoxComponent } from "./components/controls/search-box.component"; import { UserInfoComponent } from "./components/controls/user-info.component"; import { UserPreferencesComponent } from "./components/controls/user-preferences.component"; import { UsersManagementComponent } from "./components/controls/users-management.component"; import { RolesManagementComponent } from "./components/controls/roles-management.component"; import { RoleEditorComponent } from "./components/controls/role-editor.component"; import { CustomerList } from "./components/controls/customerlist.component"; import { CustomerDetailComponent } from "./components/controls/customer-detail.component"; import { FileUploadComponent } from "./components/controls/file-upload.component"; import { PolicyListComponent } from "./components/controls/policy-list.component"; import { PolicyDetailComponent } from "./components/controls/policy-detail.component"; import { FileListComponent } from './components/controls/file-list.component'; import { DefectListComponent } from './components/controls/defects-list.component'; import { DefectDetailComponent } from './components/controls/defect-detail.component'; import { NoEntries } from './components/controls/no-entries.component'; import { DatatableActions } from './components/controls/datatable-actions.component' import { PolicyCategoriesComponent } from './components/controls/policy-categories.component'; import { ConditionsComponent } from './components/conditions/conditions.component'; import { ContactPersonDetailComponent } from './components/controls/contactperson-detail.component'; import { AddressDetailComponent } from './components/controls/address-detail.component'; import { FileMoveToComponent } from './components/controls/file-move-to.component'; import { BadgeControl } from './components/controls/badge.control';

@NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, FormsModule, AppRoutingModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateLanguageLoader } }), NgxDatatableModule, ToastyModule.forRoot(), TooltipModule.forRoot(), PopoverModule.forRoot(), BsDropdownModule.forRoot(), CarouselModule.forRoot(), ModalModule.forRoot(), BsDatepickerModule.forRoot(), DatepickerModule.forRoot(), CollapseModule.forRoot(), SelectModule, Daterangepicker, ChartsModule, TreeModule, NgxPaginationModule ], declarations: [ AppComponent, LoginComponent, CustomerList, HomeComponent, CustomersComponent, CustomerDetailComponent, PolicyComponent, PolicyListComponent, PolicyDetailComponent, SettingsComponent, FileUploadComponent, FileListComponent, FileMoveToComponent, UsersManagementComponent, UserInfoComponent, UserPreferencesComponent, RolesManagementComponent, RoleEditorComponent, PolicyCategoriesComponent, DefectComponent, ConditionsComponent, DefectListComponent, DefectDetailComponent, NoEntries, ContactPersonDetailComponent, AddressDetailComponent, AboutComponent, DatatableActions, NotFoundComponent, NotificationsViewerComponent, SearchBoxComponent, StatisticsDemoComponent, TodoComponent, TodoActivityComponent, BannerDemoComponent, EqualValidator, LastElementDirective, AutofocusDirective, BootstrapTabDirective, BootstrapToggleDirective, BootstrapSelectDirective, DateFormat, GroupByPipe, BadgeControl ], providers: [ { provide: 'BASE_URL', useFactory: getBaseUrl }, { provide: ErrorHandler, useClass: AppErrorHandler }, DateFormat, DatePipe, AlertService, ConfigurationService, AppTitleService, AppTranslationService, NotificationService, AccountService, AccountEndpoint, LocalStoreManager, EndpointFactory, CustomerService, FileService, PolicyService, DefectService, TaskService ], bootstrap: [AppComponent] }) export class AppModule { }

export function getBaseUrl() { return document.getElementsByTagName('base')[0].href; } ` Any help is appreciated :)

All the best, D

emonney / QuickApp

Problem Upgrading from Angular4 to 5 #83