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

Можем ли мы в любом случае добавить файл сценария в 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);
}

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


person john    schedule 13.10.2020    source источник
comment
Сценарии не входят в комплект js-файла?   -  person Lautre    schedule 13.10.2020


Ответы (2)


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

person Timothy    schedule 13.10.2020

Вы можете добавить скрипт прямо в 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 и заменяйте новое имя вручную.

person AbolfazlR    schedule 13.10.2020
comment
Но тогда мне нужно было бы добавлять его вручную каждый раз после сборки... это не желаемая функциональность. - person john; 13.10.2020
comment
почему ты хочешь это сделать? - person AbolfazlR; 13.10.2020
comment
Поскольку этот скрипт не всегда будет одним и тем же, в имени есть некоторые числа, которые будут постоянно меняться, это что-то вроде версии, и поэтому мне нужен динамический способ добавления этого скрипта или любого другого в будущем. - person john; 13.10.2020
comment
Я обновил свой ответ. пожалуйста, проверьте, и если у вас есть какие-либо проблемы, дайте мне знать. - person AbolfazlR; 13.10.2020
comment
Пожалуйста, следуйте этому ответу, вы получите результат - person AbolfazlR; 15.10.2020