0

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

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

角度/应用程序/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编译成一个独立的bundle：

我的应用程序.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 页面：

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

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

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

4

2 回答 2

2

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

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

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

于 2016-12-16T09:16:52.290 回答
0

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

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

出于这个原因，最好总是在任何模块加载器（systemjs）或应用程序代码之前包含所有 polyfill。这就是为什么我们建议将区域加载为 index.html 中的第一个脚本。

来自 github：问题和评论

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

于 2017-07-19T07:15:25.253 回答