Как добавить собственный сценарий в index.html в конце тела при использовании команды сборки npm run в Angular 7?

Question

Есть ли способ добавить файл сценария в index.html после создания нашего приложения angular?

вещи, которые я пробовал:

{
 "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);
}

в обоих предлагаемых решениях мой файл dist/projectName/index.html остался неизменным после того, как я запустил команду сборки npm run...

Answer 1

Одно из возможных решений - использовать механизм 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

Answer 2

Вы можете добавить скрипт прямо в index.html

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

ОБНОВЛЕНО

На мой взгляд, у вас есть один вариант:

Создайте папку с именем dynamic_script в assets а потом положить туда 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, loaded: true, 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();
  }
}

ЗАМЕТКА:

После сборки проекта всякий раз, когда вы добавляете новый файл js в dynamic_script, затем открывайте info.json и замените новое имя вручную.