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)

实际上，自从我使用提供程序以来，我就遇到了这个问题。 很难理解，因为控制台没有给出任何 class 行代码。 但是，我试图在这里描述应该使用它的有用类，如果需要更多类，我会这样做：

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

你有一个打字错误，

在book.component.ts @Angular/router更改为@angular/router