0

I am trying to build a gulp based process that would use AngularJS from a bower package and a tool called debowerify (which I believe should let me plug in the installed bower components into the TSIFY/Browserify stream). Essentially, I want to build an app.js file for use in my application (with all the JS I need). I cannot for the life of me get AngularJS to work in this process. I am using an index.ts file (see below) to bring in my references for browserify to work with. It has been tricky with angular as the library is optimized out by the compilation process unless you use the import in some way hence the module call I was testing in the index.ts file.

index.ts

//#### Type Definitions ####
/// <reference path="../../typings/angularjs/angular.d.ts" />

/// <reference path="greeter.ts" />

import angular = require('angular');
import greeter = require('./Greeter');
var greet = new greeter();
greet.sayHello();

angular.module('app', []);

Here are my gulp defintions:

gulpfile.js

var gulp = require('gulp');

var source = require('vinyl-source-stream');

var browserify = require('browserify');
var tsify = require('tsify');

var debowerify = require('debowerify');

var exorcist = require('exorcist');

var config = {
    publicDir: __dirname + '/app',
    path: __dirname + '/src/typescript',
    main: 'index.ts',
    result: 'app.js'
};

gulp.task('compile-ts', function(){
    var bundler = browserify({ 
                    basedir: config.path, 
                    debug: true
                })
            .add(config.path + '/' + config.main)
            .plugin(tsify)
            .transform(debowerify);

    return bundler.bundle()
        .pipe(exorcist(config.publicDir + '/app.js.map'))
        .pipe(source(config.result))
        .pipe(gulp.dest(config.publicDir));
});

The custom TS files I built (ie: greeter.ts) work great. However, when I run my gulp compile-ts task I get no errors in the console only in the browser when it informs me that angular is undefined (on the call to angular.module). I have suspicions that CommonJS may not be supported for angular, but I also found information on the interwebs to the contrary of that. I am trying to avoid AMD if possible but if that is my only option I would certainly re-consider. I have this application working if I link to the angular script in my html rather than attempt to import it into my typescript, but I am just not satisfied with that approach as I know this should work.

1 Answer 1

1

Angular doesn't currently support CommonJS, replacing

import angular = require('angular');

with

require('angular');

solved it for me. See here.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.