0

无论如何，我们可以在构建 Angular 应用程序后在 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 build 命令后保持不变......

4

2 回答 2

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 文件中添加您需要的任何内容

于 2020-10-13T13:38:35.987 回答
0

可以直接在 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"
}

笔记

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

现在，您可以动态加载您的 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();
  }
}

笔记：

每当您在 dynamic_script中添加新的 js 文件时构建项目后，然后手动打开info.json并替换新名称。

于 2020-10-13T10:24:56.537 回答