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_;
}
Related
I'm working on a project with Ionic v1 and AngularJS and Cordova.
I'm trying to include this firebase plugin in my project with no luck so far: https://github.com/dpa99c/cordova-plugin-firebasex
I was told to try out this node module: https://github.com/ionic-team/ionic-native#angularjs
However, I keep getting this error:
Error: [$injector:nomod] Module 'ionic.native' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
<script src="../node_modules/#ionic-native/core/ionic-native-plugin.js"></script>
How can I make this work in my project and how can I import ionic-native properly?
Actually, I'm using ionic-native 5.23.0 in my angularJS project and I believe all 5.x versions have support for this angular version. If you take a look in ionic-native/core you will notice that exists a file called ng1. That file have a function called initAngular1 who iterate across object's properties creating angularJS services. Here's what I did.
First, I opened the script that I use as entry point in my webpack.config to create a bundle (Since I already had webpack installed, I used)
Inside this script, I wrote the following:
require('#ionic-native/core');
const appVersion = require('#ionic-native/app-version');
const sqlite = require('#ionic-native/sqlite');
const statusbar = require('#ionic-native/status-bar');
const toast = require('#ionic-native/toast');
const ng1 = require('#ionic-native/core/ng1')
ng1.initAngular1({
AppVersion: appVersion.AppVersion,
SQLite: sqlite.SQLite,
Statusbar: statusbar.StatusBar,
Toast: toast.Toast
});
Run webpack
Inject ionic.native module in your app.
Inject any plugin you would like to use with a $cordova prefix.
angular.module('myApp', ['ionic.native'])
.controller('MyPageController', function($cordovaToast) {
$cordovaToast.show('Hello from Ionic Native', '5000', 'center');
});
Don't forget to install the cordova plugin used by the ionic-native plugin.
ionic-native stopped the support to angular ionic v1/angular 1,
https://github.com/ionic-team/ionic-native/tree/v3.x
For Ionic V1/Angular 1 support, please use version 2 of Ionic Native. See the 2.x README > for usage information.
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.
Gist
I have an application running AngularJS and Angular side by side, using the UpgradeModule. I have "upgraded" and AngularJS component (angular.component) for use in our Angular components (#Component). I have done so using the instructions on the Angular 1.x upgrade page.
The issue is that when this "upgraded" component is declared in the AppModule declarations: [] array, I receive an error saying unknown element 'tooltip'.
When I remove the declaration from the AppModule and declare it instead in the #NgModule for the component in which the upgraded component will be used, it works fine.
Please review the Gist for the code that is being used.
There is nothing wrong with the behavior.
The components must be declared in the module where you want to use it.
If you want to use the component in multiple modules, Create a SharedModule (shared module) and add your component to it's declarations and exports.
Import the SharedModule in other modules wherever you want to use this component.
More about shared modules in Angular2 Docs.
And here is a nice tutorial on NgModules that might help you.
I have been trying to use ng-upgrade as an upgrade strategy to angular2
with limited success, I have successfully added an angular2 app and downgraded
it's components, but the implementation is not very flexible.
I get an error saying
ReferenceError: MainModule is not defined
It seems like UpgradeAdapter must be instantiated in the same file as the
angular2 module declaration - which is a problem when introducing multiple,
separate modules with independent downgrades.
I guess my question is... is it the correct way to utilize UpgradeAdapter and if so
is there a way to separate the adapter definition and the module definition into
separate files?
plnkr demonstrating the issue: https://embed.plnkr.co/ZPw9BVBVSZjYbfzkAkpl/
I followed the bootstrap sequence until I found the issue,
it turns out that there were 2 mistakes in my plnkr:
Angular 1 - The ng1 app template used "module-1-component" & "module-2-component" as the downgraded components selector, but it was actually "module1-component" & "module2-component", I misunderstood the camelCase to kebab-case conversion in ng1.
Angular 2 - The ng2 module declarations had "declares" property instead of "declarations".
Updated plnkr demonstration the solution: https://embed.plnkr.co/6gljurzSWWiuk8QHvLFw/
Hope this helps!
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.