Looking to integrate Sails with Angular 2 and add TypeScript to my project. As a newcomer in this field, I'm unsure how to configure this.
I have created a Sails app using the command:
sails new myApp
Could anyone guide me on how to incorporate this into my project?
Discover a helpful solution at this URL :
The tutorial mentioned might not be applicable anymore as it requires npm installation of angular v2.0.0 beta2 and the latest version of Typescript (currently 1.8). However, TS 1.8 is compatible with Angular2 beta7 or higher (older versions work well with TS 1.7.5), resulting in an error message:
"node_modules/angular2/src/facade/promise.d.ts(1,10): error TS2661: Cannot re-export name that is not defined in the module."
Reference 1 : https://github.com/angular/angular/issues/6795
Reference 2 : https://github.com/angular/angular/issues/6468
Here's how to tackle it :
To start, globally install Typescript using :
npm install -g typescript
Then include dependencies in your package.json as follows :
{
"name": "test",
"private": true,
"version": "0.0.0",
...
}
The "start" line within "scripts" enables simultaneous compiler, server, and sails server startup using:
npm start
Update dependencies to the latest versions by running :
npm update --save
Add the code below into a new tsconfig.json file at your Sails application root for Typescript configuration.
{
...
}
Create a typings.json file in the app root to introduce additional library capabilities per angular.io guidelines.
{
...
}
If you're using EJS as the template engine, append the provided script tags to your layout.ejs.
...
The initialized /app/main.ts script will serve as the entry point for Angular 2. To prevent 404 errors for added scripts, modify express.js in the config folder.
var express = require('express');
module.exports.http = {
customMiddleware: function (app) {
app.use('/node_modules', express.static(process.cwd() + '/node_modules'));
}
};
Integrate two Typescript files into assets/app/ directory for compilation purposes.
Execute "npm start" and visit localhost:1337 to view "My First Angular 2 App."
Hope this walkthrough helps!
Alix
Incorporating NGRX into my project, I am looking to implement simple GET requests to an API that are retried up to five times. The reason behind this is occasional throttling from Azure Cosmos-DB (free-tier). To achieve this, I have set up an http-interce ...
Currently, there is a method under development that retrieves a value from the API. What steps are needed to properly integrate Async/Await functionality into this process? fetchAccountById(){ let accountName; this.accountService.fetchDa ...
Utilizing a TypeScript class that I created called Budget to initialize data for a module has been proving to be challenging. When I attempt something like this: currBudget: {} = { id: 20, name: 'Chris' }; everything functions as expected. How ...
Within the first (parent) div, there is an underlined message stating: "This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.ts(2746)". import A from './components/A&ap ...
I'm attempting to insert a picture from my device and then adjust its orientation in nativescript. So far, I've been using imageSource to import the picture, but I'm unsure how to rotate it. If anyone has suggestions for another class that c ...
I am relatively new to TypeScript and recently encountered an issue while working with classes. class DataStorage { private data:string[] = []; addItem(item: string){ this.data.push(item); } removeItem(item: string){ ...
I am working on an Angular class that represents a shape. My goal is to be able to create multiple instances of this class using a constructor. The constructor requires several arguments that define the properties of the shape. constructor(public center: ...
Is it feasible to dynamically create a selector in Angular programmatically? Consider a scenario where there is a parent component named header.component with the following structure; export class ContentHeaderComponent { @Input() iconName: string; } ...
I recently initiated a new project and am currently in the process of setting up an absolute path by referencing this informative article: https://medium.com/geekculture/making-life-easier-with-... Despite closely following the steps outlined, I'm en ...
I am currently exploring options on how to add and delete multiple input fields. When a user submits two or more fields, I want the results to be displayed in an array. This is my HTML form: <form method="post" [formGroup]="formData"> ...
I am utilizing a Generic type type GenericType = { [key: string]: { prop1: string, prop2?: string, prop3?: number, }, }; The purpose of the Generic type is to assist in constructing / validating a new object that I have created. const NewO ...
Why am I encountering an error and what steps can be taken to resolve it? Currently using the latest version of Angular. ERROR TypeError: Cannot read properties of undefined (reading 'id') Here is the JSON data: { "settings": [ { ...
Check out this example of HTML code: <div id="main1" data-attribute="main"> <div id="section2" data-attribute="subsection"> <div id="nested3" data-attribute="sub-subsection"> </div> </div> </div> <div id= ...
Is there a way to convert this scenario? I am working on a project where the userID needs to be displayed in a specific format. The first 3 characters/numbers and last 3 characters/numbers should be visible, while the middle part should be replaced with ...
After implementing pagination and following the guidelines provided here. This is my code from the app.component.ts file - import { Component, OnInit, ViewChild } from '@angular/core'; import {MatPaginator} from '@angular/material/paginat ...
During my test project on lazy loading, I closely followed a pluralsite article but encountered an error when attempting to navigate to my component. The error message indicated that it couldn't locate the first.module. Although the process seemed st ...
What is the best way to adjust the width of an input text in Angular? I recently integrated an input text component called 'njm-input' from a third-party library into my application. However, I encountered difficulties when trying to customize i ...
Looking for a solution: <select (change)="getYear(year)"> <option value="year" *ngFor="let var of array; let i = index" {{year.year}} </option> </select> Is there a way to configure the typescript code so that I can dynamica ...
Just getting started with TypeScript! I've been working on transitioning my React.js project from JavaScript to TypeScript. I managed to resolve all the bugs and verified that it runs smoothly when using npm start. However, whenever I try to comp ...
Hello there! I'm currently working on adjusting the trigger area for opening the next menu panel. Right now, the next menu panel opens whenever I hover over either the title or the arrow. However, my goal is to have the menu open only when I hover ove ...