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! [email protected] 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 [email protected] 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! [email protected] 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 [email protected] 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'))
      );
  }
Improve this question
12
  • what do you get when you run ng build prod ? Commented Apr 16, 2019 at 20:14
  • @NadhirFalta ng build --prod works without any issues Commented Apr 16, 2019 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. Commented Apr 16, 2019 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. Commented Apr 16, 2019 at 20:48
  • 1
    How is ResumeService imported at AppModule? This may be related to this question. Commented Apr 16, 2019 at 21:28

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

My imports always start with a dot, two dots or @ like here: import { NgModule } from '@angular/core';
are you sure? the error logs state a bunch of ones that don't start with dots
@Manaroth okay, you're right. I will fix those imports and let you know ;) Thanks!
haha no problem, if you are using visual studio code and use its auto import feature I believe they add it like that automatically
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
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.