I am programming an angularjs application in visual studio using typescript. I want to include the ngImgCrop module link into my application but have not been successful at doing so. Here's how I tried to include the module in my component
import {ngImgCrop} from 'ng-img-crop-full-extended'
I already installed the package using
npm install ng-img-crop-full-extended
inside my angular application directory and included the required reference to
ng-img-crop.js and ng-img-crop.css
scripts in my index.html. The javascript version requires me just to include the module like this
angular.module('app', ['ngImgCrop'])
However, I have no idea on how to include it into my version of angularJs using typescript. Any help will be great thank you.
The problem is you are using a Javascript import which does not actually inject the ngImgCrop module into your AngularJS project.
You still have to include the module in your app's AngularJS module as you mentioned above using the following code:
angular.module('app', ['ngImgCrop']);
(This assumes you want to name your application's module app.)
The other javascript import you are doing, ie the import {ngImgCrop} from 'ng-img-crop-full-extended, can be used to import the Typescript classes so they can be used in the vscode intellisense, but it is not actually used by the AngularJS framework at all. If the ngImgComp code isn't a Typescript file then there is no need to import it using the javascript import at all.
If you want the intellisense for the ngImgCrop code, you can see if there is a Definitely Typed file for ngImgCrop and install that using
npm install #types/<ngImgCrop project name>
Then include the index.d.ts file from that installed project in the build.imports.d.ts file for your project by adding the following line, replacing ngImgCrop with the correct name.
/// <reference path="mode_modules/#types/<ngImgCrop project name>/index.d.ts />
Related
I'm trying to separate my projects and keep logic as separate components that I will end up publishing. For now, before I do so, I'd like to keep it organized as such:
A library of TS scripts in a project called project-a
A separate React app that I created with create-react-app (using Typescript as the template) called project-b
The React app's .tsx components will pull from project-a's .ts files.
I've gone ahead in project-b and ran yarn add ../project-a. This installs the library as a dependency. I then import the .ts files and my code editor is able to see all the types and definitions really nicely. Great!
When I run the application, Webpack complains:
./node_modules/project-a/src/calc.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> export enum Position {
| Inner = 0,
| Outer = 1
I don't understand why it's not parsing the file as a .ts. The whole React application is setup with TypeScript and I'm even import some .ts files locally. Do I need to tell Webpack to handle the files imported from this module as Typescript source (assuming Webpack wouldn't attempt parsing them if it didn't need to)?
The React template didn't setup a webpack (I'm assuming it's using a hidden default) but I am able to adjust the tsconfig.json file. I added my modules direct path into the include array. That didn't seem to do much either.
Basically: how can I get passed the above error and continue importing the TypeScript files from my dependency module in my main application?
You have to compile down project-a to javascript and emit the typings file, because imports from packages have to be Javascript.
The type infos you get from external packages is delivered via the .d.ts file alongside the package.
When you import other packages, you always import the Javascript file.
Even locally, Webpack doesn't compile the typescript for you, a loader during bundling does. So once running inside the browser, it's all Javascript.
But you are trying to import a Typescript file during runtime.
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.
I have an angular 1.6.x project being served up by a MVC project. When I hit save on any ts file, it transpiles my javascript as expected. When I build the site it transpiles the javascript into a different format from when I save.
On build, the angular modules are moved into an order which causes an angular $injector error.
How can I make build transpile method the same as the save transpile?
These are the typescript build settings within the MVC project properties:
For every typescript file in your project there is a line in your proj file which looks like this:
<TypeScriptCompile Include="app\app.ts" />
Somehow my app.ts include was placed towards the bottom of the xml of my proj file. The build transpile method uses the order of your TypeScriptCompile include statements, whereas the transpile on save method is apparently a little more intelligent about re-ordering.
Life can move forward now...
I need the Sticky States feature for my project.
I'm using UI Router 1.0.0-rc.1 so i can't use the ui-router-extras library (that was designed for 0.xxx)
Recently the author ported that feature for the 1.xx router
https://github.com/ui-router/sticky-states
This release comes only with .ts sources.
My project is written in plain ES5 js, so i tried to build myself the final js to be used in browser with <script src="..." type="text/javascript">
I have npm install all dependancies and then npm run build
What i got are two folders 'lib' and 'lib-esm' that contains each more than one js files that i don't understand how to reference them from .html file (files are index.js & stickyStates.js)
Also tried to run webpack but what i get is a huge file with more than 8K lines of code (probabile also ui-router get bundled within..)
NOTE: Author has already been asked for that by someone but he didn't provided a solution yet:
https://github.com/ui-router/sticky-states/issues/4
Thank you very much