我正在使用Angular 9，Webstorage 6中的localStorageService和CLion。

我已经创建了三个服务：YoutubeService，MyLocalStorageService和VideoService。 YoutubeService调用youtube数据api，然后调用MyLocalStorageService函数，该函数获取该数据并将适当的信息存储到本地存储中。视频服务从MyLocalStorageService提取信息，以获取其余组件所需的信息。

我在每个MyLocalStorageService函数的开头以及保存数据后键入console.log。这样做，在我看来，数据已正确存储。与之类似，当我打开开发工具并转到应用程序时，我可以看到数据在那里并且正确。

问题是页面无法加载。控制台中没有错误消息，并且标题和导航栏都不会加载。另外，当我在CLion终端中运行ng serve时，我设置路由的方式应该将localhost重定向到'/ homepage'。但是，这什至没有发生。

YoutubeService.ts的段

callAPI(nextPageToken?): Observable<any> {
    let url = `https://www.googleapis.com/youtube/v3/search?key=${this.apiKey}&channelId=${this.channelId}
    &order=date&part=snippet &type=video,id&maxResults=15`;
    if (nextPageToken) {
        url += `&pageToken=${nextPageToken}`;
    }
    return this.http.get<YTAPIObject>(url)
        .pipe(map(res => {
          console.log(res);
          this.localStorageService.addConfiguration(res);
         console.log(this.localStorageService.storage.retrieve('configuration'));
          return res.items;
        }));
  }

    getYTVidsFromAPI(nextPage?: any) {
        return new Promise((resolve,reject) => {
            this.callAPI(nextPage).subscribe(
                result => this.apiResult = result,(err) => console.log(err),() => {
                    this.localStorageService.addVideos(this.apiResult);
                console.log(this.localStorageService.storage.retrieve('videos'));
                });
        });
    }

MyLocalStorageService.ts的段

public addVideos(items) {
    const videos: Video[] = [];
    console.log('addVideos: Hello');
    items.forEach(obj => {
      const id = obj.id;
      const snippet = obj.snippet;
      const video: Video = {id,snippet};
      videos.push(video);
    });
    this.storage.store('videos',videos);
  }

  public addConfiguration(apiResult) {

      console.log('addConfiguration: Hello');
      const configuration = {
          nextPage: apiResult.nextPageToken,itemsPerPage: apiResult.pageInfo.resultsPerPage,totalItems: apiResult.pageInfo.totalResults
      };
      this.storage.store('configuration',configuration);
  }

VideoService.ts的段

import { MyLocalStorageService } from './my-local-storage.service';


@Injectable({
  providedIn: 'root'
})
export class VideoService {


  constructor(private messageService: MessageService,private localStorageService: MyLocalStorageService,) { }

  getVideos(nextPage?: any): Observable<any>{
    console.log(this.localStorageService.storage.retrieve('videos'));
    if (nextPage) {
      return of(this.localStorageService.storage.retrieve('videos'));
    } else {
      return of(this.localStorageService.storage.retrieve('videos'));
    }
  }

  getconfigInfo(): any {
    console.log(this.localStorageService.storage.retrieve('videos'));
    return of(this.localStorageService.storage.retrieve('configuration'));
  }