Angular 7 - server-side rendering

Question

I've created an angular 7 application and now I'm trying to add angular universal to it. So I followed those steps:

https://angular.io/guide/universal

Wrote this in terminal: (angular cli)

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

and then I wrote this:

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

It not works and terminal returned a lot of errors:

ERROR in : Can't resolve all parameters for HomeComponent in /Users/tomaszzmudzinski/Documents/Projects/Resume/resume-app/src/app/components/home/home.component.ts: (?, ?). src/app/components/home/home.component.ts(2,24): error TS2307: Cannot find module 'src/app/models/Resume'. src/app/components/home/home.component.ts(3,31): error TS2307: Cannot find module 'src/app/services/resume.service'. src/app/components/home/home.component.ts(4,44): error TS2307: Cannot find module 'src/app/models/GetBasicStatisticsResponse'. src/app/components/home/home.component.ts(5,35): error TS2307: Cannot find module 'src/app/services/statistics.service'. src/app/components/create-resume/add-name/add-name.component.ts(2,24): error TS2307: Cannot find module 'src/app/models/Resume'. src/app/components/create-resume/add-name/add-name.component.ts(3,31): error TS2307: Cannot find module 'src/app/services/resume.service'. src/app/components/create-resume/supply-contact-information/supply-contact-information.component.ts(2,24): error TS2307: Cannot find module 'src/app/models/Resume'. src/app/components/create-resume/supply-contact-information/supply-contact-information.component.ts(3,31): error TS2307: Cannot find module 'src/app/services/resume.service'. src/app/components/create-resume/supply-contact-information/supply-contact-information.component.ts(5,29): error TS2307: Cannot find module 'src/app/services/user.service'. src/app/components/create-resume/supply-contact-information/supply-contact-information.component.ts(6,25): error TS2307: Cannot find module 'src/app/models/AddUser'. src/app/components/create-resume/supply-contact-information/supply-contact-information.component.ts(7,29): error TS2307: Cannot find module 'src/app/models/Credentials'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(2,24): error TS2307: Cannot find module 'src/app/models/Resume'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(3,25): error TS2307: Cannot find module 'src/app/models/Website'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(4,23): error TS2307: Cannot find module 'src/app/models/Skill'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(5,28): error TS2307: Cannot find module 'src/app/models/SkillLevel'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(6,28): error TS2307: Cannot find module 'src/app/models/Employment'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(7,27): error TS2307: Cannot find module 'src/app/models/Education'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(8,24): error TS2307: Cannot find module 'src/app/models/Course'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(9,28): error TS2307: Cannot find module 'src/app/models/Internship'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(10,26): error TS2307: Cannot find module 'src/app/models/Language'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(11,31): error TS2307: Cannot find module 'src/app/models/LanguageLevel'. src/app/components/edit-resume/edit-resume/edit-resume.component.ts(12,31): error TS2307: Cannot find module 'src/app/services/resume.service'. src/app/components/create-resume/social-media/social-media.component.ts(2,29): error TS2307: Cannot find module 'src/app/services/auth.service'. src/app/components/create-resume/social-media/social-media.component.ts(3,24): error TS2307: Cannot find module 'src/app/models/Resume'. src/app/components/create-resume/social-media/social-media.component.ts(5,29): error TS2307: Cannot find module 'src/app/services/user.service'. src/app/components/admin/login/login.component.ts(2,23): error TS2307: Cannot find module 'src/app/models/Admin/Admin'. src/app/components/edit-resume/websites/websites.component.ts(2,25): error TS2307: Cannot find module 'src/app/models/Website'. src/app/components/edit-resume/skills/skills.component.ts(2,23): error TS2307: Cannot find module 'src/app/models/Skill'. src/app/components/edit-resume/skills/skills.component.ts(3,28): error TS2307: Cannot find module 'src/app/models/SkillLevel'. src/app/components/edit-resume/employments/employments.component.ts(3,28): error TS2307: Cannot find module 'src/app/models/Internship'. src/app/components/edit-resume/educations/educations.component.ts(2,27): error TS2307: Cannot find module 'src/app/models/Education'. src/app/components/edit-resume/courses/courses.component.ts(2,24): error TS2307: Cannot find module 'src/app/models/Course'. src/app/components/edit-resume/hobbies/hobbies.component.ts(2,25): error TS2307: Cannot find module 'src/app/models/Hobbies'. src/app/components/edit-resume/languages/languages.component.ts(2,26): error TS2307: Cannot find module 'src/app/models/Language'. src/app/components/edit-resume/languages/languages.component.ts(3,31): error TS2307: Cannot find module 'src/app/models/LanguageLevel'. src/app/components/templates/modern/modern.component.ts(2,24): error TS2307: Cannot find module 'src/app/models/Resume'.

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! resume-app@0.0.0 build:client-and-server-bundles: ng build --prod && ng run resume-app:server:production npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the resume-app@0.0.0 build:client-and-server-bundles script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
/Users/tomaszzmudzinski/.npm/_logs/2019-04-16T19_57_09_128Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! resume-app@0.0.0 build:ssr: npm run build:client-and-server-bundles && npm run compile:server npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the resume-app@0.0.0 build:ssr script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
/Users/tomaszzmudzinski/.npm/_logs/2019-04-16T19_57_09_153Z-debug.log

I tried to follow these steps on an entirely new angular 7 application and it worked. What I am doing wrong? What I should do differently in order to add universal to the existing application which has multiple components and services.

Update:

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

resume.service.ts

@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

I recently encountered the same problem and fixed it by changing all absolute imports to relative ones (except for npm modules of course) so 'src/app/services/statistics.service' will become '../../services/statistics.service' depending on the current file's location