Angular9 "没有为ActivatedRoute提供服务

Question

我是Angular 9的初学者。实际上，教程把路由的东西都放在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)

其实我从使用provider开始就有这个问题。这很难理解，因为控制台没有给出任何类行代码。不过我试图在这里用下面的代码来描述应该使用它的有用的类，如果有更多的类需要，我会这样做。

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