在浏览器中使用没有 Reflect.js 和 zone.js 的 Angular 2答案

【问题标题】：Use Angular 2 without Reflect.js and zone.js in Browser在浏览器中使用没有 Reflect.js 和 zone.js 的 Angular 2
【发布时间】：2017-05-02 00:49:11
【问题描述】：

我正在尝试在现有的打字稿项目中使用 Angular，我正在使用 browserify 来捆绑实际的应用程序。

现在，我基本上只是从setup tutorial 重建了应用程序并设法让它全部工作：

angular/app/app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

angular/app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

angular/app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

export function render () {    
    platformBrowserDynamic().bootstrapModule(AppModule);    
}

最后是我的 Bundle-facade，它通过 browserify 编译成一个独立的 bundle：

my-app.ts

import { render } from "./angular/app/main";

export = {
    testAngular: render  // This is the function that I call in my HTML page
}

唯一让我烦恼的是我必须添加

<script src="path/to/zone.js"></script>
<script src="path/to/Reflect.js"></script>

到每个使用我捆绑的 Angular 模块来消除由于我的 Angular 应用程序中的类装饰器引起的错误的 html 页面：

使用类装饰器时需要未捕获的反射元数据填充程序

有没有办法摆脱这个或通过某种导入语句使这两个模块成为我的捆绑包的一部分？

或者是否有任何其他最佳实践来处理这些垫片正在解决的问题？

【问题讨论】：

标签： javascript angular typescript reflect-metadata zone.js

【解决方案1】：

我设法通过添加来解决这个问题

import 'zone.js';
import 'reflect-metadata';

在my-app.ts 的顶部 (!!)（通过捆绑根文件）。

【讨论】：

【解决方案2】：

与已接受的答案相关，但没有评论的声誉

您不应该像这样从您的应用程序中导入 zone.js。如果你做，你加载 prolyfill 太晚了，这意味着您的环境（模块加载器）将不受 zone.js - 事情可能会工作一段时间，但迟早当 ui 的更新停止发生并且您会遇到问题不知道为什么。

因此，最好始终在任何之前包含所有 polyfill 模块加载器（systemjs）或应用程序代码。这就是我们推荐的原因加载区域作为 index.html 中的第一个脚本。

来自 github：issue 和 comment

简而言之，在 index.html 中添加 zone.js 和 reflect.js。您应该只在索引页面内编写一次脚本文件（每个其他页面都在索引页面内加载，因此已经为它们加载了 zone 和 reflect.js。

【讨论】：