I am converting exiting project to typescript. The project is using a package ng-idle and it has #types package with name angular-idle and the file #types/angular-idle/index.d.ts contains
declare module 'angular' {
export namespace idle {
....
How do I import this package
import * as ngIdle from 'angular-idle'
or
import * as ngIdle from 'ng-idle'
There are a few ways to do this
import {idle} from 'angular'
const blah = idle.BLAH
You can even rename the namespace on import
import {idle as ng_idle} from 'angular'
const blah = ng_idle.BLAH
If you already import angular
import * as angular from 'angular'
import idle = angular.idle
const blah = idle.BLAH
(or use angular.idle directly)
Related
I'm building an hybrid angular app. The AngularJs Code has three different file for constants based on environment, created in this way
angular.module(...).constants(...).
I have a file called index.ts where i import the files of my project.
index.ts
import "./js/constants";
import "./js/constants_svil";
import "./js/constants_stage";
import "./js/constants_dev";
import "./js/angular-multi-select";
import "./js/angular-indexed-db";
import "./js/calendar";
import "./js/abmoment.min";
import "./js/acmoment-timezone-with-data";
import "./js/amoment-timezone-utils";
import "./js/fullcalendar";
import "./js/gcal";
import "./js/lang-all";
Is there a way to dynamically load this constants file based on environment? I saw there is a dynamic import used to load modules implemented in Typescript 2.4. Could it work? I need this file only for side effects, they don't have an export statement inside.
Edit: Now i'm using typescript 3.9
you can define different files for different build configurations in the angular.json:
example:
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
...
see: https://angular.io/guide/build
I have custom type in src/#types/app.d.ts ( export type AuthKeyT = string )
I would like to use it in tsx react file (using import { AuthKeyT } from '#types/app'), but I am getting an error:
Cannot import type declaration files. Consider importing 'app' instead of '#types/app'
So, when I use import { AuthKeyT } from 'app' I am getting:
Cannot find module 'app'.
So.. what is wrong? How should I import custom type?
I am using typescript 3.7.2 in react app.
You're facing this error because #types/... is a global import. For example import { AuthKeyT } from '#types/app' means your're trying to import from #types that is in node_modules.
You can fix this by changing #types to something like #customTypes or by changing the path for your types folder something like #src/types... while importing.
As the error says, you can't import a .d.ts file in TypeScript.
import ... from 'app' mean implicitly import ... from 'app.ts' or this file don't exist so you get the second error.
If you want to use your types using this import, you have to write them in a simple .ts file like that:
src/#types/app.ts:
export type AuthKeyT = string
With this structure you will be able to import this type using:
import { AuthKeyT } from 'app'
You can also add path to your compilterOptons in the tsconfig.json like this:
"compilerOptions": {
"paths": {
"types/*": [
"./#types/*"
]
}
}
and then import { AuthKeyT } from 'types/app'
I am trying to import module from #types/ng-file-upload/index.d.ts which contains
declare var angularFileUploadDefaultExport: string;
export = angularFileUploadDefaultExport;
declare module 'angular' {
export namespace angularFileUpload {
interface ImageDimensions {
}
}
}
now if i import it like below
import * as ngFileUpload from 'ng-file-upload';
or
import 'ng-file-upload';
or
import ngFileUpload = require('ng-file-upload');
but webpack is still giving error while trying to access ngFileUpload.ImageDimensions
what is the correct way to import packages defined with module??
given that it is defined inside the angular modules declare module 'angular' { there is no need to import it... just directly use it as angular.angularFileUpload
I have
require.config({
paths: {
"TestLib": "../app/lib/TestLib"
}
in my require.config, and which import should i use in my code?
(my code file path in under 'app' folder)
eg:
import {TestLib} from 'lib/TestLib';
import {TestLib} from './lib/TestLib';
import {TestLib} from 'TestLib';
You have to use
import {TestLib} from './lib/TestLib';
As you are already in app folder.You have to go to lib and then import TestLib as above.
I'm sorry, but I'm very lost. Actually I have this:
import * as angular from 'angular';
import 'ts-angular-jsonapi';
And dont return any errors. But, when I do this
import * as angular from 'angular';
import * as jsonapi from 'ts-angular-jsonapi';
I get this error:
ERROR in ./src/index.ts
(14,23): error TS2307: Cannot find module 'ts-angular-jsonapi'.
What changes need I do on ts-angular-jsonapi library for fix this errors.
More info: I need do this becouse I need make something like this:
class myresource extend jsonapi.resource {
}
I found the solution. When you write a .TS file, you can not import any .JS file. You need use require(). In the code:
// some_file.ts
import * as angular from 'angular';
var jsonapi = require('ts-angular-jsonapi'); // .js library
But if you are searching the best and correct solution for typescript node module, I build a simple example on github. With this example, you can do something like this:
import * as animal_module from 'animal_module';
class Snake extends animal_module.Animal {
constructor(name: string) { super(name); }
}
let sam = new Snake('Sammy the Python');
why don't you try
import angular from 'angular'; import jsonapi from 'ts-angular-jsonapi';