search

akveo / ngx-admin

Customizable admin dashboard template based on Angular 10+
https://akveo.github.io/ngx-admin/
MIT License
25.14k stars 7.95k forks source link

Unable to migrate to version 5 #5642

Open siewer opened 4 years ago

siewer commented 4 years ago

Issue type

I'm submitting a ... (check one with "x")

Issue description

Current behavior: I am trying to migrate from ngx-admin 4 to 5. After making changes to packages.json I have compilation errors:

ERROR in src/app/app.module.ts:29:12 - error NG1010: Value at position 3 in the NgModule.imports of AppModule is not a reference: [object Object]

 29   imports: [
               ~
 30     BrowserAnimationsModule,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
 44     BrowserModule,
    ~~~~~~~~~~~~~~~~~~
 45   ],
    ~~~
src/app/app.component.ts:11:14 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

11   template: '<router-outlet></router-outlet>',

Expected behavior: Application will start in dev mode properly withour errors

Steps to reproduce: hopefully use my package.json and ng start:dev

Related code: packages.json:

{
  "name": "mxw",
  "version": "1.2.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve",
    "start:dev": "ng serve",
    "start:stage": "ng serve -- confiuration=stage",
    "start:prod": "ng serve --configuration=prod",
    "build": "ng build",
    "build:prod": "npm run build -- --prod --aot --source-map=false",
    "build:stage": "npm run build -- --configuration=stage --aot ",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
  },
  "dependencies": {
    "@akveo/ng2-completer": "^9.0.1",
    "@angular/animations": "^9.0.4",
    "@angular/cdk": "^9.1.2",
    "@angular/common": "^9.0.4",
    "@angular/compiler": "^9.0.4",
    "@angular/core": "^9.0.4",
    "@angular/forms": "^9.0.4",
    "@angular/google-maps": "^9.1.0",
    "@angular/platform-browser": "^9.0.4",
    "@angular/platform-browser-dynamic": "^9.0.4",
    "@angular/router": "^9.0.4",
    "@asymmetrik/ngx-leaflet": "3.0.1",
    "@nebular/auth": "5.0.0",
    "@nebular/eva-icons": "5.0.0",
    "@nebular/security": "5.0.0",
    "@nebular/theme": "5.0.0",
    "@swimlane/ngx-charts": "^13.0.2",
    "@syncfusion/ej2-angular-dropdowns": "^18.1.42",
    "@syncfusion/ej2-base": "^18.1.42",
    "@syncfusion/ej2-data": "^18.1.42",
    "@syncfusion/ej2-dropdowns": "^18.1.42",
    "angular2-chartjs": "0.4.1",
    "angular5-csv": "^0.2.11",
    "bootstrap": "4.3.1",
    "chart.js": "2.7.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "echarts": "^4.0.2",
    "eva-icons": "^1.1.3",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "leaflet": "1.2.0",
    "nebular-icons": "1.1.0",
    "ng2-ckeditor": "^1.2.2",
    "ng2-smart-table": "^1.6.0",
    "ngx-cookie-service": "^3.0.3",
    "ngx-echarts": "^4.2.2",
    "node-sass": "^4.12.0",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "roboto-fontface": "0.8.0",
    "rxjs": "6.5.4",
    "rxjs-compat": "6.3.0",
    "socicon": "3.0.5",
    "style-loader": "^1.1.3",
    "tinymce": "4.5.7",
    "tslib": "^1.10.0",
    "typeface-exo": "0.0.22",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.4",
    "@angular/cli": "^9.0.4",
    "@angular/compiler-cli": "^9.0.4",
    "@angular/language-service": "9.0.4",
    "@compodoc/compodoc": "1.0.1",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@types/d3-color": "1.0.5",
    "@types/googlemaps": "^3.39.3",
    "@types/jasmine": "2.5.54",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "conventional-changelog-cli": "1.3.4",
    "husky": "0.13.3",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.2",
    "rimraf": "2.6.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
    "tslint": "^5.7.0",
    "tslint-language-service": "^0.9.9",
    "typescript": "3.7.5"
  }

}

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

node

 node --version
v10.16.3

npm

npm --version
6.9.0
forfrossen commented 4 years ago

same here.

developer-cormatix commented 4 years ago

image

please check this commit https://github.com/akveo/ngx-admin/commit/fbbf94448bf92e9bbca8182e27bcf7c7c78e4311

some changes are done for angular 9.

same issue arises at my end then i figured out my custom module declaration, then i fixed. now working fine.

before

export class ThemeModule {
 static forRoot(): ModuleWithProviders {
    return <ModuleWithProviders>{
      ngModule: ThemeModule,

After

export class ThemeModule {
  static forRoot(): ModuleWithProviders <ThemeModule> {
    return {
      ngModule: ThemeModule,

need to remove ModuleWithProviders.

so please find your custom module declaration which are used while importing ngModule. in your case find module which place at 3rd position/index, then go to declaration

Please check and confirm the same