Angular 7 - 服务器端渲染

问题描述 投票:1回答:1

我已经创建了一个角度7应用程序,现在我正在尝试为它添加角度通用。所以我按照这些步骤:

https://angular.io/guide/universal

在终端写道:(角度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):error 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):error TS2307:找不到模块'src / app / models / Resume'。 src / app / components / create-resume / supply-contact-information / supply-contact-information.component.ts(3,31):error TS2307:找不到模块'src / app / services / resume.service'。 src / app / components / create-resume / supply-contact-information / supply-contact-information.component.ts(5,29):error TS2307:找不到模块'src / app / services / user.service'。 src / app / components / create-resume / supply-contact-information / supply-contact-information.component.ts(6,25):error TS2307:找不到模块'src / app / models / AddUser'。 src / app / components / create-resume / supply-contact-information / supply-contact-information.component.ts(7,29):error 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'。

错误的ERR!代码ELIFECYCLE npm ERR!错误1 npm ERR! [email protected] build:client-and-server-bundle:ng build --prod && ng run resume-app:server:production npm ERR!退出状态1 npm ERR!错误的ERR!在[email protected] build:client-and-server-bundles脚本失败。错误的ERR!这可能不是npm的问题。上面可能有额外的日志记录输出。

错误的ERR!可以在以下位置找到此运行的完整日志:npm ERR! /Users/tomaszzmudzinski/.npm/_logs/2019-04-16T19_57_09_128Z-debug.log npm ERR!代码ELIFECYCLE npm ERR!错误1 npm ERR! [email protected] build:ssr:qa​​zxswpoi npm ERR!退出状态1 npm ERR!错误的ERR! [email protected] build:ssr脚本失败。错误的ERR!这可能不是npm的问题。上面可能有额外的日志记录输出。

错误的ERR!可以在以下位置找到此运行的完整日志:npm ERR! /Users/tomaszzmudzinski/.npm/_logs/2019-04-16T19_57_09_153Z-debug.log

我尝试在一个全新的角度7应用程序上执行这些步骤并且它有效。我做错了什么?我应该采取不同的做法,以便为具有多个组件和服务的现有应用程序添加通用性。

更新:

home.component.ts

npm run build:client-and-server-bundles && npm run
  compile:server

statistics.service.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);
  }

}

resume.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);
    }
  }
}

app.module.ts

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

statistics.service.ts

providers: [
   ...
   ResumeService,
   ...
}
angular angular7 serverside-rendering angular-universal
1个回答
5
投票

我最近遇到了同样的问题并通过将所有绝对导入更改为相对的问题来修复它(当然除了npm模块)所以 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')) ); } 将根据当前文件的位置变为'src/app/services/statistics.service'

© www.soinside.com 2019 - 2024. All rights reserved.