Posts

Showing posts with the label typescript

How can I do to use Angular 5/6 for frontend and Codeigniter 3 for backend in the web same app?

How can I do to use Angular 5/6 for frontend and Codeigniter 3 for backend in the web same app? I want to buid a web using Angular 6 for frontend and Codeigniter 3 for backend . The problem is that I don't know how to combine the two, and all the tutorials I looked were using AngularJS which is the version 1 whereas i'm using version 6 , and it didn't really work. I am looking for something like JavaScript & CSS Scaffolding using Angular 6 (and not AngularJS ) with Codeigniter 3 What I want is to set the view to be the Angular app and let Codeigniter do the routing and handle the server Can anyone help me?? 1 Answer 1 You can create APi's in codeigniter and then implement those in Angular or any other front end language. I forgot to tell I am new to this, so please can you tell me exactly how to do that or redirect me to a place where I can find ...

ERROR in @angular/material/autocomplete/typings/autocomplete-origin.d.ts: Type 'ElementRef' is not generic

ERROR in @angular/material/autocomplete/typings/autocomplete-origin.d.ts: Type 'ElementRef' is not generic I have downloaded some angular template which makes use of angular material library... I was trying the run this template on my local machine.. I have successfully executed the npm install .. but while ng serve .. I am getting the warnings & errors like below, npm install ng serve Your global Angular CLI version (6.0.7) is greater than your local version (1.7.4). The local Angular CLI version is used. To disable this warning use "ng config -g cli.warnings.versionMismatch false". @angular/compiler-cli@4.4.7 requires typescript@'>=2.1.0 <2.4.0' but 2.5.3 was found instead. Using this version can result in undefined behaviour and difficult to debug problems. Please run the following command to install a compatible version of TypeScript. npm install typescript@'>=2.1.0 <2.4.0' To disable this warning run "ng set warnings.type...

Jest not finding typescript tests

Jest not finding typescript tests I'm trying to write a jest test but it's giving me an odd error. TypeError: jest_1.it is not a function 9 | 10 | describe('Health check', () => { > 11 | it('GET works', async () => { I'm not sure if posting all the various config files would help so maybe I'll just point out the pieces I'm using: serverless framework with serverless-plugin-typescript plugin, typescript, jest, ts-jest. My understanding is that ts-jest should be compiling the TS for me and then handing it over to Jest. One thing is I know serverless is opinionated about it's TS configuration so maybe that's causing an issue with ts-jest. Any ideas about what I should be looking at? Edit: formatting on code block 1 Answer 1 Figured it out. I had imported it at the top of my test file like so: it import {it} from 'jest' import {it} f...

TypeScript - How to append line break (n) on string?

TypeScript - How to append line break (n) on string? I'm trying to concatenate a string with a "n" like this: - Item 1 - Item 2 var msg: string = ''; msg += '- Campo NOME é obrigatório'; msg += "n- Campo EMAIL é obrigatório"; But the output comes without the line break: - Item 1 - Item 2 I searched a lot about it but I didn't find a solution. Could you please help me? :) 1 Answer 1 If you rendering to HTML, you will want to use the HTML tag for a newline : The string HellonnTest in your source will look like this: HellonnTest Hello! Test The string Hello<br><br>Test will look like this in HTML source: Hello<br><br>Test Hello<br><br>Test Try this : var msg: string = ""; msg += "- Campo NOME é obrigatório"; msg += "<br/>- Campo EMAIL é obrigatório"; Here is fiddle : https://jsfiddle.ne...

Can't install TypeScript on MacOS - Terminal Error

Can't install TypeScript on MacOS - Terminal Error I have Visual Studio Code on my Mac and want to install TypeScript for Angular. I already previously installed Node.js or Git I think. This command from the TypeScript website should install TypeScript if it's run in the Mac Terminal, but it doesn't: npm install -g typescript If I paste it in the Terminal and press enter, this Error-code appears in the Terminal: (What is the problem? I really don't get it and have no clue about the terminal, I'm not a computer pro. Would be a big help if you have tips in easy words for beginners. Thanks!!) MacBook-Pro:~ Max$ npm install -g typescript npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! path /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR! { [Error: EACCES: permission denied, access '/usr/lo...

Typescript: Wrong overload selection based on function return type

Typescript: Wrong overload selection based on function return type Why the following code is a compile error: export interface Timer { } declare function setInterval(callback: (...args: any) => void, ms: number, ...args: any): Timer; declare function setInterval(handler: (...args: any) => void, timeout: number): number; const timer: number = setInterval(() => console.log('hi'), 1000); Also, when I change the order of declare function statements, it compiles the code without any errors. Looks like compiler just accepts the first type declaration. declare function EDIT: I couldn't provide a link to playground because the url was not correctly formatted in the question and I couldn't use any url shortener! 1 Answer 1 The problem is that Typescript does not (usually) take into account the expected call site return type when resolving function signatures. In your case just looki...

Angular2, what is the correct way to disable an anchor element?

Angular2, what is the correct way to disable an anchor element? I'm working on an Angular2 application, and I need to display -- but disable an <a> HTML element. What is the correct way to do this? disable <a> Updated Please note the *ngFor , this would prevent the option of using *ngIf and not rendering the <a> altogether. *ngFor *ngIf <a> <a *ngFor="let link of links" href="#" [class.disabled]="isDisabled(link)" (click)="onClick(link)"> {{ link.name }} </a> The TypeScript component has a method that looks like this: onClick(link: LinkObj) { // Do something relevant with the object... return false; } I need to actually prevent the element from being clickable, not just appear that it is with the CSS . I was assuming that I needed to potentially bind to the [disabled] attribute at first, but this is incorrect as the anchor element doesn't have a disabled property. [disabled]...

Typescript primitive types: any difference between the types “number” and “Number” (is TSC case-insensitive)?

Typescript primitive types: any difference between the types “number” and “Number” (is TSC case-insensitive)? I meant to write a parameter of type number , but I misspelled the type, writing Number instead. number Number On my IDE (JetBrains WebStorm) the type Number is written with the same color that is used for the primitive type number , while if I write a name of a class (known or unknown) it uses a different color, so I guess that somehow it recognizes the misspelled type as a correct/almost-correct/sort-of-correct type. Number number When I compile the code, instead of complaining for example that the compiler couldn't found a class named Number , TSC writes this error message: Number Illegal property access Does that mean that number and Number both co-exists as different types? number Number If this is true, which is the difference between those classes? If this is not the case, then why it simply didn't write the same error message it displays for unknown classes ...

“fake path” issue using multer+angular 6

“fake path” issue using multer+angular 6 I spend the last 3 days to fix the problem , but i didnt figure out yet the issue. Angular CLI: 6.0.8 Node: 8.11.2 OS: win32 x64 Angular: 6.0.6 multer. 1.3.1 my code at "childApi" using multer staff : var store = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './uploads'); }, filename: function (req, file, cb) { cb(null, Date.now() + '.' + file.originalname); } }); var upload = multer({ storage: store , }).single('file'); router.post('/upload', function (req, res, next) { upload(req, res, function (err) { if (err) { return console.log ('not working well') } //do all database record saving activity return res.json({ originalname: req.file.originalname, uploadname: req.file.filename }); }); }); my code at "add-child" component using simple code : import { Component, OnInit, Injec...