IE11上纯JavaScript中的Angular

我需要在IE11上的纯JavaScript中使用Angular 4+。我的整个应用程序是一个，它使用从我的外接程序打开一个新窗口（IE11）。有几个限制：

• 必须在IE11上运行
• 必须使用纯JavaScript（我不能使用TypeScript）
• 在它自己的上下文中运行
• 必须尽可能轻量级（因此我不能让它重新初始化/引导我的整个Angular应用程序）。把这个对话框想象成它自己的迷你应用程序

我有，但无法启动

我在IE11上遇到的错误有：

对象不支持属性或方法“类”（app.component.js（7,3））
对象不支持属性或方法“类”（app.module.js（7,3））
未找到“未定义”的NgModule元数据。（compiler.umd.min.js（5526076））

在Chrome上（查看Plunker时），我发现以下错误：

app.component.js:11未捕获类型错误：组件（…）。类不是函数
在window.app.window.app（VM524 app.component.js:11）
在VM524 app.component.js:15
window.app.window.app@app.component.js:11
（匿名）@app.component.js:15
app.module.js:13未捕获类型错误：NgModule（…）。类不是函数
在window.app.window.app（VM525 app.module.js:13）
在VM525 app.module.js:16
window.app.window.app@app.module.js:13
（匿名）@app.module.js:16
compiler.umd.min.js:sourcemap:55未捕获错误：未找到“未定义”的NgModule元数据。
在NgModuleResolver.resolve（VM475 compiler.umd.min.js:55）
在CompileMetadataResolver.getNgModuleMetadata（VM475 compiler.umd.min.js:53）
在JitCompiler._loadModules（VM475 compiler.umd.min.js:62）
在JitCompiler._compileemoduleandcomponents（VM475 compiler.umd.min.js:62）
在JitCompiler.compileModuleAsync（VM475 compiler.umd.min.js:62）
在CompilerImpl.compileModuleAsync（VM476平台浏览器dynamic.umd.min.js:6）
在PlatformRef.bootstrapModule（VM472 core.umd.min.js:113）
在window.app.window.app（（索引）：42）
at（索引）：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.\u compileemoduleandcomponents@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@（索引）：42
(匿名)(索引):44

我做错了什么

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

在控制台中，它表示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>

---

在这上面坐了几天之后，我终于实现了我想要的。基本上，我想得太多了

代码：

加载。。。
var AppComponent=function（）{}；
AppComponent.annotations=[
新的ng.core.Component({
选择器：“应用程序”，
模板：“Hello World！”+”|版本：“+ng.core.VERSION.full+”
})
];
var AppModule=函数（）{}；
AppModule.annotations=[
新的ng.core.NgModule({
导入：[ng.platformBrowser.BrowserModule]，
声明：[AppComponent]，
引导：[AppComponent]
})
];
document.addEventListener（'DOMContentLoaded'，function（）{
ng.core.enableProdMode（）；
ng.平台浏览器动态
.platformBrowserDynamic（）.bootstrapModule（AppModule）；
});

亮点：

• AppModule

  和

  AppComponent

  只是JavaScript对象，带有简单的角度注释。在它们上添加常规函数将非常容易
• 我不需要使用

  .Class

  函数
• 引导代码更简单，实际上现在已经很明显了

---

希望这对将来的人有帮助

为什么需要在普通js中使用它？IE11是原因吗？@Ludwig我已经编辑了我的问题并添加了更多的上下文。谢谢你的回复！虽然这确实有效，但我需要使用Angular 4+。也许这个流畅的API已经改变了——将继续挖掘。

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