At the moment, I am in the process of developing a Chrome Extension using Angular 2. The application includes a background.js file which handles the functionality for a long-running task that operates while the extension is active. Currently, this background.js file is separate from the Angular 2 project and is treated as an asset during the build process. While this setup functions correctly, I am eager to incorporate TypeScript into my background file.
Specifically, in this TypeScript file, I aim to access certain files from my Angular 2 project like so:
///<reference path="app/app.settings.ts"/>
I only require access to settings (constants) and business objects (classes), keeping it simple.
In order to use this project effectively as an extension, I need to compile both the Angular 2 project and the background TypeScript file into separate JavaScript files located in the same directory.
Here's what I've attempted so far:
- Configuring angular build to separately compile the background file
I experimented with my angular-cli.json file to try to achieve the desired outcome using a single "ng build" command. I tested out various configurations including the include and files options, but unfortunately had no success.
- Using a script that builds the Angular app and compiles the .ts file to the same directory
This approach seemed promising initially. I developed a script that takes one argument (the output path):
#!/bin/bash
ng build --output-path=$1
tsc --outDir $1 src/background.ts
The script successfully builds the Angular project and compiles the background.ts file along with the referenced dependencies, placing everything in the designated location. However, the resulting JavaScript does not function properly, leading to errors such as:
Uncaught ReferenceError: exports is not defined
Uncaught SyntaxError: Unexpected token import
It appears that employing Webpack is necessary to resolve these issues, yet I have not discovered a method to accomplish this through the command line independently from my Angular project.