个人中心
gpt4 book ai didi

javascript - Angular 在 IE11 上的纯 JavaScript 中

转载 作者：行者123 更新时间：2023-11-30 14:53:56 25 4
gpt4 key购买 nike

我需要在 IE11 上以纯 JavaScript 使用 Angular 4+。我的整体申请是 OfficeJS add-in ，即使用 Dialog API从我的加载项打开一个新窗口 (IE11)。有几个限制条件:

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

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

My plunker is here .

我在 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 成本)，则加分。

最佳答案

在坐了几天之后，我已经设法实现了我想要的。基本上，我是想多了。

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 函数。
  • Bootstrap 代码更简单，现在实际上非常明显。

希望这对以后的人有帮助!

关于javascript - Angular 在 IE11 上的纯 JavaScript 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47668173/

25 4 0
文章推荐： javascript - Extjs 6.2 树列表动态更改选择
文章推荐： c - 解析通用/胖二进制文件
文章推荐： c - 为二维数组分配空间时程序卡住
文章推荐： c# - ListView 未更新项目源 ObservableCollection 项目属性更改
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com