如何从 index.html 引导 Angular？答案

【问题标题】：How to bootstrap Angular from index.html?如何从 index.html 引导 Angular？
【发布时间】：2017-12-02 16:03:45
【问题描述】：

我需要有条件地包含我的应用通过全局变量使用的脚本。即，引导必须在包含后进行。

在 AngularJS 中，我使用index.html 中的以下脚本完成了此操作：

<script src="bower_components/angular/angular.js"></script>

...

<script>

    ...

    appendScript(
        "https://maps.googleapis.com/maps/api/js?language=" + global_language +"&region=" + global_region,
        function() { angular.bootstrap(document.querySelector("#myApp"), ["myApp"]); }
    );

    function appendScript(url, onload) {
        var script = document.createElement("script");
        script.src = url;
        script.async = false;
        script.onload = onload;
        document.head.appendChild(script);
    }
</script>

我正在迁移到 Angular 4。我的新应用是使用 Angular CLI 创建的。因此，main.ts 包含：

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));

但是，platformBrowserDynamic 没有在 index.html 中定义，这并不奇怪，因为 Angular CLI 没有在其中放置特定于 Angular 的脚本。

所以，现在发生的情况是，当 Angular 引导时，库的全局变量（“google”）通常是未定义的。只是偶然，它有时已经被定义了。

如何从index.html 引导 Angular？或者也许有不同的方式来实现我的目标？

【问题讨论】：

标签： angular bootstrapping

【解决方案1】：

这并不能完全回答我的问题，但我找到了解决方法。在main.ts 中，执行以下操作：

declare var google: any;

const interval = setInterval(
    () => {
        if (typeof google === "object") {

            if (environment.production) {
                enableProdMode();
            }

            platformBrowserDynamic().bootstrapModule(AppModule)
                .catch(err => console.log(err));

            clearInterval(interval);
        }
    },
    20
);

用一些额外的代码来确定合理的间隔大小：

declare var google: any;

let failCount = 0;
const interval = setInterval(
    () => {
        if (typeof google === "object") {
            alert(`Success after ${failCount} fail(s).`);

            if (environment.production) {
                enableProdMode();
            }

            platformBrowserDynamic().bootstrapModule(AppModule)
                .catch(err => console.log(err));

            clearInterval(interval);
        } else {
            failCount++;
        }
    },
    20
);

【讨论】：