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';
Related
As I'm using Firebase Cloud Messaging in my React, it requires me to put the firebase-messaging-sw.js in my public folder.
In there, it is defining the function for the onBackgroundMessage, which I want to have an access to my module, and update some of my components in my src.
import { toast } from "react-toastify"; // or import my other modules
messaging.onBackgroundMessage(function(payload) {
console.log('Received background message ', payload);
//toast or do some updating my modules
toast(`Message received : ${payload}`) // here comes the error
});
But I got an error of
Uncaught SyntaxError: Cannot use import statement outside a module (at
firebase-messaging-sw.js:3:1)
How can I import my src module to the public folder?
How should I properly use the onBackgroundMessage in React?
is it normal to import module from src to the public folder?
Use importScripts to import scripts into the worker's scope like firebase-messaging itself.
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');
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'm building an app with PixiJs and Angular2 and I'm trying to import the pixi typescript definitions (https://github.com/pixijs/pixi-typescript).
I want to extend the Pixi Sprite type, but I am unable to import the library.
Here is the code:
import { Sprite } from '../../assets/pixi.js';
export class test extends Sprite {
//...
}
This results in the error "File 'C:.../src/assets/pixi.js.d.ts' is not a module. at line 1 col 24"
The path is definitiely correct. What am I doing wrong and how can I fix this issue?
I am new to Angular, background is server side Java, .Net...
So, I completed the Tour of Heroes and I have created simple hard coded multi-page application. Now I need to go the next step and call the server to retrieve data via a rest/JSON call. Based on the AngularJS example:
https://angular.io/docs/ts/latest/guide/server-communication.html
and a few other blogs such as:
http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html
I have a pretty good understanding of how it is supposed to work. However, I see two errors now:
In the browser: Cannot resolve all parameters for 'AuthService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AuthService' is decorated with Injectable.
and in NPM:
app/auth.service.ts(9,19): error TS2304: Cannot find name 'Http'.
I have no clue how to chase the dependencies down. packages.json? typings.json, tsconfig.json... Or how they all work; and I cannot find any documentation; any suggestions?
auth.service:
import {Injectable} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
#Injectable()
export class AuthService {
items:Array<any>;
constructor(http:Http) {
}
}
main.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS} from 'angular2/http';
import { AuthService } from './auth.service';
bootstrap(AppComponent, [HTTP_PROVIDERS, AuthService]);
I have not consumed the Auth.Service in an component yet.
Tim
I think the problem is you are not pulling in Http, just HTTP_PROVIDERS, in your auth.service try this
import {Http} from 'angular2/http'