Angular9 'Нет данных для ActivatedRoute'

Question

Я новичок в Angular 9. Я слежу за онлайн-видеоуроком, чтобы выполнить упражнение по angular, но у моего кода (того же самого урока) возникла проблема, и я не знаю, как это выяснить. , На самом деле, в учебнике все компоненты маршрутизации помещены в app.module.ts, но я использую app-routing.module.ts для разделения проблем. Когда я запускаю 'ng serve --open', страница все еще остается пустой со следующей ошибкой:

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)

На самом деле у меня возникла эта проблема, поскольку я использую провайдеров. Это трудно понять, потому что консоль не дает никакого кода строки класса. Однако я пытаюсь описать здесь полезные классы, которые должны использовать его, следующим образом, если потребуется больше классов, я сделаю это:

- 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++;
  }

}

Поскольку я использую app-routing.module.ts, в app.module учебника есть существенная разница (в него также помещаются компоненты маршрутизации):

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 { }

Я пробовал использовать решения, полученные из похожих вопросов, но это не работает.

Answer 1

У вас ошибка ввода,

измените @Angular/router с @angular/router в book.component.ts