Angular 7 - 服务器端渲染

Question

我已经创建了一个 angular 7 应用程序，现在我正在尝试向其添加 angular 通用。所以我遵循了这些步骤：

在终端中写入：(angular cli)

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

然后我写了这个：

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

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

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

我尝试在一个全新的 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'))
      );
  }

Answer 1

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

Angular 7 - 服务器端渲染

Angular 7 - server-side rendering

server-side-rendering

angular-universal

angular

angular7