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