Question

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

现在，我基本上只是从setup tutorial重建了应用程序，并设法使其全部正常运行：

角/应用/ app.component.ts

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

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

角/应用/ 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 { }

角/应用/ main.ts

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

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

最后我的Bundle-facade通过browserify编译成standanlone-bundle：

我-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页面，以摆脱我的角度应用程序中的类装饰器导致的错误：

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

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

或者还有其他最佳做法来处理垫片正在解决的问题吗？

Answer 1

我设法通过添加

来解决这个问题

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

my-app.ts的最高（!!）（通过捆绑根文件）。

Answer 2

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

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

因此，最好始终包括所有的填料   模块加载器（systemjs）或应用程序代码。这就是我们推荐的原因   将区域加载为index.html中的第一个脚本。

来自github：issue和comment

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

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

2 个答案: