Angular 7-服务器端渲染

Question

我已经创建了angular 7应用程序，现在我正尝试向它添加angular通用程序。因此，我遵循了以下步骤：

https://angular.io/guide/universal

在终端中输入以下内容：

ng add @nguniversal/express-engine --clientProject resume-app

然后我这样写：

npm run build:ssr && npm run serve:ssr

它不起作用，终端返回了很多错误：

错误：无法解析/Users/tomaszzmudzinski/Documents/Projects/Resume/resume-app/src/app/components/home/home.component.ts中的HomeComponent的所有参数：（？，？）。src / app / components / home / home.component.ts（2,24）：错误TS2307：找不到模块“ src / app / models / Resume”。src / app / components / home / home.component.ts（3,31）：错误TS2307：找不到模块“ src / app / services / resume.service”。src / app / components / home / home.component.ts（4,44）：错误TS2307：找不到模块“ src / app / models / GetBasicStatisticsResponse”。src / app / components / home / home.component.ts（5,35）：错误TS2307：找不到模块“ src / app / services / statistics.service”。src / app / components / create-resume / add-name / add-name.component.ts（2,24）：错误TS2307：找不到模块“ src / app / models / Resume”。src / app / components / create-resume / add-name / add-name.component.ts（3,31）：错误TS2307：找不到模块src / app / services / resume.service。src / app / components / create-resume / supply-contact-information / supply-contact-information.component.ts（2,24）：错误TS2307：找不到模块src / app / models / Resume。src / app / components / create-resume / supply-contact-information / supply-contact-information.component.ts（3,31）：错误TS2307：找不到模块src / app / services / resume.service。src / app / components / create-resume / supply-contact-information / supply-contact-information.component.ts（5,29）：错误TS2307：找不到模块src / app / services / user.service。src / app / components / create-resume / supply-contact-information / supply-contact-information.component.ts（6,25）：错误TS2307：找不到模块' src / app / models / AddUser”。src / app / components / create-resume / supply-contact-information / supply-contact-information.component.ts（7,29）：错误TS2307：找不到模块src / app / models / Credentials。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（2,24）：错误TS2307：找不到模块“ src / app / models / Resume”。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（3,25）：错误TS2307：找不到模块“ src / app / models /网站”。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（4,23）：错误TS2307：找不到模块“ src / app / models / Skill”。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（5,28）：错误TS2307：找不到模块src / app / models / SkillLevel。src / app / components / edit-resume / edit-resume / edit-resume。component.ts（6,28）：错误TS2307：找不到模块“ src / app / models / Employment”。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（7,27）：错误TS2307：找不到模块“ src / app / models / Education”。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（8,24）：错误TS2307：找不到模块“ src / app / models / Course”。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（9,28）：错误TS2307：找不到模块“ src / app / models / Internship”。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（10,26）：错误TS2307：找不到模块“ src / app / models / Language”。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（11,31）：错误TS2307：找不到模块src / app / models / LanguageLevel。src / app / components / edit-resume / edit-resume / edit-resume.component.ts（12,31）：错误TS2307：找不到模块“ src / app / services / resume.service”。src / app / components / create-resume / social-media / social-media.component.ts（2,29）：错误TS2307：找不到模块“ src / app / services / auth.service”。src / app / components / create-resume / social-media / social-media.component.ts（3,24）：错误TS2307：找不到模块“ src / app / models / Resume”。src / app / components / create-resume / social-media / social-media.component.ts（5,29）：错误TS2307：找不到模块“ src / app / services / user.service”。src / app / components / admin / login / login.component.ts（2,23）：错误TS2307：找不到模块“ src / app / models / Admin / Admin”。src / app / components / edit-resume / websites / websites.component.ts（2,25）：错误TS2307：找不到模块“ src / app / models /网站”。src / app / components / edit-resume / skills / skills.component.ts（2,23）：错误TS2307：找不到模块“ src / app / models / Skill”。src / app / components / edit-resume / skills / skills.component.ts（3,28）：错误TS2307：找不到模块“ src / app / models / SkillLevel”。src / app / components / edit-resume / employments / employments.component.ts（3,28）：错误TS2307：找不到模块“ src / app / models / Internship”。src / app / components / edit-resume / educations / educations.component.ts（2,27）：错误TS2307：找不到模块“ src / app / models / Education”。src / app / components / edit-resume / courses / courses.component.ts（2,24）：错误TS2307：找不到模块src / app / models / Course。src / app / components / edit-resume / hobbies / hobbies.component.ts（2,25）：错误TS2307：找不到模块“ src / app / models / Hobby”。src / app / components / edit-resume / languages / languages.component.ts（2,26）：错误TS2307：找不到模块src / app / models / Language。src / app / components / edit-resume / languages / languages.component.ts（3,31）：错误TS2307：找不到模块“ src / app / models / LanguageLevel”。src / app / components / templates / modern / modern.component.ts（2,24）：错误TS2307：找不到模块“ src / app / models / Resume”。

npm ERR！代码ELIFECYCLE npm ERR！errno 1 npm错误！resume-app@0.0.0 build：客户端和服务器捆绑：ng build --prod && ng run resume-app:server:productionnpm ERR！退出状态1 npm ERR！npm ERR！在resume-app@0.0.0 build：client-and-server-bundles脚本处失败。npm ERR！npm可能不是问题。上面可能还有其他日志记录输出。

npm ERR！可以在以下位置找到该运行的完整日志：npm ERR！
/用户/tomaszzmudzinski/.npm/_logs/2019-04-16T19_57_09_128Z-debug.log npm错误！代码ELIFECYCLE npm ERR！errno 1 npm错误！resume-app@0.0.0 build：ssr：npm run build:client-and-server-bundles && npm run compile:servernpm错误！退出状态1 npm ERR！npm ERR！在resume-app@0.0.0 build：ssr脚本上失败。npm ERR！npm可能不是问题。上面可能还有其他日志记录输出。

npm ERR！可以在以下位置找到该运行的完整日志：npm ERR！
/用户/tomaszzmudzinski/.npm/_logs/2019-04-16T19_57_09_153Z-debug.log

我试图在一个全新的angular 7应用程序上遵循这些步骤，并且成功了。我做错了什么？为了将通用性添加到具有多个组件和服务的现有应用程序中，我应该做些不同的事情。

更新：

home.component.ts

export class HomeComponent implements OnInit {
  resume: Resume;
  statistics: GetBasicStatisticsResponse = new GetBasicStatisticsResponse();

  constructor(private resumeService: ResumeService, private statisticsService: StatisticsService) { }

  ngOnInit() {
    this.resumeService.createInitialResume();
    this.statisticsService.get().subscribe(response => this.statistics = response);
  }

}

statistics.service.ts

@Injectable({
  providedIn: 'root'
})
export class StatisticsService {
  private apiUrl = environment.apiUrl;

  constructor(private http: HttpClient) { }

  get(): Observable<GetBasicStatisticsResponse> {
    return this.http.get<GetBasicStatisticsResponse>(`${this.apiUrl}/statistics`)
      .pipe(
        tap(() => this.log(`Home Page statistics fetched!`, false)),
        catchError(this.handleError<GetBasicStatisticsResponse>('get'))
      );
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(`${operation}: ${error}`);
      return of(result as T);
    };
  }

  private log(message: string, showNotification: boolean) {
    if (showNotification) {
      console.log(message);
    }
  }
}

恢复服务

@Injectable()
export class ResumeService {
   ...
}

app.module.ts

providers: [
   ...
   ResumeService,
   ...
}

statistics.service.ts

  get(): Observable<GetBasicStatisticsResponse> {
    return this.http.get<GetBasicStatisticsResponse>(`${this.apiUrl}/statistics`)
      .pipe(
        tap(() => this.log(`Home Page statistics fetched!`, false)),
        catchError(this.handleError<GetBasicStatisticsResponse>('get'))
      );
  }

Answer 1

我最近遇到了相同的问题，并通过将所有绝对导入更改为相对的导入（当然是npm模块除外）来解决此问题，因此'src/app/services/statistics.service' 它将'../../services/statistics.service'取决于当前文件的位置