Angular9 'No provided for ActivatedRoute'

Question

I'm beginner in Angular 9. I'm following an online video tutorial to excercise on angular, but my code (same of the tutorial) had a problem and I don't know of to figure out. Actually, tutorial put routing stuffs all inside app.module.ts, but I use app-routing.module.ts to separate concerns. When I launch 'ng serve --open', page still blank with the following error:

core.js:6185 ERROR NullInjectorError: R3InjectorError(AppModule)[ActivatedRoute -> ActivatedRoute -> ActivatedRoute]: 
  NullInjectorError: No provider for ActivatedRoute!
    at NullInjector.get (http://localhost:4200/vendor.js:16926:27)
    at R3Injector.get (http://localhost:4200/vendor.js:30642:33)
    at R3Injector.get (http://localhost:4200/vendor.js:30642:33)
    at R3Injector.get (http://localhost:4200/vendor.js:30642:33)
    at NgModuleRef$1.get (http://localhost:4200/vendor.js:47971:33)
    at Object.get (http://localhost:4200/vendor.js:45804:35)
    at getOrCreateInjectable (http://localhost:4200/vendor.js:20704:39)
    at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:34541:12)
    at NodeInjectorFactory.BookComponent_Factory [as factory] (http://localhost:4200/main.js:733:153)
    at getNodeInjectable (http://localhost:4200/vendor.js:20849:44)

Actually I had this problem since I use providers. Is it hard to understand, because of console doesn't give any class line code. However I'm trying to describe here useful classes that should use it by following, if more classes needs, I will do that:

--app.module.ts--

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookComponent } from './components/book/book.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BooklistComponent } from './components/booklist/booklist.component';
import { BookEditComponent } from './components/book-edit/book-edit.component';
import { TreeComponent } from './components/tree/tree.component';
import { NgInitDirective } from './directive/ng-init/ng-init.directive';

// for angular firebase #https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

// import our service (that uses firebase)
import { CartService } from './services/cart/cart.service'

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    BookComponent,
    BooklistComponent,
    BookEditComponent,
    TreeComponent,
    NgInitDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase), // have a look in firebase.ts
    AngularFireModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

--app-routing.module.ts--

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BookComponent } from './components/book/book.component';
import { BookEditComponent } from './components/book-edit/book-edit.component';
import { BooklistComponent } from './components/booklist/booklist.component';


const routes: Routes = [
  { path: 'books/:title',  component: BookComponent},
  { path: 'books/:title/edit', component: BookEditComponent},
  { path: 'books', component: BooklistComponent},
  {
    path: '',
    redirectTo: 'books/',
    pathMatch: 'full'
  }
];

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

--book.component.ts--

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { BookModel } from '../../models/book/book.model';
import { CurrencyPipe } from '@angular/common';

import { ActivatedRoute } from '@Angular/router'
import { CartService } from '../../services/cart/cart.service';

@Component({
  selector: 'book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {
  @Input() book: BookModel;
  @Output() addToCart: EventEmitter<BookModel> = new EventEmitter();

  constructor(private route: ActivatedRoute, private cs: CartService) {
    route.params.subscribe(res => {
      this.book = BookModel.find(res['title']);
    });
  }

  ngOnInit(): void {
  }

  sendToCart() {
    this.addToCart.emit(this.book);
    // the following method is added in cart.service.ts
    this.cs.add(this.book);
  }

  // methods
  votesCounter() {
    return this.book.upvotes;
  }
  upvote() {
    return this.book.upvotes++;
  }

}

As I use app-routing.module.ts, there is a quite difference in app.module of tutorial (that puts also routing stuffs inside it):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestore } from 'angularfire2/firestore';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';
import { BookComponent } from './components/book/book.component';
import { BookListComponent } from './components/book-list/book-list.component';
import { BookEditComponent } from './components/book-edit/book-edit.component';
import { TreeComponent } from './components/tree/tree.component';
import { NgInitDirective } from './directive/ng-init/ng-init.directive';
import { CartService } from './services/cart/cart.service';

const bookRoutes: Routes = [
  { path: 'books/:title', component: BookComponent },
  { path: 'books/:title/edit', component: BookEditComponent },
  { path: 'books', component: BookListComponent },
  {
    path: '',
    redirectTo: 'books/',
    pathMatch: 'full'
  }
]

@NgModule({
  declarations: [
    AppComponent,
    BookComponent,
    BookListComponent,
    BookEditComponent,
    TreeComponent,
    NgInitDirective
  ],
  imports: [
    RouterModule.forRoot(bookRoutes),
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I tryed with solutions given from similar questions, but it doesn't work.

Answer 1

You have a typing error,

change @Angular/router with @angular/router in book.component.ts