使用Systemjs时检测是否在页面上加载了Angular [英] Detect whether Angular is loaded on a page when using Systemjs

问题描述

更新:

这个问题专门针对 Angular 2 ，现在已经已过时.在发布时，还没有一种方法来检测它是否已加载到页面上.我尚未测试其他版本，但是Angular 8现在有一种简单的方法可以检测到此问题，并在下面的答案中指出了这一点.

---

我正在尝试找出一种好的(最好是最好的)方法来检测是否在页面上加载了Angular.

我看了一下这个问题:

基于此问题，以及对http2的理解，我看不出不使用systemjs的真正原因.

很显然，我可能是错的，systemjs可能不是问题的起因；无论如何，即使我正在查看Angular应用程序，window.angular仍返回未定义的值.

为了给您提供用例，以防万一，我们正在通过一个init文件加载一个角度应用程序，该文件将在其他网站上使用(大多数情况下，我们不控制该页面).文件，以便能够检测页面上是否已经包括了angular2(以及适当的版本)以及其他依赖项.如果不是，我们会动态添加他们所需要的东西. (这种方法可能还有其他问题，但是我们到达那里后会解决这些问题.)

摘要

1. 我们需要检测Angular是否已加载到页面上以及什么版本.
2. 使用systemjs，window.angular返回未定义.
3. Angular应用运行正常且没有问题.
4. 对于http2，我们不认为不需要使用systemjs加载Angular，但是我们不反对在必要时进行更改.

解决方案

我成功使用以下方法检测到Angular2:

window.ng

UPDATE:

This question was specifically talking about Angular 2, and is now out of date. At the time of posting, there was not a way to detect whether it was loaded on the page. I have not tested other version, but Angular 8 now has an easy way to detect this and has been pointed out in the answer below.

---

I'm trying to figure out a good (preferably the best) way to detect whether or not Angular is loaded on the page.

I took a look at this question: Ways to Detect whether AngularJS is loaded in the current page or not, but the answer simply states to use window.angular, which is the first thing I tried (long before finding that answer.) It seems as though systemjs is causing Angular to not be in the global (window) scope.

Here is the head of my html file:

<script src="client/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="client/node_modules/systemjs/dist/system.src.js"></script>
<script src="client/node_modules/rxjs/bundles/Rx.js"></script>
<script src="client/node_modules/angular2/bundles/angular2.dev.js"></script>
<link rel="stylesheet" href="client/styles/main.css"/>

<script>
  System.config({
    packages: {        
        client: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
  });
  System.import('client/app')
        .then(null, console.error.bind(console));
</script>

Based on this question, and my understanding of http2, I don't see a real reason to not use systemjs.

Obviously, I may be wrong, systemjs may not be the cause of the issue; regardless, window.angular returns undefined even though I'm looking at my Angular app.

To give you our use case, in case it helps, we are loading an angular app via an init file that will be used on other websites (where we don't control the page in most cases.) We want our init file to be able to detect whether angular2 (and the proper version) among other dependencies are already included on the page. If they are not, we are dynamically adding what they don't have for our need. (There may be some other issues with this approach, but we'll tackle those issues when we get there.)

Summary

1. We need to detect whether Angular is loaded on the page, and what version.
2. Using systemjs, window.angular is returning undefined.
3. The Angular app runs fine and without issue.
4. With http2, we don't see the need to not load Angular using systemjs, but we are not opposed to changing that if necessary.

解决方案

I had success detecting Angular2 using:

window.ng

这篇关于使用Systemjs时检测是否在页面上加载了Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！