CODEWITHSUNDEEP
javascriptangularjstypescript
reven
reven

Reputation: 340

Angular is null when using Typescript 1.5 and require

I'm trying to use AngularJS 1.4.3 with TypeScript 1.5

My typescript file is 

/// <reference path="typings/angular/angular" />
/// <reference path="controllers/LoginController" />

import * as angular from 'angular';
import { LoginController } from './controllers/LoginController';

if (angular)
    console.log('angular is not null!');
else
    console.log('angular is null!');

console.log('version:' + angular.version);

var myApp = angular.module('app', [])
    .controller('LoginController', LoginController);

which is converted to the following JS

/// <reference path="typings/angular/angular" />
/// <reference path="controllers/LoginController" />
define(["require", "exports", 'angular', './controllers/LoginController'], function (require, exports, angular, LoginController_1) {
    if (angular)
        console.log('angular is not null!');
    else
        console.log('angular is null!');
    console.log('version:' + angular.version);
    var myApp = angular.module('app', [])
        .controller('LoginController', LoginController_1.LoginController);
});
//# sourceMappingURL=test.js.map

However when it is run in the browser "angular" is undefined. If I type "angular" into the console it finds angular, and requirejs is loading angular correctly (as seen in the network trace and the fact angular works from the console).

I tried using

import angular from 'angular';

But I visual studio 2015 gives me the error 

Module 'angular' has no default export

I'm nearly certain the error is with the import statement, just can't seem to get it to work.

Upvotes: 1

Views: 321

Answers (1)

Miguel Lattuada
Miguel Lattuada

Reputation: 5407

Create a require config file and add a shim for angular and exports it.

require.config({
    baseUrl: "somepath/scripts",
    paths: {
        "angular": "libraries/angular",
        "angular-resource": "libraries/angular-resource",
    },
    shim: {
        "angular": {
            exports: "angular"
        },
        "angular-resource": {
            deps: ["angular"]
        },
    }
});

Upvotes: 2

Related Questions