CODEWITHSUNDEEP
javascriptangulartypescript
Raj Kumar
Raj Kumar

Reputation: 31

error NG8001: 'router-outlet' is not a known element in Angular 12

I have upgraded angular version from 5 to 12 and It giving error error NG8001: 'router-outlet' is not a known element

I have lot of searched about this and did not worked for me.

Also giving the errors of Can't bind to 'ngModel' since it isn't a known property of 'textarea'.I have upgraded all package to latest and still not working. Also some third party module is not working like : pdf-viewer

Thanks in Advance.

My app.routing.module.ts :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';
import {CanActivate} from "@angular/router";
const routes: Routes = [
    { path: '',redirectTo: 'header-one-layout' ,pathMatch:'full'},
    { path: 'header-one-layout', loadChildren: () => import('./header-one-layout/header-one-layout.module').then(m => m.HeaderOneLayoutModule),canActivate: [AuthGuard] },
    { path: 'header-two-layout', loadChildren: () => import('./header-two-layout/header-two-layout.module').then(m => m.HeaderTwoLayoutModule),canActivate: [AuthGuard] },
    { path: 'header-three-layout', loadChildren: () => import('./header-three-layout/header-three-layout.module').then(m => m.HeaderThreeLayoutModule),canActivate: [AuthGuard] },
    { path: 'header-four-layout', loadChildren: () => import('./header-four-layout/header-four-layout.module').then(m => m.HeaderFourLayoutModule),canActivate: [AuthGuard] },
    { path: 'header-five-layout', loadChildren: () => import('./header-five-layout/header-five-layout.module').then(m => m.HeaderFiveLayoutModule),canActivate: [AuthGuard] },
    { path: 'header-six-layout', loadChildren: () => import('./header-six-layout/header-six-layout.module').then(m => m.HeaderSixLayoutModule),canActivate: [AuthGuard] },
    { path: 'all-prescription/:params', loadChildren: () => import('./confirmation-popup/all-prescription/all-prescription.module').then(m => m.AllPrescriptionModule),canActivate: [AuthGuard] },
    { path: 'user-can-view-prescription/:params', loadChildren: () => import('./print-prescription/print-prescription.module').then(m => m.PrintPrescriptionModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes,{useHash: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

My app.module.ts :

import { NgModule ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import {OverlayModule} from '@angular/cdk/overlay';

import { AppComponent } from './app.component';


import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AgmCoreModule } from '@agm/core';
import { CountdownTimerModule } from 'ngx-countdown-timer';
import { ScrollToModule } from 'ng2-scroll-to-el';
import { AuthGuard } from './auth.guard';
import { FormsModule,FormGroup, FormBuilder, Validators, FormControl,ReactiveFormsModule } from '@angular/forms';
import { environment } from '../environments/environment.prod';
import {ConfirmationDialogComponent} from './confirmation-popup/confirmation-dialog/confirmation-dialog.component'
import {ConfirmationDialogUpdateComponent} from './confirmation-popup/confirmation-dialog-update/confirmation-dialog-update.component';
import {CustomDialogComponent} from './confirmation-popup/custom-dialog/custom-dialog.component';
import { UiSwitchModule } from 'ngx-toggle-switch';
import {MatDialogModule} from '@angular/material/dialog';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import { AllPrescriptionComponent } from './confirmation-popup/all-prescription/all-prescription.component';
import { PinchZoomModule } from 'ngx-pinch-zoom';

import { RouterModule } from '@angular/router';

import { PdfViewerModule } from 'ng2-pdf-viewer';
// import { NgbdTooltipDelay } from './tooltip-delay';
@NgModule({
  declarations: [
    AppComponent,
    ConfirmationDialogComponent,
    ConfirmationDialogUpdateComponent,
    CustomDialogComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PinchZoomModule,
    NgbModule,
    RouterModule,
    ToastrModule.forRoot({
      preventDuplicates: true,
    }),
    BrowserAnimationsModule,
    OverlayModule,
    MatDialogModule,
    HttpModule,
    MatProgressBarModule,
    CountdownTimerModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: environment.googleApiKey,
      libraries: ["places"]
    }),
    ScrollToModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    PdfViewerModule,
    UiSwitchModule
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent],
  entryComponents:[ConfirmationDialogComponent,ConfirmationDialogUpdateComponent,CustomDialogComponent] ,
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

My Package.json :

  "name": "doctm",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --aot --buildOptimizer --commonChunk --vendorChunk --optimization --progress",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "^12.0.0",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "^12.0.0",
    "@angular/compiler": "^12.0.0",
    "@angular/core": "^12.0.0",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "^12.0.0",
    "@angular/http": "^7.2.16",
    "@angular/material": "^12.0.0",
    "@angular/platform-browser": "^12.0.0",
    "@angular/platform-browser-dynamic": "^12.0.0",
    "@angular/router": "^12.0.0",
    "@google-cloud/translate": "^2.1.2",
    "@google/maps": "^0.4.6",
    "@ng-bootstrap/ng-bootstrap": "^9.1.1",
    "@ngtools/webpack": "^12.0.0",
    "@nicky-lenaers/ngx-scroll-to": "^1.0.0",
    "@rxjs/rx": "^4.1.0",
    "angular-bootstrap-datetimepicker": "^4.0.2",
    "angular-confirmation-popover": "^4.2.1",
    "angular-material-badge": "^1.2.9",
    "angular-save-html-to-pdf": "^1.3.2",
    "angular2-datetimepicker": "^1.1.0",
    "angular2-google-place": "^2.0.2",
    "angular4-fusioncharts": "^1.0.0",
    "angular5-csv": "^0.2.9",
    "chart.js": "^2.7.2",
    "ckeditor": "^4.11.2",
    "core-js": "^2.4.1",
    "country-state-city": "0.0.5",
    "d3": "^5.7.0",
    "fullcalendar": "^3.7.0",
    "fusioncharts": "^3.12.2",
    "google-maps": "^3.3.0",
    "google-maps-api-loader": "^1.1.1",
    "googlemaps": "^1.12.0",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-alpha.12",
    "jquery": "^3.3.1",
    "jspdf": "^1.4.1",
    "jspdf-autotable": "^2.3.5",
    "mouse-wheel-zoom": "^1.1.5",
    "ng-fullcalendar": "^1.7.0",
    "ng-pick-datetime": "^7.0.0",
    "ng-recaptcha": "^4.3.0",
    "ng-selectize": "^1.1.3",
    "ng2-charts": "^2.4.2",
    "ng2-dnd": "^5.0.2",
    "ng2-dragula": "^1.5.0",
    "ng2-material-dropdown": "^0.11.0",
    "ng2-pdf-viewer": "^3.0.2",
    "ng2-scroll-to": "^1.0.7",
    "ng2-scroll-to-el": "^1.2.1",
    "ng2-simple-timer": "^1.3.3",
    "ng4-auto-complete": "^1.0.0",
    "ngx-bar-rating": "^1.1.0",
    "ngx-chips": "^2.2.2",
    "ngx-countdown-timer": "^0.1.9",
    "ngx-drag-drop": "^1.0.3",
    "ngx-google-places-autocomplete": "^2.0.1",
    "ngx-papaparse": "^4.0.4",
    "ngx-pinch-zoom": "^2.4.4",
    "ngx-slick": "^0.2.1",
    "ngx-stars": "^1.2.0",
    "ngx-tinymce": "^7.0.0",
    "ngx-toastr": "^8.8.0",
    "ngx-toggle-switch": "^2.0.5",
    "ngx-webcam": "^0.2.0",
    "plyr": "^3.5.4",
    "print-this": "^1.14.1",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.2.2",
    "selectize": "^0.12.6",
    "socket.io-client": "^2.1.1",
    "sweetalert2": "^8.14.0",
    "tslib": "^2.0.0",
    "wheelzoom": "^4.0.1",
    "wheelzoom.js": "^1.0.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.0",
    "@angular/cli": "12.0.0",
    "@angular/compiler-cli": "^12.0.0",
    "@angular/language-service": "^12.0.0",
    "@types/googlemaps": "^3.30.11",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.3.27",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "node-sass": "^4.14.1",
    "protractor": "~7.0.0",
    "ts-node": "~4.1.0",
    "tslint": "~6.1.0",
    "typescript": "^4.2.4"
  }
}

Upvotes: 1

Views: 2803

Answers (2)

Muhannad
Muhannad

Reputation: 178

for whom the first solution didn't work out, the problem might not be in the RoutingModule rather it's in some other Module that you updated,

same thing happened to me: my app.module.ts file

import { GalleryModule } from '@ks89/angular-modal-gallery';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    GalleryModule.forRoot()
    ...]

removing the 'forRoot()' from the GalleryModule fixed my problem so it might be another module that is causing the error

Upvotes: 3

Kinglish
Kinglish

Reputation: 23664

Remove RouterModule, from your app.module.ts imports - You've got that covered in AppRoutingModule, which you are correctly importing in app.module.ts and I think that's the reason you're gettin that error.

ngModel is located in FormsModule - import that on relevant *.component.ts files

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

Upvotes: 1

Related Questions