Angular 7 - рендеринг на стороне сервера - PullRequest
Новая
       50

Angular 7 - рендеринг на стороне сервера

1 голос
/ 16 апреля 2019

Я создал приложение angular 7 и сейчас пытаюсь добавить в него angular universal.Поэтому я выполнил следующие шаги:

https://angular.io/guide/universal

Написал это в терминале: (angular cli) 

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

, а затем написал: 

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

Не работает, и терминал вернул много ошибок:

ОШИБКА в: Не удается разрешить все параметры для HomeComponent в / Users / tomaszzmudzinski / Документы / Проекты / Резюме / резюме-приложение/src/app/components/home/home.component.ts: (?,?).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 / Website'.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 / приложение / компоненты / создать-резюме / социально-СМИ / социал-media.component.ts (3,24):ошибка TS2307: не удается найти модуль 'src / app / models / Resume'. SRC / приложение / компоненты / создать-резюме / социально-СМИ / социал-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 / приложения / компоненты / редактирование-резюме / сайты / websites.component.ts (2,25): ошибка TS2307: не удается найти модуль 'src / app / models / Website'. SRC / приложение / компоненты / редактировать-резюме / навыки / skill.component.ts (2,23): ошибка TS2307: не удается найти модуль 'src / app / models / Skill'. SRC / приложение / компоненты / редактировать-резюме / навыки / skill.component.ts (3,28): ошибка TS2307: не удается найти модуль 'src / app / models / SkillLevel'. SRC / приложение / компоненты / редактирование-резюме / ЗАНЯТИЯ / employments.component.ts (3,28): ошибка TS2307: не удается найти модуль 'src / app / models / Internship'. SRC / приложение / компоненты / редактирование-резюме / образования / educations.component.ts (2,27): ошибка TS2307: не удается найти модуль 'src / app / models / Education'. SRC / приложения / компоненты / редактирование-резюме / курсы / courses.component.ts (2,24): ошибка TS2307: не удается найти модуль 'src / app / models / Course'. SRC / приложения / компоненты / редактирование-резюме / хобби / hobbies.component.ts (2,25): ошибка TS2307: не удается найти модуль 'src / app / models / Hobbies'. SRC / приложение / компоненты / редактирование-резюме / языки / languages.component.ts (2,26): ошибка TS2307: не удается найти модуль 'src / app / models / Language'. SRC / приложение / компоненты / редактирование-резюме / языки / 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'.

нпм ERR! код ELIFECYCLE npm ERR! errno 1 npm ERR! resume-app@0.0.0 build: клиент-серверные комплекты: ng build --prod && ng run resume-app:server:production npm ERR! Статус выхода 1 npm ERR! НПМ ERR! Ошибка при сборке resume-app@0.0.0: клиент-серверные комплекты скрипт. нпм ERR! Это, вероятно, не проблема с npm. Есть Вероятно, дополнительные записи журнала выше.

нпм ERR! Полный журнал этого прогона можно найти в: npm ERR!
/Users/tomaszzmudzinski/.npm/_logs/2019-04-16T19_57_09_128Z-debug.log нпм ERR! код 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! Статус выхода 1 npm ERR! нпм ERR! Не удалось в резюме-app@0.0.0 build: ssr скрипт. нпм ERR! Это, вероятно, не проблема с нпм. Скорее всего, выше выводится логирование.

npm ERR! Полный журнал этого прогона можно найти в: npm ERR!
/Users/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);
    }
  }
}

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

1 Ответ

5 голосов
/ 17 апреля 2019

Недавно я столкнулся с той же проблемой и исправил ее, изменив все абсолютные импорты на относительные (за исключением, конечно, модулей npm), поэтому 'src/app/services/statistics.service' станет '../../services/statistics.service' в зависимости от местоположения текущего файла

...