在Angular 7中使用npm run build命令时，如何在正文末尾的index.html中添加自定义脚本？

问题描述

无论如何，我们在构建角度应用程序之后是否可以在index.html中添加脚本文件？

我尝试过的事情：

{
 "build": {
  "builder": "@angular-devkit/build-angular:browser","options": { ... },"configurations": {
   "production": {
    "fileReplacements": [{
     "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
    }],"scripts": ["src/assets/scripts/my-custom-script.js"],...
    }
  }
 }
}

这：

// main.ts
if (environment.production) {
  enableProdMode();
  const scriptEl = window.document.createElement('script');
  scriptEl.src = 'https://js.intercomcdn.com/vendors-app-modern.28279aba.js';
  window.document.body.appendChild(scriptEl);
}

在两个提议的解决方案中，我在运行npm run build命令后，我的dist / projectName / index.html文件都保持不变。

解决方法

您可以直接在index.html中添加脚本

 <script src="./assets/scripts/my-custom-script.js"></script>

已更新

我认为您有一个选择：

在assets中创建一个名为 dynamic_script 的文件夹，然后在其中放置2个文件

1-您的js文件（如ARRS5125-MLL-YourJsfile.js）

2-一个JSON文件（如info.json），请在此处设置文件名

{
 "filename":"ARRS5125-MLL-YourJsfile.js"
}

注意

每当更改脚本名称时，请更改JSON文件中的文件名 根据您的js名称。

现在，您可以按以下方式动态加载js文件

步骤1： 创建服务：

@Injectable({ providedIn: "root" })
export class LoadScriptService {
    constructor(private http: HttpClient) { }

    getJsonFileName(): Promise<any> {
        return this.http.get('./assets/dynamic_script/info.json').toPromise();
    }


    loadScript(name: string) {
        return new Promise((resolve,reject) => {
            //load script
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = `/assets/dynamic_script/${name}`;
            if (script.readyState) {  //IE
                script.onreadystatechange = () => {
                    if (script.readyState === "loaded" || script.readyState === "complete") {
                        script.onreadystatechange = null;
                        resolve({ script: name,loaded: true,status: 'Loaded' });
                    }
                };
            } else {  //Others
                script.onload = () => {
                    resolve({ script: name,status: 'Loaded' });
                };
            }
            script.onerror = (error: any) => resolve({ script: name,loaded: false,status: 'Loaded' });
            document.getElementsByTagName('head')[0].appendChild(script);
        });
    }

}

第2步：在您的组件中

export class AppComponent implements OnInit {
  constructor(private scriptService: LoadScriptService) { }
  ngOnInit(): void {

  }

  private async loadJsonAndScript() {
    const fileInfo = await this.scriptService.getJsonFileName();
    this.scriptService.loadScript(fileInfo.fileName)
  }

  load() {
    this.loadJsonAndScript();
  }
}

注意：

构建项目后，只要在 dynamic_script 中添加新的js文件，然后打开info.json并手动替换新名称即可。

,

可能的解决方案是使用fileReplacements机制的功能。只需创建index.prod.html并将其添加到

"fileReplacements": [{
  "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
},{
  "replace": "src/index.html","with": "src/index.prod.html"
}]

并在index.prod.html文件中添加所需的任何内容