时间戳

首页 > 解决方案 > Angular 7 - 服务器端渲染

angular - Angular 7 - 服务器端渲染

问题描述

我已经创建了一个 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

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

错误：无法解析 /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/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/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/Website”。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/Hobbies”。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 错误！代码 ELIFECYCLE npm 错误！errno 1 npm 错误！resume-app@0.0.0 build:client-and-server-bundles: ng build --prod && ng run resume-app:server:productionnpm ERR！退出状态 1 npm ERR！npm 错误！在 resume-app@0.0.0 build:client-and-server-bundles 脚本中失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

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

npm 错误！可以在以下位置找到此运行的完整日志：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);
  }

}

统计服务.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);
    }
  }
}

简历.service.ts

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

app.module.ts

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

统计服务.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'))
      );
  }

标签： angularangular7server-side-renderingangular-universal

解决方案

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

推荐阅读