Angular 12：如何添加自定义编译脚本来构建输出块？

问题描述

我们需要为我们的应用程序部署一个自定义的 Service Worker（不是 Angular Service Worker），并希望在应用程序中编写它，以便我们可以执行以下操作：

///... app.module.ts... simplified to get the idea
function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    // here I have the first problem: this filename is the file in my source
    navigator.serviceWorker.register('./service-worker.ts',{scope: `/${enviroment.BASE_PATH}/sw-test/`});
  }
}

@NgModule({
  //...
  providers: [{
      provide: APP_INITIALIZER,useFactory: registerServiceWorker,multi: true,},]
})
public class AppModule {}

// ./service-worker.ts
// again this is a simplified example; it is a ts file because we are importing other ts files 
// like the environment file which is replaced by the correct version as part of the angular build
self.addEventListener('fetch',function(event) {
  event.respondWith(Promise.resolve('example').then(function (text){
    return new Response(text,{ headers: {'Content-Type': 'text/plain' }});
  }));
});

我们遇到了一个问题：第二个文件没有包含在我们的构建中，并且要注册的字符串没有使用输出构建目录中的 .js 文件进行更新......

我在想是否可以强制编译输出为特定名称，我可以执行以下操作：

navigator.serviceWorker.register(`/${enviroment.BASE_PATH}/service-worker.js`,{scope: `/${enviroment.BASE_PATH}/sw-test/`});

但似乎没有任何方法可以触发 angular 来构建我能弄清楚的特定命名块。这是可能的，还是已经存在一些自定义构建器来执行此操作或有关如何编写某些内容的文档？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）