IE11上的Plain JavaScript中的Angular

Question

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

必须在IE11上运行。
必须使用普通JavaScript（我不能使用TypeScript）。
在其自身上下文中运行。 参考
必须尽可能轻巧（因此我无法使其重新初始化/重新引导整个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上（当查看柱塞时），出现以下错误：

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的费用 ）。

Answer 1

坐了几天后，我设法实现了我想要的。 基本上，我在想什么。

这是工作中的柱塞。

码：

<!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函数。
引导程序代码更简单，实际上现在很明显。

希望这对以后的人有所帮助！

Answer 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 = {}));

IE11上的Plain JavaScript中的Angular

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-12-11 03:21:06

解决方案2
0 2017-12-06 08:38:51

IE11上的Plain JavaScript中的Angular

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-12-11 03:21:06

解决方案2 0 2017-12-06 08:38:51

解决方案1
2 已采纳 2017-12-11 03:21:06

解决方案2
0 2017-12-06 08:38:51