IE11 上纯 JavaScript 中的 Angular答案

【问题标题】：Angular in Plain JavaScript on IE11IE11 上纯 JavaScript 中的 Angular
【发布时间】：2017-12-15 05:18:15
【问题描述】：

我需要在 IE11 上使用纯 JavaScript 中的 Angular 4+。我的整个应用程序是OfficeJS add-in，即使用Dialog API 从我的加载项打开一个新窗口（IE11）。有几个限制：

必须在 IE11 上运行。
必须使用纯 JavaScript（我不能使用 TypeScript）。
在自己的上下文中运行。 Reference
必须尽可能轻量级（所以我不能让它重新初始化/引导我的整个 Angular 应用程序。Reference）。将对话框视为它自己的迷你应用。

我有 tried following these great examples，但无法启动 Angular。

我在 IE11 上遇到的错误是：

Object doesn't support property or method 'Class' (app.component.js (7,3))
Object doesn't support property or method 'Class' (app.module.js (7,3))
No NgModule metadata found for 'undefined'. (compiler.umd.min.js (55,26076))

在 Chrome 上（查看 Plunker 时）我收到以下错误：

app.component.js:11 Uncaught TypeError: Component(...).Class is not a function
    at window.app.window.app (VM524 app.component.js:11)
    at VM524 app.component.js:15
window.app.window.app @ app.component.js:11
(anonymous) @ app.component.js:15
app.module.js:13 Uncaught TypeError: NgModule(...).Class is not a function
    at window.app.window.app (VM525 app.module.js:13)
    at VM525 app.module.js:16
window.app.window.app @ app.module.js:13
(anonymous) @ app.module.js:16
compiler.umd.min.js:sourcemap:55 Uncaught Error: No NgModule metadata found for 'undefined'.
    at NgModuleResolver.resolve (VM475 compiler.umd.min.js:55)
    at CompileMetadataResolver.getNgModuleMetadata (VM475 compiler.umd.min.js:53)
    at JitCompiler._loadModules (VM475 compiler.umd.min.js:62)
    at JitCompiler._compileModuleAndComponents (VM475 compiler.umd.min.js:62)
    at JitCompiler.compileModuleAsync (VM475 compiler.umd.min.js:62)
    at CompilerImpl.compileModuleAsync (VM476 platform-browser-dynamic.umd.min.js:6)
    at PlatformRef.bootstrapModule (VM472 core.umd.min.js:113)
    at window.app.window.app ((index):42)
    at (index):44
NgModuleResolver.resolve @ compiler.umd.min.js:sourcemap:55
CompileMetadataResolver.getNgModuleMetadata @ compiler.umd.min.js:sourcemap:53
JitCompiler._loadModules @ compiler.umd.min.js:sourcemap:62
JitCompiler._compileModuleAndComponents @ compiler.umd.min.js:sourcemap:62
JitCompiler.compileModuleAsync @ compiler.umd.min.js:sourcemap:62
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.umd.min.js:sourcemap:6
PlatformRef.bootstrapModule @ core.umd.min.js:sourcemap:113
window.app.window.app @ (index):42
(anonymous) @ (index):44

我做错了什么？

如果可以使用 AOT 解决此问题，则可获得奖励积分（即在运行时不支付 JIT 成本）。

【问题讨论】：

为什么要在纯js中使用？是IE11的原因吗？
@Ludwig 我已经编辑了我的问题并添加了更多上下文。

标签： javascript angular internet-explorer-11 office-js

【解决方案1】：

坐了几天之后，我已经成功地实现了我想要的。基本上是我想多了。

Here's the working Plunker.

代码：

<!DOCTYPE html>
<html>

  <head>
    <script src="https://unpkg.com/core-js@2.5.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.18/dist/zone.min.js"></script>
    <script src="https://unpkg.com/rxjs@5.5.5/bundles/Rx.min.js"></script>

    <script src="https://unpkg.com/@angular/core@5.1.0/bundles/core.umd.min.js"></script>
    <script src="https://unpkg.com/@angular/common@5.1.0/bundles/common.umd.min.js"></script>
    <script src="https://unpkg.com/@angular/compiler@5.1.0/bundles/compiler.umd.min.js"></script>
    <script src="https://unpkg.com/@angular/platform-browser@5.1.0/bundles/platform-browser.umd.min.js"></script>
    <script src="https://unpkg.com/@angular/platform-browser-dynamic@5.1.0/bundles/platform-browser-dynamic.umd.min.js"></script>
    <script src="https://unpkg.com/@angular/http@5.1.0/bundles/http.umd.min.js"></script>
  </head>

  <body>
    <app>Loading...</app>

    <!-- AppComponent -->
    <script>
      var AppComponent = function () { };

      AppComponent.annotations = [
        new ng.core.Component({
          selector: 'app',
          template: '<h1>Hello World!' + ' | VERSION: ' + ng.core.VERSION.full + '</h1>'
        })
      ];
    </script>

    <!-- AppModule -->
    <script>
      var AppModule = function () { };

      AppModule.annotations = [
        new ng.core.NgModule({
          imports: [ng.platformBrowser.BrowserModule],
          declarations: [AppComponent],
          bootstrap: [AppComponent]
        })
      ];
    </script>

    <!-- Bootstrap Angular -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        ng.core.enableProdMode();
        ng.platformBrowserDynamic
          .platformBrowserDynamic().bootstrapModule(AppModule);
      });
    </script>
  </body>

</html>

亮点：

AppModule 和 AppComponent 只是 JavaScript 对象，带有一个简单的 Angular 注释。向它们添加常规函数将非常容易。
我不需要使用.Class 函数。
引导代码更简单，实际上现在非常明显。

希望这对将来的某人有所帮助！

【讨论】：

【解决方案2】：

在控制台中，它说 ng.core.Class 不是您正在使用的版本的函数。

更改 index.html 中的脚本引用：

<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.21/dist/zone.min.js"></script>
<script src="https://unpkg.com/rxjs@5.0.0-beta.12/bundles/Rx.min.js"></script>

<script src="https://unpkg.com/@angular/core@2.1.2/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common@2.1.2/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler@2.1.2/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser@2.1.2/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic@2.1.2/bundles/platform-browser-dynamic.umd.js"></script>
<script src="https://unpkg.com/@angular/http@2.1.2/bundles/http.umd.js"></script>

这里是 app.module.js

(function(app) {
  var NgModule = ng.core.NgModule;
  var BrowserModule = ng.platformBrowser.BrowserModule;
  var AppComponent = app.AppComponent;

  app.AppModule = NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent]
  })
  .Class({
    constructor: function() { }
  });
})(window.app || (window.app = {}));

【讨论】：

感谢您的回复！虽然这确实有效，但我需要使用 Angular 4+。也许这个流畅的 API 已经改变了 - 将继续挖掘。