"Combining the power of AngularJS2 beta with Spring Boot: the ultimate

I am currently using Atom 1.4.0 with the atom-typescript package to develop AngularJS2 modules in TypeScript. On the backend, I have a spring-boot application for handling the REST APIs.

After making changes to the .ts files in Atom, it seems to compile the files and generate the corresponding .js files. However, when I check the changes in Chrome, they do not appear (even after inspecting the Developer console and confirming that the changes were not loaded for both the .ts and .js files).

I have tried restarting Atom, the backend server, clearing the cache on multiple browsers, and even running a build after saving each .ts file, but the issue persists. I cannot seem to figure out where the mistake lies.

A colleague who has the same setup, project (which I copied from them), and version of Atom does not experience this issue – the changes are instantly visible for them.

Do you have any idea what could be causing this problem?

tsconfig.json

{
   "compilerOptions": {
   "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
},
"compileOnSave": true,
"exclude": [
    "node_modules"
]
}

package.json

{
 "name": "resend",
 "version": "1.0.0",
  "scripts": {
  "tsc": "tsc",
  "tsc:w": "tsc -w"
  },
  "dependencies": {
   "angular2": "2.0.0-beta.0",
   "systemjs": "0.19.6",
   "es6-promise": "^3.0.2",
   "es6-shim": "^0.33.3",
   "reflect-metadata": "0.1.2",
   "rxjs": "5.0.0-beta.0",
   "zone.js": "0.5.10",
   "bootstrap": "^3.3.6"
   },
   "devDependencies": {
   "concurrently": "^1.0.0",
   "typescript": "^1.7.3"
 }
}

Answer №1

After encountering an issue with my eclipse workspace, I discovered that the problem stemmed from outdated files in the frontend folder. Eclipse was preventing a refresh of these files. The solution involved manually refreshing the folder through the Project manager tab.

To prevent this issue in the future, I also configured Eclipse to monitor this folder by following these steps:

Navigate to Windows->Preferences->General->Workspace

Then, enable the following options:

  • Refresh using native hooks or polling
  • Refresh on access

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Experience the ngx-youtube-player Angular component that allows for easy toggling between play and

My goal with ngx-youtube-player is to create a transparent div on top of it that toggles between playing and pausing the video when clicked. I am implementing this because my Angular project consists of numerous components, and one method of navigation is ...

Oops! An error occurred: Uncaught promise rejection - invalid link found for ProductListComponent

I am currently in the process of learning Angular and Ionic, but I am feeling a bit confused as to where my mistake is. I have looked at other questions, but I still can't seem to figure it out. Can anyone provide some assistance? Perhaps someone has ...

Angular 2 issue with nested form elements

Looking to build a form that includes nested sub/child components within it. Referring to this tutorial: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 https://plnkr.co/edit/clTbNP7MHBbBbrUp20vr?p=info List of modificatio ...

What is the ideal way to name the attribute labeled as 'name'?

When using the ngModel, the name attribute is required. But how do I choose the right name for this attribute? Usually, I just go with one by default. angular <label>First Name</label> <input type="number" name="one" [( ...

I require the JSON data to be displayed in an array format

I am looking to convert a JSON object into a JSON array in Laravel. Currently, I am receiving JSON data in object format. $category = new Categories; return Response::json(array( 'error' => false, 'category' => $category- ...

Using an array of strings as a key in React with TypeScript to access values from state

import React, { useState } from 'react'; interface PropsInterface { keys: string; // name,email,password } const Poster: React.FC<PropsInterface> = (props: PropsInterface) => { const [state, setState] = useState({ name: ' ...

Accessing Webpack bundles using an "@" symbol for imports

I am currently working on bundling a Node Express server that was created using TypeScript and is being packaged with Webpack. Everything seems to be running smoothly when I compile/transpile the code into one JavaScript file called server.js. However, af ...

How can you verify the value of a disabled HTML input element in TestCafe using Typescript?

TestCafe Typescript - how to verify the value of a disabled HTML input element? Despite being disabled for user interaction, I want to ensure that this element still holds the anticipated value. example public async checksomething(text: string) { co ...

What is the process for installing both highcharts-angular and highcharts together?

UPDATE: Issue resolved - the problem was that the package.json file was read-only (refer to my answer). I have an Angular application (version 7) and I am attempting to integrate Highcharts. I am following the guidelines provided by highcharts-angular her ...

Angular 2: Enhancing Textareas with Emoji Insertion

I am looking to incorporate emojis into my text messages. <textarea class="msgarea" * [(ngModel)]="msg" name="message-to-send" id="message-to-send" placeholder="Type your message" rows="3"></textarea> After entering the text, I want the emoj ...

What causes the error message "No exported member 'ɵɵFactoryDeclaration' in @angular/core/core" to appear during project compilation?

I am facing an issue where the global Angular CLI version is 13.0.1 and the local version in my project is 10.2.3. Despite making changes to some components (without touching package.json), I encountered an error during the build step of my bitbucket pipel ...

What is the process for extracting TypeScript types from GraphQL query and mutation fields in order to get args?

I am experiencing difficulties with utilizing TypeScript and GraphQL. I am struggling to ensure that everything is properly typed. How can I achieve typed args and parent properties in Root query and mutation fields? For instance: Server: export interfa ...

Contrasting the Appmodule and Pages module within Angular: A Comparison

After cloning this project, I noticed that it contains two types of modules: one inside the page and the other in the root directory. Directory Tree: https://i.sstatic.net/tjq0I.png App.module.ts import { BrowserModule } from '@angular/platform-bro ...

Encountering an issue while attempting to input a URL into the Iframe Src in Angular 2

When I click to dynamically add a URL into an iframe src, I encounter the following error message: Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'SafeValue%20must%20use%20%5Bproperty%5D' To ensure the safety of the ...

Angular 2 and beyond: delivering a unified global service instance for sub-modules

Exploring how to create a comprehensive service that can be accessed from submodules within an angular 2+ application is key. While the traditional component hierarchy setup works well for this, understanding the process when dealing with multiple modules ...

Angular search filter with pagination feature

Html component <input type="text" class="form-control" placeholder="Search" (change)="searchText($event)"/> <li *ngFor="let list of this.lists | paginate: { itemsPerPage: count, currentPage: p,totalIt ...

I'm attempting to showcase the keyName and pattern for the arrays of Objects in Keyless and Keypresent in AngularJS, but unfortunately, I'm facing some issues

let information = { headerFields: { noKey: [{ key1: { name: "test1" }, key2: { name: "test2" }, key3: { name: "test3" } }], hasKey: [{ key1: { name: "test4" } ...

Confirm your identity without using a Single Sign-On (SSO) system

My current situation involves a PHP-based website where users login using credentials stored in a database. Additionally, we have another SPA website with .NET CORE as the API layer. Unfortunately, we do not have the option of utilizing a central authent ...

Geolocation plugin in Ionic encountered an issue: "Geolocation provider not found"

I've been working on implementing geolocation in my ionic2 hello world project, and I successfully added the ionic plugin called "Geolocation" by following the instructions on the official website. After running these two commands: $ ionic plugin add ...

Error: Visual Studio unable to locate Firebase node module

After running the command npm install firebase --save in the root of my project folder, a firebase folder was successfully added to my node_modules directory and the packages.json file was updated accordingly. In addition to using typescript, I have an ap ...