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>

亮点:

  • AppModuleAppComponent 只是 JavaScript 对象,带有简单的 Angular 注释。向它们添加常规功能将非常容易。
  • 我不需要使用 .Class 函数。
  • Bootstrap 代码更简单,现在实际上非常明显。

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

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com