在浏览器中使用不带 Reflect.js 和 zone.js 的 Angular 2

Question

我正在尝试在现有的打字稿项目中使用 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 编译成一个独立的包：

我的-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>

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

Uncaught reflect-metadata shim is required when using class decorators

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

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

Answer 1

我通过添加

设法解决了这个问题

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

在 my-app.ts 的顶部 (!!)（按包根文件）。

Answer 2

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

you should not import zone.js from your application like this. If you do, you are loading the prolyfill too late which means that part of your environment (module loader) won't be under the oversight of zone.js - things might seem to work for a while but sooner or later you'll run into issues when updates to the ui stop happening and you won't know why.

For this reason it's better to always include all polyfills before any module loader (systemjs) or application code. This is why we recommend loading zones as the first script in index.html.

来自 github：issue and comment

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

在浏览器中使用不带 Reflect.js 和 zone.js 的 Angular 2

Use Angular 2 without Reflect.js and zone.js in Browser

javascript

typescript

reflect-metadata

zone.js

angular