Angular：防止资产文件夹发生更改时自动重新编译

Posted 2023-02-27

技术标签:

【中文标题】Angular：防止资产文件夹发生更改时自动重新编译【英文标题】：Angular: prevent auto recompile when there is a change in assets folder 【发布时间】：2020-01-15 01:50:57 【问题描述】：

我正在尝试在 Angular 项目的资产中下载从 Spring Boot 生成的文件。当我从 Angular 服务调用 Spring API 时，Angular CLI 在资产 Angular 文件夹中创建文件后重新编译项目，然后在从 Spring Boot API 获取响应之前重新加载页面。

我尝试通过多种方式从 Angular 调用 Spring Boot API：

在我的组件的 ngOnInit() 中调用 api 在我的组件的构造函数中调用api 在单独的函数中调用 api 在下载功能中使用异步等待

我不知道如何继续

弹簧靴

 @GetMapping(path = "/downloads/fileId", produces = "application/json")
    @ResponseBody
    public ResponseEntity<String> download(@PathVariable String fileId)
        Gson gson = createGson();

        List<com.bioimis.blp.entity.File> fileById;

        try 
            fileById = fileRepository.findFileById(fileId);

         catch (Exception e) 
            logger.error(e.getMessage());
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        

        if (fileById.isEmpty()) 
            logger.error(fileId + " not found");
            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
        

        if(fileById.get(0).getDeletionDate() != null) 

            List<String> phrases = new ArrayList<>();

            try 
                phrases = translationRepository.getAllTranslationsByFileId(fileById.get(0).getId());
             catch (Exception e) 
                logger.error(e.getMessage());
                return ResponseEntity.status(HttpStatus.OK).body(null);
            

            String file = "";

            for (int i = 0; i < phrases.size(); i++) 
                file = file.concat(phrases.get(i));
            
            file = file.concat("\0");

            /*Suppongo che prima dell'estensione gli ultimi 5 caratteri del file sono in formato 'languageCode_countryCode'*/
            String nameFile = fileById.get(0).getPath().split("/")[fileById.get(0).getPath().split("/").length - 1];

            Language language;
            try 
                language = languageRepository.findLanguageById(fileById.get(0).getLanguageId()).get(0);
             catch (Exception e) 
                logger.error(e.getMessage());
                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
            

            int i = StringUtils.lastIndexOf(nameFile, '.');
            String ext = StringUtils.substringAfter(nameFile, ".");

            nameFile = nameFile.substring(0, i - 5) + language.getLanguageCode() + "_" + language.getCountryCode() + "." + ext;

            Path path = Paths.get(pathDownload + "/" + nameFile);

            try 
-----------------------------------------------------------------------------
                Files.write(path, file.getBytes());
------------>after this instruction, angular reloads the page<---------------
-----------------------------------------------------------------------------
             catch (IOException e) 
                logger.error(e.getMessage());
                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
            

            return ResponseEntity.status(HttpStatus.OK).body(gson.toJson(path.toString()));
        

        return ResponseEntity.status(HttpStatus.OK).body(null);

角度组件

 downloadFile(fileId: string) 
    let link: string;

    this.http.downloadFile(fileId).subscribe(
      data => 
        link = data;
      
    );

    console.log(link);
    return link;

角度服务

downloadFile(fileId: string) 
    const myheader = new HttpHeaders().set('Authorization', this.token);
    return this.http.get<string>(this.url.concat('files/downloads/' + fileId),  headers: myheader );

我只是希望在不重新加载角度组件的情况下从 spring boot api 获得响应。

（在邮递员中它可以正常工作）

【问题讨论】：

【参考方案1】：

这根本不起作用有两个原因：

在 html 组件模板中绑定函数会导致无限循环，这是一种不好的做法。在 Angular 中的静态文件夹中的资产中创建一个文件，因此每次该文件夹或在 angular.json 中的资产中链接的外部文件夹使用新文件进行更新时，它都会重新加载组件

我修改了我的下载函数，它通过响应返回文件的所有文本，然后我创建了一个 blob 文件 (https://stackblitz.com/edit/angular-blob-file-download?file=app%2Fapp.component.ts)，当用户单击下载按钮时，它将被下载。

【讨论】：

【参考方案2】：

启动 Angular 应用程序（而不是 ng serve）