Question

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

在终端：（角度cli）中写上

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

然后我写了这个：

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

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

ERROR in：无法解析HomeComponent中的所有参数   /Users/tomaszzmudzinski/Documents/Projects/Resume/resume-app/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 / 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 ERR！ errno 1 npm错误！ resume-app@0.0.0   build：客户端和服务器捆绑包：ng build --prod && ng run resume-app:server:production npm ERR！退出状态1 npm ERR！ npm   呃！在resume-app@0.0.0 build：client-and-server-bundles处失败   脚本。 npm ERR！ npm可能不是问题。有   上面可能还有其他日志记录输出。

npm错误！有关此运行的完整日志，请参见：npm ERR！
  /用户/tomaszzmudzinski/.npm/_logs/2019-04-16T19_57_09_128Z-debug.log   npm ERR！代码ELIFECYCLE npm ERR！ errno 1 npm错误！ resume-app@0.0.0   build：ssr：npm run build:client-and-server-bundles && npm run compile:server npm错误！退出状态1 npm ERR！ npm ERR！失败于   resume-app@0.0.0 build：ssr脚本。 npm ERR！这可能不是   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);
  }

}

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-服务器端渲染

1 个答案: