Building an Angular 2 project with a single TypeScript file compiled separately

Question

I'm currently creating a Chrome Extension in Angular 2. The application has a background.js file that contains the functionality relating to the long-running process that will run in the background while the extension is running. This file (background.js) is currently completely separate from the Angular 2 project and upon build is handled (and copied) as an asset. This setup works, however I really want to use TypeScript in my background file as well.

In this TypeScript file I actually want to access some of the files from my Angular 2 project as such:

///<reference path="app/app.settings.ts"/>

I only need settings (constants) and business objects (classes), nothing more complex.

To actually use this project as an extension I need to build the Angular 2 project and compile the background TypeScript file to a separate JavaScript file on the same location.

What I tried:

Configuring angular build to separately compile the background file

I played around with my angular-cli.json file to achieve the desired results with a single "ng build" commands. I tried the include and files options, with no luck.

Using a script that builds the angular app and compiles the .ts file to the same directory

This one was actually promising. I have the following script that takes a single argument (output path):

#!/bin/bash
ng build --output-path=$1
tsc --outDir $1 src/background.ts

The script works, the Angular projects is built, the background.ts file is compiled along with the referenced dependencies and these are all available in the desired location. However the generated JavaScript does not work, I'm getting the following errors for example:

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

As I understand now, I'll have to use Webpack to actually make this work, but I did not find a way to do that from the command line, separately from my Angular project.

barney.balazs · Accepted Answer · 2017-07-07 13:23:39Z

1

So, I managed to solve this, I'll leave the answer here, maybe it will help someone.

The solution for me was using browserify to produce a .js that works in browsers. First it needs to be installed globally:

npm install -g browserify

The script posted in the question had to be modified to something like this:

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

This way running a single command builds my Angular 2 project and compiles and copies the separate Typescript file to the same location.

I'm sure that other module bundlers like Webpack could've been used as well, but for a simple case like this browserify was the best fit I could find.

answered Jul 7, 2017 at 13:23

barney.balazs

6407 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Building an Angular 2 project with a single TypeScript file compiled separately

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related