Question

我需要有条件地包含我的应用程序通过全局变量使用的脚本。即，引导必须在包含它之后发生。

在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引导时，库的全局变量（＆＃34; google＆＃34;）通常是未定义的。只是偶然它已经定义了。

如何从index.html引导Angular？或者可能有不同的方法来实现我的目标？

Answer 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
);

如何从index.html引导Angular？

1 个答案: