Angular 1.x with TypeScript 2.x, @types, and SystemJS - Using global typings

Question

I am trying to use Angular 1.x with the new TS2 and @types registry but running into problems. It looks like @types does not use what the typings registry refered to as "global" typings. I am running into the following error:

error TS2686: 'angular' refers to a UMD global, but the current file is a module. Consider adding an import instead.

The angular code is as following:

import "angular";
import "angular-route";

const app = angular.module("charter-app", ["ui.bootstrap", "ui.router", "templates", "charter-app.controllers"]);

tsconfig.json:

{
    "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "inlineSources": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [ "node_modules/@types/" ],
    "types": [ "angular", "angular-ui-bootstrap", "angular-ui-router" ],
    "outFile": "app.js"
    }
 }

Trying to use the following

"devDependencies": {
    "@types/angular": "^1.5.20",
    "@types/angular-ui-bootstrap": "^0.13.35",
    "@types/angular-ui-router": "^1.1.34",

I'm using gulp-typescript to do the compilation. What am I missing? Can I not use the @types libraries for this purpose?

PSL · Accepted Answer · 2017-02-13 04:20:16Z

59

I can think of 2 approaches here.

1) Mark angular as global. (Much easier migration option)

Create a d.ts file say overrides.d.ts and do:

declare global {
  const angular: ng.IAngularStatic;
}
export {};

or

import * as _angular_ from 'angular';

declare global {
  const angular: typeof _angular_;
}

and that's it, no need to import or manage script loading separately for this.

2) Import it in every impacted file. (May be more tedious migration option on a large existing project)

If you can go ahead update all the impacted files (Usually a bit hard to take this approach in a much big project which already has lots of error related to this) where ever you refer to angular, import it:

import * as angular from "angular";

If you are taking this approach, typescript will transpile with angular as a dependency for the file and your module loader (eg: SystemJS) needs to handle the import. This may be done either by having systemJS manage the imports via maps/paths or if the script is loaded by script tags then you can create a fake module for angular by using SystemJS.registerDynamic or SystemJS.set apis.

edited Feb 13, 2017 at 4:20

answered Feb 4, 2017 at 0:18

PSL

124k21 gold badges257 silver badges243 bronze badges

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

5 Comments

AngularOne Over a year ago

You are currect. 10x for this answer you solved me the problem

cgatian Over a year ago

This sovled an issue I had trying to import fabricjs. Thanks

eXavier Over a year ago

@PSL where to put the file for the approach 1) ?

PSL Over a year ago

@eXavier You can place it anywhere in your app root.

JonathanPeel Over a year ago

I am trying this, but I get Module not found: Error: Can't resolve './angular' in 'C:\...\node_modules\angular'

Daniel Pamich · Accepted Answer · 2016-11-21 13:08:45Z

4

Add this import to your code

import * as angular from "angularjs";

See Typescript Angular Import for more information

answered Nov 21, 2016 at 13:08

Daniel Pamich

1,00111 silver badges7 bronze badges

2 Comments

Kerry Ritter Over a year ago

I ended up relegating back to typings. I trying this syntax but still had errors.

Kerry Ritter Over a year ago

I get the following error when trying to do this with Lodash: Error in System.import, could not bootstrap. Error: (SystemJS) XHR error (404 Not Found) loading localhost:3000/lodash Error: XHR error (404 Not Found) loading localhost:3000/lodash Error loading 172.16.95.136:3000/lodash as "lodash" from localhost:3000/proj/src/app/app(anonymous function) @ localhost/:52

Augie Gardner · Accepted Answer · 2016-11-18 22:26:37Z

1

I was building a file watcher for the Webstorm IDE and ran into this problem. To solve it, I had to remove @types/angular, add typings angular also include typings angular in my compilation by adding the option: --types {your file dir}/typings/index.d.ts. Similarly, you can add that to your tsconfig.json

I know this is not the solution you were hoping for, but it got me over that hump.

answered Nov 18, 2016 at 22:26

Augie Gardner

2,7753 gold badges28 silver badges36 bronze badges

Collectives™ on Stack Overflow

Angular 1.x with TypeScript 2.x, @types, and SystemJS - Using global typings

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related