Typescript and AngularJS 1.5: How to handle export class

Question

I have this module.ts file:

import { IHttpService, IPromise } from 'angular';

export class ProductService {
    static $inject = ["$http"];
    constructor(private $http: IHttpService) { }

    loaded: boolean = false;
    promise: IPromise<{ data: any }>;

    getProducts(): IPromise<{ data: any }> {
        if (!this.loaded) {
            this.loaded = true;
            this.promise = this.$http.get('/products.json');
        }
        return this.promise;
    }
}

var module = angular.module("psShopping", ["ngComponentRouter"]);
module.value("$routerRootComponent", "shoppingApp");
module.service('products', ProductService);

and this gets transpiled/compiled to module.js:

"use strict";
var ProductService = (function () {
    function ProductService($http) {
        this.$http = $http;
        this.loaded = false;
    }
    ProductService.prototype.getProducts = function () {
        if (!this.loaded) {
            this.loaded = true;
            this.promise = this.$http.get('/products.json');
        }
        return this.promise;
    };
    ProductService.$inject = ["$http"];
    return ProductService;
}());
exports.ProductService = ProductService;
var module = angular.module("psShopping", ["ngComponentRouter"]);
module.value("$routerRootComponent", "shoppingApp");
module.service('products', ProductService);

The problematic line is: exports.ProductService = ProductService; If I remove this manually - the app works perfectly. But if I leave this like that, in the browsers console I get an error "exports is not defined". What can be done about this? I can't just remove "export" from the .ts file as this class is used in other files (I import it there). I tried different compiler options, but it just gives me different errors (like "define is not defined" etc) and I'm not sure how to handle this. maybe theres a way that the tsc would just not produce this line?

How are you loading modules in the browser? Are you using browserify/webpack/jspn etc??? Do you need to export the class? — Daniel Tabuenca
– Daniel Tabuenca, Commented Nov 16, 2016 at 2:04
i just have an index.html with attaching all the scripts files. One of the files that i attach is the one above (module.js). I only have one module in the app (called psShopping). — marc08
– marc08, Commented Nov 16, 2016 at 2:08
You will only be able to get so far though without using a module loader in the browser. You will be restricted to importing just types, not other modules. — Daniel Tabuenca
– Daniel Tabuenca, Commented Nov 16, 2016 at 2:13
I see, yeah now i get "Cannot use imports, exports, or module augmentations when '--module' is 'none'." So how do i modify module.ts file now to make it all work? Or what are the other ways i can make this work (using module loader in the browser?) — marc08
– marc08, Commented Nov 16, 2016 at 2:19

Dale K · Accepted Answer · 2019-06-09 20:53:30Z

Whenever you use the import and export keywords in typescript, you are converting the file to act as a module.

Modules are designed to work along with module systems like commonjs,amd, es6, systemjs etc...

If your are trying to load a raw script in a browser without using a module-loader or bundler such as systemjs, webpack, browserify, jspm, etc... then you cannot use external modules (so you can't use import/exports).

You can still use typings from definitely typed, but you have to load them through ///<reference /> tags.

If using typescript 2.0 typings like angular are also available and imported by default when you run

npm install @types/angular

Usually these typings will expose global namespace declaration that you will now be able to use throughout your application.

For example in your case angular exposes an ng namespace and you would use it like:

  promise: ng.IPromise<{ data: any }>;

You can also easily alias it:

import IPromise = ng.IPromise

Note that this import behaves differently than module imports (it just aliases).

If you are going to do anything other than a trivial application, I would strongly recommend you use a module loader such as webpack to compile and bundle the application for the browser. There are many limitations to just using plain scripts.

Collectives™ on Stack Overflow

Typescript and AngularJS 1.5: How to handle export class

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related