CODEWITHSUNDEEP
angulartypescriptangular-ivy
mahdi aghasi
mahdi aghasi

Reputation: 378

Problems with errors when using aot Angular 9

I had a project with Angular 8 and updated it to Angular 9. But when I try to use Ivy, it gives me weird errors. For example, it sticks to Angular material tags if all its modules are imported correctly. Even when I'm not using aot ( set aot = false in angular.json ), the project runs quite well.

error :

node_modules/ng2-file-upload/file-upload/file-upload.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of FormTryModule, but could not be resolved to an NgModule class.

This likely means that the library (ng2-file-upload) which declares FileUploadModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

1 export declare class FileUploadModule {
                       ~~~~~~~~~~~~~~~~
node_modules/@agm/core/core.module.d.ts:28:79 - error NG6005: AgmCoreModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

28     static forRoot(lazyMapsAPILoaderConfig?: LazyMapsAPILoaderConfigLiteral): ModuleWithProviders;
                                                                                 ~~~~~~~~~~~~~~~~~~~
src/app/core/options/options.component.html:14:95 - error TS2339: Property 'end' does not exist on type 'OptionsComponent'.

14       <mat-checkbox [(ngModel)]="options.collapsed" (change)="sendOptions()" [labelPosition]="end">Collapsed Sidebar</mat-checkbox>
                                                                                                 ~~~

  src/app/core/options/options.component.ts:7:18
    7     templateUrl: 'options.component.html'
                       ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component OptionsComponent.
src/app/core/options/options.component.html:17:93 - error TS2339: Property 'end' does not exist on type 'OptionsComponent'.

17       <mat-checkbox [(ngModel)]="options.compact" (change)="sendOptions()" [labelPosition]="end">Compact Sidebar</mat-checkbox>
                                                                                               ~~~

  src/app/core/options/options.component.ts:7:18
    7     templateUrl: 'options.component.html'
                       ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component OptionsComponent.
src/app/core/options/options.component.html:20:91 - error TS2339: Property 'end' does not exist on type 'OptionsComponent'.

20       <mat-checkbox [(ngModel)]="options.boxed" (change)="sendOptions()" [labelPosition]="end">Boxed Layout</mat-checkbox>
                                                                                             ~~~

  src/app/core/options/options.component.ts:7:18
    7     templateUrl: 'options.component.html'
                       ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component OptionsComponent.
src/app/core/options/options.component.html:23:90 - error TS2339: Property 'end' does not exist on type 'OptionsComponent'.

23       <mat-checkbox [(ngModel)]="options.dark" (change)="sendOptions()" [labelPosition]="end">Dark Mode</mat-checkbox>
                                                                                            ~~~

  src/app/core/options/options.component.ts:7:18
    7     templateUrl: 'options.component.html'
                       ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component OptionsComponent.
src/app/core/footer/footer.component.html:11:7 - error TS2339: Property 'userName' does not exist on type 'FooterComponent'.

11       {{userName}}
         ~~~~~~~~

  src/app/core/footer/footer.component.ts:11:18
    11     templateUrl: './footer.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component FooterComponent.
src/app/core/footer/footer.component.html:16:7 - error TS2339: Property 'role' does not exist on type 'FooterComponent'.

16       {{role}}
         ~~~~

  src/app/core/footer/footer.component.ts:11:18
    11     templateUrl: './footer.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component FooterComponent.
src/app/core/admin-layout/admin-layout.component.html:1:53 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'.

1 <div class="app mat-typography" [dir]="options.dir" [ngClass]="{'app-dark': options.dark, 'boxed': options.boxed, 'collapsed-sidebar': options.collapsed, 'compact-sidebar': options.compact, 'side-panel-opened': sidePanelOpened, 'side-panel-closed': !sidePanelOpened }">
                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:2:3 - error NG8001: 'ngx-loading-bar' is not a known element:
1. If 'ngx-loading-bar' is an Angular component, then verify that it is part of this module.
2. If 'ngx-loading-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2   <ngx-loading-bar color="#009688"></ngx-loading-bar>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:3:3 - error NG8001: 'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3   <app-header (toggleSidenav)="sidemenu.toggle()" (toggleNotificationSidenav)="notifications.toggle()"></app-header>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:5:3 - error NG8001: 'mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5   <mat-sidenav-container class="app-inner">
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:6:5 - error NG8001: 'mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

6     <mat-sidenav #sidemenu class="sidebar-panel admin" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()"
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7       (openedStart)="sidePanelOpened = true" (closedStart)="sidePanelOpened = false" (mouseover)="menuMouseOver()"
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8       (mouseout)="menuMouseOut()" [perfectScrollbar]="config" [disabled]="mediaMatcher.matches">
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:6:75 - error NG8002: Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'mode' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

6     <mat-sidenav #sidemenu class="sidebar-panel admin" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()"
                                                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:6:111 - error NG8002: Can't bind to 'opened' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'opened' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

6     <mat-sidenav #sidemenu class="sidebar-panel admin" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()"
                                                                                                                ~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:8:35 - error NG8002: Can't bind to 'perfectScrollbar' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'perfectScrollbar' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

8       (mouseout)="menuMouseOut()" [perfectScrollbar]="config" [disabled]="mediaMatcher.matches">
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:8:63 - error NG8002: Can't bind to 'disabled' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'disabled' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

8       (mouseout)="menuMouseOut()" [perfectScrollbar]="config" [disabled]="mediaMatcher.matches">
                                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:9:7 - error NG8001: 'app-sidebar' is not a known element:
1. If 'app-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'app-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

9       <app-sidebar (click)="updatePS()"></app-sidebar>
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:15:7 - 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.

15       <router-outlet></router-outlet>
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:21:3 - error NG8001: 'app-options' is not a known element:
1. If 'app-options' is an Angular component, then verify that it is part of this module.
2. If 'app-options' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

21   <app-options (messageEvent)="receiveOptions($event)"></app-options>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16
    25   templateUrl: './admin-layout.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AdminLayoutComponent.
src/app/core/admin-layout/admin-layout.component.html:28:1 - error NG8001: 'app-footer' is not a known element:
1. If 'app-footer' is an Angular component, then verify that it is part of this module.
2. If 'app-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

28 <app-footer></app-footer>
   ~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/admin-layout/admin-layout.component.ts:25:16

  src/app/core/auth-layout/auth-layout.component.ts:8:16
    8   templateUrl: './auth-layout.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AuthLayoutComponent.
src/app/core/auth-layout/auth-layout.component.html:2:3 - 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.

2   <router-outlet></router-outlet>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/auth-layout/auth-layout.component.ts:8:16
    8   templateUrl: './auth-layout.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:3:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3     <mat-icon>menu</mat-icon>
      ~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:9:31 - error NG8002: Can't bind to 'ngStyle.xs' since it isn't a known property of 'form'.

9     <form class="search-form" [ngStyle.xs]="{display: 'none'}">
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:10:7 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

10       <mat-icon>search</mat-icon>
         ~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:15:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

15     <mat-icon>fullscreen</mat-icon>
       ~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:18:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

18     <mat-icon>notifications</mat-icon>
       ~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:21:11 - error NG8002: Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'.

21   <button [matMenuTriggerFor]="user" mat-icon-button class="ml-xs">
             ~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:22:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

22     <mat-icon>person</mat-icon>
       ~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:24:3 - error NG8001: 'mat-menu' is not a known element:
1. If 'mat-menu' is an Angular component, then verify that it is part of this module.
2. If 'mat-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

24   <mat-menu #user="matMenu" x-position="before">
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:26:7 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

26       <mat-icon>settings</mat-icon>
         ~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:30:7 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

34       <mat-icon>notifications_off</mat-icon>
         ~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/header/header.component.html:38:7 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

38       <mat-icon>exit_to_app</mat-icon>
         ~~~~~~~~~~

  src/app/core/header/header.component.ts:7:16
    7   templateUrl: './header.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeaderComponent.
src/app/core/sidebar/sidebar.component.html:1:1 - error NG8001: 'app-menu' is not a known element:
1. If 'app-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <app-menu></app-menu>
  ~~~~~~~~~~~~~~~~~~~~~

  src/app/core/sidebar/sidebar.component.ts:5:16
    5   templateUrl: './sidebar.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SidebarComponent.
src/app/core/notification/notification.component.html:1:1 - error NG8001: 'mat-tab-group' is not a known element:
1. If 'mat-tab-group' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab-group' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/core/notification/notification.component.ts:5:16
    5   templateUrl: './notification.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component NotificationComponent.
src/app/core/notification/notification.component.html:1:16 - error NG8002: Can't bind to 'selectedIndex' since it isn't a known property of 'mat-tab-group'.
1. If 'mat-tab-group' is an Angular component and it has 'selectedIndex' input, then verify that it is part of this module.
2. If 'mat-tab-group' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

1 <mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
                 ~~~~~~~~~~~~~~~~~~~

  src/app/core/notification/notification.component.ts:5:16
    5   templateUrl: './notification.component.html'

pakcage.json:

{
  "name": "primer",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.7",
    "@angular/animations": "^9.1.9",
    "@angular/cdk": "^9.1.3",
    "@angular/common": "9.1.9",
    "@angular/compiler": "9.1.9",
    "@angular/core": "9.1.9",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "9.1.9",
    "@angular/localize": "^9.1.9",
    "@angular/material": "9.2.4",
    "@angular/material-moment-adapter": "^9.2.4",
    "@angular/platform-browser": "9.1.9",
    "@angular/platform-browser-dynamic": "9.1.9",
    "@angular/router": "9.1.9",
    "@asymmetrik/ngx-leaflet": "7.0.1",
    "@ngx-loading-bar/router": "2.2.0",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "3.0.1",
    "@swimlane/ngx-datatable": "^16.1.1",
    "@types/dragula": "^2.1.35",
    "angular-calendar": "0.28.15",
    "angular-highcharts": "^9.0.11",
    "chart.js": "2.7.2",
    "core-js": "2.5.7",
    "d3": "5.7.0",
    "date-fns": "1.29.0",
    "dragula": "3.7.2",
    "highcharts": "^7.2.1",
    "intl": "1.2.5",
    "jalali-moment": "^3.3.4",
    "jspdf": "^1.5.3",
    "leaflet": "1.3.4",
    "moment": "2.22.2",
    "moment-hijri": "^2.1.2",
    "moment-jalaali": "^0.8.3",
    "ng2-charts": "1.6.0",
    "ng2-dragula": "2.1.0",
    "ng2-file-upload": "1.3.0",
    "ng2-loading-spinner": "^1.3.0",
    "ng2-tooltip-directive": "^2.9.20",
    "ngx-device-detector": "^1.4.4",
    "ngx-image-cropper": "^1.5.1",
    "ngx-perfect-scrollbar": "9.0.0",
    "ngx-quill": "12.0.1",
    "quill": "1.3.7",
    "rxjs": "6.5.5",
    "screenfull": "3.3.3",
    "tslib": "^1.10.0",
    "uuid": "^8.1.0",
    "videogular2": "7.0.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "9.1.7",
    "@angular/compiler-cli": "9.1.9",
    "@angular/language-service": "9.1.9",
    "@types/core-js": "^2.5.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "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",
    "node-sass": "^4.14.1",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "typescript": "~3.8.3"
  }
}

thanks for your help . If you need anything, tell me in the comments so I can add it.

Upvotes: 4

Views: 5524

Answers (1)

Panagiotis Bougioukos
Panagiotis Bougioukos

Reputation: 18979

I will try to explain a simple error that i have understand in this stack trace.

node_modules/@agm/core/core.module.d.ts:28:79 - error NG6005: AgmCoreModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

28     static forRoot(lazyMapsAPILoaderConfig?: LazyMapsAPILoaderConfigLiteral): ModuleWithProviders;

According to Angular official documentation (starting from Angular 9) ModuleWithProviders is deprecated. Code needs to be migrated.

Angular ModuleWithProviders Migration

As stated by Angular, libraries that are not yet migrated can be used and will be automaticaly migrated by Angular compatibility compiler (ngcc).

According to Angular compatability compiler

you can add in your package.json the following:

{
  "scripts": {
    "postinstall": "ngcc"
  }
}

Then you can remove this module by

npm uninstall @agm/core

And then you can try to add this module again but passing it from ngcc which will do the ModuleWithProviders migration by executing

ng add @agm/core

Hopefully doing that will remove this specific error. Other errors may relate to that and you can dig deeper.

Upvotes: 1

Related Questions