I am new to TypeScript but trying to work out a way to manage my environment variables as I deploy and build through each. We are using gulp and I found gulp-ng-config. Issue with this is it writes out a js file but the rest of my site is written in TypeScript. So it creates this JS.
angular.module('myModule', []).constant('EnvironmentConfig', {"environment":"dev"});
In my TypeScript code I want to be able to access this constant but just cannot figure out how to. I read this post on SO and tried what is said there but no go.
Here is what I have done:
Created a TypeScript Interface for it:
export class IEnvironmentConfig {
environment: string
}
Imported and declared a variable in my service:
import EnvironmentConfig = require("../EnvironmentConfig");
declare var mEnviornmentConfig: EnvironmentConfig.IEnvironmentConfig;
Tried to use this variable in my service:
console.info(mEnviornmentConfig.environment);
So TypeScript does not complain now but when I run the code I get this error:
mEnviornmentConfig is not defined
What am I missing? The myModel is declare at the start of my app and does other module and controller configuration so I know it is getting registered.
Thanks to #keithm for getting me in the right direction.
Figured it out. Once I realized that injecting it into my main module was working my thought turned to how gulp is doing webpack. And sure enough the webpack was just skipping the .js file this other gulp package was creating. Once I updated webpack to account for this new file all was good.
Related
I have a React app created using Create React App that was running fine until today. Something must have updated the last time I installed a new package. Anyhow, so whenever I try to start the app, it complains that there are .ts files (within node_modules folder) and forces me to install TypeScript.
Is there any way to stop this behaviour? Because currently, installing TypeScript just opens a bottle of worms, where I need to resolve the TypeScript errors that arises.
Also, as the screenshot suggests, removing the tsconfig.json file doesn't resolve the issue, it gets automatically created on every run..
Currently because it's preventing me to work, I've done the following modification until they fix it on the Create React App:
Current solution until they fix the create react app
On the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js, find the definition of verifyNoTypeScript() (line 24). Replace the function to the following:
function verifyNoTypeScript() {
return true;
}
I have a large AngularJS app which I am in the process of upgrading (with NgUpgrade, webpack etc.) To start with, my new Angular (4) components are .ts files but my old AngularJS parts are .js files, transpiled using the Babel loader for webpack.
I would like to migrate all .js files to .ts files so that I can have everything go through the TypeScript compiler and no longer require Babel etc.
For the most part, the app runs fine (with a few small tweaks) by just renaming the files from .js to .ts and adding an import for angular at the top:
import * as angular from 'angular';
However, when I run my app, I now see a warning:
WARNING: Tried to load angular more than once.
This makes sense because Angular would be loaded once by the global script include, and once by the module import.
I can't avoid having the global script include, because I am using other scripts that require the angular global variable to be present.
As such, I think I should be using the global variable, but need to declare it to keep the TypeScript compiler happy (as per NgUpgrade documentation). I have tried changing the top of each file to:
declare var angular: angular.IAngularStatic;
This doesn't work and I get an error like the following:
TS2503: Cannot find namespace 'angular'.
Can anyone please tell me what is going wrong? I have installed #types/angular with npm/yarn and do not have typeRoots or types in my tsconfig.json file. My understanding is that this should automatically find the declarations in node_modules/#types but this doesn't seem to be the case?
I've found a solution which is working nicely (thanks to https://stackoverflow.com/a/42035067/1145963).
Added a .d.ts file at the root of my project:
declare global {
const angular: ng.IAngularStatic;
}
export {};
This allows me to use the angular global from anywhere, without needing any import or declare statements at the top of the files and without needing to do any special Webpack configuration.
I want to do some conditional operations inside my angularjs application for different versions of my app. How do I import the version property of my bower/package.json file from my Angular app locally.
I seem to get module not founderror when trying to import the json file (actually anything that's not .ts file). I am not planning to use $http.get(..) to read the json file asynchronously nor installing node/express packages to use require module.
I want to simply use the ES6 or SystemJS module loader for doing this task. Thank you :)
Solution in AngularJS Controller:
var appVersion = require('electron').remote.app.getVersion();
this sound like a simple question but i am a newbie with angular, basicly i want to use AngularFileUpload to upload images on my website, so i did this when i initialize my app:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
before i installed the angularFileUpload module trough npm, so my module is inside node_modules, but i get an error evertyme i start my app
error:
Failled to instantiate module due to:
'fn' is not a function, got string.
someone know what is happening?
That happens because you are injecting the modules in a wrong way.
You are inserting two arrays:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
Instead you should insert just one array with all modules:
var app = angular.module('myApp',['ui.router','angularFileUpload']);
You should use bower instead of npm for loading your client side dependencies in AngularJs. There are following steps required to correctly load your module:
Download using following bower command
bower install angular-file-upload
Then include this library in the script tag, by providing correct location to minified js.
Last inject modules in correct way
var app = angular.module('myApp',['ui.router','angularFileUpload']);
And that's it. Please let me know if it helped you!
I'm currently trying to update my angular 1 application from typings to #types.
First I got following error message:
Identifier 'angular' must be imported from a module
After some searching I found out, that angular isn't accessible globally anymore. Or anleast I didn't find out how...
With typings, angular was global and I could use it without imports or anything. My problem is, that an import of angular, like this:
import * as angular from 'angular';
breaks my application: Unfortunately SystemJS is now trying to load angular and because of this it's not available when ui-bootstrap and other libs are loaded with script tags.
To fix this, I would have to rewrite a huge part of the build-pipeline. So I'm asking again: Is there another way to use angular with TypeScript 2 and #types, that doesn't end in a require('angular')?
I found the answer. Do this and everything will work finr.
import * as _angular_ from 'angular';
declare global {
const angular: typeof _angular_;
}