Angular 1.x with TypeScript 2.x, @types, and SystemJS - Using global typings
Solution 1
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.
Solution 2
Add this import to your code
import * as angular from "angularjs";
See Typescript Angular Import for more information
Solution 3
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.
Related videos on Youtube
![Kerry Ritter](https://i.stack.imgur.com/6ajHo.jpg?s=256&g=1)
Kerry Ritter
Updated on August 17, 2020Comments
-
Kerry Ritter almost 4 years
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?
-
Kerry Ritter over 7 yearsI ended up relegating back to typings. I trying this syntax but still had errors.
-
Kerry Ritter over 7 yearsI 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
-
AngularOne over 7 yearsYou are currect. 10x for this answer you solved me the problem
-
cgatian over 7 yearsThis sovled an issue I had trying to import fabricjs. Thanks
-
eXavier about 7 years@PSL where to put the file for the approach 1) ?
-
PSL about 7 years@eXavier You can place it anywhere in your app root.
-
JonathanPeel about 7 yearsI am trying this, but I get
Module not found: Error: Can't resolve './angular' in 'C:\...\node_modules\angular'