search

alexabbott / firebase-cms

A CMS + E-commerce platform built with Angular and Firebase
https://fir-cms-76f54.firebaseapp.com/
MIT License
313 stars 125 forks source link

Migration to angular 6+ ERROR TS2307 #24

Open bonusskate opened 5 years ago

bonusskate commented 5 years ago

I needed to migrate the app to angular 6+ in order to use @ng-select https://www.npmjs.com/package/@ng-select/ng-select

This migration has been problematic, current issues when using ng-serve Error TS2307

ng serve throws error TS2307 for every custom module non node-modules under app/... this was the case with angular 6 aswell

outdated unsupported depencencies 

//these depend on @Angular5 as the latest
import { CKEditorModule } from 'ng2-ckeditor';
import { DndModule } from 'ng2-dnd';

Resolved many of them by removing `javascript 'app/ or addingjavascript ./

src/app/admin/admin-routing.module.ts(4,32): error TS2307: Cannot find module 'app/admin/admin-components/admin/admin.component'.

But I still only get the issues for modules that are children of app/admin or app/storefront Another unresolved error

src/app/storefront-components/checkout-shipping/checkout-shipping.component.ts(54,13): error TS2345: Argument of type '{ duration: number; extraClasses: string[]; }' is not assignable to parameter of type 'MatSnackBarConfig<any>'.
  Object literal may only specify known properties, and 'extraClasses' does not exist in type 'MatSnackBarConfig<any>'.
src/app/storefront-components/login/login.component.ts(44,96): error TS2339: Property 'take' does not exist on type 'Observable<{}>'.

This is what I did so far migrated to angular.json 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "testapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/testapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "src/variables.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/scss"
              ]
            },
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "testapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "testapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "testapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "testapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "testapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "testapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "testapp"
}

Migrated to @Angular/fire 


// Migrated to from @angularfire2 to @angular/fire //
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';

//Migrated theming //
@import "~@angular/material/_theming.scss";

Converted Md format into Mat type 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {
    MatButtonModule,
    MatNativeDateModule,
    MatInputModule,
    MatDatepickerModule,
    MatCardModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatDialogModule,
    MatGridListModule,
    MatIconModule,
    MatSelectModule,
    MatOptionModule,
    MatCheckboxModule,
    MatMenuModule,
    MatProgressSpinnerModule
} from '@angular/material';

const components = [
    CommonModule,
    MatButtonModule,
    MatCardModule,
    MatDatepickerModule,
    MatDialogModule,
    MatCheckboxModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatOptionModule,
    MatSelectModule,
    MatSidenavModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatToolbarModule,
    MatProgressSpinnerModule
];

@NgModule({
    imports: components,
    exports: components
})

export class MaterialComponentsModule { }

Current Packagelock.json 

{
  "name": "firebase-cms",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "hashcode": "node scripts/hashcode.js",
    "deploy": "ng build --prod; firebase deploy",
    "build-static": "node scripts/static-generator.js",
    "deploy-static": "ng build --prod; node scripts/static-generator.js; mv static/* dist/; firebase deploy"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.2",
    "@angular/cdk": "7.1.1",
    "@angular/common": "7.1.2",
    "@angular/compiler": "7.1.2",
    "@angular/core": "7.1.2",
    "@angular/forms": "7.1.2",
    "@angular/http": "7.1.2",
    "@angular/material": "7.1.1 ",
    "@angular/platform-browser": "^7.1.2",
    "@angular/platform-browser-dynamic": "^7.1.2",
    "@angular/router": "^7.1.2",
    "@ng-select/ng-select": "^2.13.1",
    "@angular/fire": "5.1.1",
    "core-js": "^2.4.1",
    "enhanced-resolve": "^3.3.0",
    "firebase": "^5.5.0",
    "hammerjs": "^2.0.8",
    "ng2-ckeditor": "1.2.2",
    "ng2-dnd": "5.0.2",
    "rxjs": "6.3.3",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^7.1.2",
    "@angular/compiler-cli": "^7.1.2",
    "@angular/language-service": "^7.1.2",
    "@angular/service-worker": "7.1.2 ",
    "@types/ckeditor": "^0.0.34",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^8.0.19",
    "cheerio": "^1.0.0-rc.2",
    "codelyzer": "4.5.0",
    "fs": "0.0.1-security",
    "inquirer": "^3.2.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "mkdirp": "^0.5.1",
    "nightmare": "^2.10.0",
    "protractor": "~5.1.2",
    "ts-node": "^3.3.0",
    "tslint": "^5.5.0",
    "typescript": "3.1.6"
  }

Angular version and node version

Angular CLI: 7.1.2
Node: 8.9.4
OS: win32 x64
Angular: 7.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.2
@angular-devkit/build-angular     0.11.2
@angular-devkit/build-optimizer   0.11.2
@angular-devkit/build-webpack     0.11.2
@angular-devkit/core              7.1.2
@angular-devkit/schematics        7.1.2
@angular/cdk                      7.1.1
@angular/fire                     5.1.1
@angular/material                 7.1.1
@ngtools/webpack                  7.1.2
@schematics/angular               7.1.2
@schematics/update                0.11.2
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Ng serve results 


chunk {admin-admin-module} admin-admin-module.js, admin-admin-module.js.map (admin-admin-module) 1.45 MB  [rendered]
chunk {main} main.js, main.js.map (main) 268 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 8.83 kB [entry] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 9.38 MB [initial] [rendered]

//Followed by errors outlined above //
bonusskate commented 5 years ago

There is a bug with lazy loading on angular six

these are the solutions to some errors encountered 

///in app-routing.module.ts
import { AdminModule } from 'app/admin/admin-module';
{ path: 'admin', loadChildren: () => AdminModule },

//tsconfig.app.json
"baseUrl": "./",

Md.... to Mat.... Changes Globally

// Requires Extra imports

import { MatInputModule } from '@angular/material';

Mat-Input-Container is now and datepicker Button is replaced with mat-datepicker-toggle

<!-- app/admin/add-post.html !-->
<mat-form-field>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="newDate" (focus)="picker.open()">
        <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
        </mat-form-field>
        <mat-datepicker #picker></mat-datepicker>

Not sure about this solution, but it seems to work it relates to rxjs observables The error was this

ERROR in src/app/admin/admin-components/admin-dashboard/admin-dashboard.component.ts(33,5): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable<any[]>'.
  Type '{}' is not assignable to type 'any[]'.
    Property 'includes' is missing in type '{}'.

The solution 

///instead of 
posts: Observable<any[]>;
//Working 
posts: Observable<any>;

Package Lock 

{
  "name": "testapp2",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.1.1",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ng-select/ng-select": "^2.13.1",
    "core-js": "^2.5.4",
    "firebase": "^5.7.0",
    "hammerjs": "^2.0.8",
    "ng2-ckeditor": "^1.2.2",
    "ng2-dnd": "^5.0.2",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.3.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.0",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

Hope this helps cheers