1

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'))
      );
  }
tzm
  • 588
  • 1
  • 12
  • 27
  • what do you get when you run `ng build prod` ? – Nadhir Falta Apr 16 '19 at 20:14
  • @NadhirFalta ng build --prod works without any issues – tzm Apr 16 '19 at 20:18
  • 1
    This is an injector error for the constructor function of `HomeComponent`. Can you update your question to include that function so we can see what you're trying to inject. – Reactgular Apr 16 '19 at 20:34
  • @cgTag I am injecting two services there. One is to store some object state and update it through multiple components and second service sends request to API and get's some data which must be displayed on home page. – tzm Apr 16 '19 at 20:48
  • How are the services provided? – GCSDC Apr 16 '19 at 21:13
  • @GCSDC ResumeService is registered as a provider in providers array inside app.module.ts. like this: "providers: [ ResumeService ]". StatisticsService is injected like any other services, so it has an injectable attribute. I will edit my post and add some code. – tzm Apr 16 '19 at 21:21
  • 1
    How is `ResumeService` imported at AppModule? This may be related to [this question](https://stackoverflow.com/questions/37997824/angular-di-error-exception-cant-resolve-all-parameters). – GCSDC Apr 16 '19 at 21:28
  • @GCSDC like this: import { ResumeService } from './services/resume.service'; I checked the link you gave but for me, it looks like I am injecting this service correctly. – tzm Apr 16 '19 at 21:41
  • Agree, does not seem to be anything wrong with your import. Did you try providing both services on the same way to check which result you get? – GCSDC Apr 16 '19 at 21:52
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191944/discussion-between-tzm-and-gcsdc). – tzm Apr 16 '19 at 22:00
  • Does your project compile if you run `ng build --prod`? – Reactgular Apr 16 '19 at 22:21
  • @cgTag yes and this was the first question asked in this conversation (by Nadhir Falta) – tzm Apr 17 '19 at 05:36

1 Answers1

6

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

Mannaroth
  • 470
  • 5
  • 13
  • My imports always start with a dot, two dots or @ like here: import { NgModule } from '@angular/core'; – tzm Apr 16 '19 at 22:03
  • 1
    are you sure? the error logs state a bunch of ones that don't start with dots – Mannaroth Apr 16 '19 at 22:04
  • @Manaroth okay, you're right. I will fix those imports and let you know ;) Thanks! – tzm Apr 16 '19 at 22:07
  • haha no problem, if you are using visual studio code and use its auto import feature I believe they add it like that automatically – Mannaroth Apr 16 '19 at 22:10
  • this fixed all my problems with import errors. But now I have another problem :(. Don't know why but I am getting those errors: get: TypeError: Cannot read property 'value' of undefined ERROR TypeError: Cannot read property 'resumesBuilt' of undefined – tzm Apr 17 '19 at 15:24
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191998/discussion-between-tzm-and-mannaroth). – tzm Apr 17 '19 at 17:22