使用单独编译的单个TypeScript文件构建Angular 2项目

使用单独编译的单个TypeScript文件构建Angular 2项目,angular,typescript,webpack,Angular,Typescript,Webpack,我目前正在Angular 2中创建一个Chrome扩展。应用程序有一个background.js文件,其中包含与扩展运行时将在后台运行的长时间运行的进程相关的功能。该文件(background.js)目前与Angular 2项目完全分离,并且在构建时作为资产进行处理(和复制)。这个设置很有效,但是我真的想在我的后台文件中使用TypeScript 在这个TypeScript文件中,我实际上希望访问Angular 2项目中的一些文件,例如: ///<reference path="app/ap

我目前正在Angular 2中创建一个Chrome扩展。应用程序有一个background.js文件,其中包含与扩展运行时将在后台运行的长时间运行的进程相关的功能。该文件(background.js)目前与Angular 2项目完全分离,并且在构建时作为资产进行处理(和复制)。这个设置很有效,但是我真的想在我的后台文件中使用TypeScript

在这个TypeScript文件中,我实际上希望访问Angular 2项目中的一些文件,例如:

///<reference path="app/app.settings.ts"/>
脚本工作,角度项目被构建,background.ts文件与引用的依赖项一起编译,这些都可以在所需的位置使用。但是,生成的JavaScript不起作用,例如,我遇到以下错误:

Uncaught ReferenceError: exports is not defined
Uncaught SyntaxError: Unexpected token import

据我现在所知,我必须使用Webpack来实现这一点,但我没有从命令行中找到一种方法来实现这一点,这与我的Angular project是分开的。

因此,我设法解决了这个问题,我将答案留在这里,也许它会帮助某些人

我的解决方案是使用生成一个在浏览器中工作的.js。首先,它需要在全球范围内安装:

npm install -g browserify
问题中发布的脚本必须修改为以下内容:

#!/bin/bash
ng build --output-path=$1
tsc --outDir $1 src/background.ts
browserify $1\\background.js -o $1\\background-browserified.js
通过这种方式,运行单个命令可以构建Angular 2项目,并将单独的Typescript文件编译并复制到同一位置

我确信像Webpack这样的其他模块捆绑包也可以使用,但对于像这样一个简单的案例,browserify是我能找到的最合适的

#!/bin/bash
ng build --output-path=$1
tsc --outDir $1 src/background.ts
browserify $1\\background.js -o $1\\background-browserified.js