Issue with migrating from Angular version 2.4.10 to 4.0.0

After attempting to update my application from Angular 2.4.10 to 4.0.0, I used the following command:

"npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save". 

Although there were no issues during "npm install", I encountered the following errors during "npm run build". As per changelog instructions, I included "lib" in compilerOptions.

ERROR in [default]
File '/node_modules/bootstrap-loader/loader.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

ERROR in [default]
File '/node_modules/core-js/es6/index.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

ERROR in [default]
File '/node_modules/fullcalendar/dist/fullcalendar.min.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

ERROR in [default]
File '/node_modules/hammerjs/hammer.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

ERROR in [default]
...

"package.json"

 {
"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
...
},
"devDependencies": {
"@angular/compiler-cli": "4.0.0",
...
}

"tsconfig.json"

{
  ...
}

Answer №1

To resolve this issue, you may want to consider including additional libraries in your tsconfig file specific to Angular4. In my own project, I have specified the following libraries:

"lib": [
  "es5",
  "es2015",
  "es2017",
  "dom",
  "scripthost"
]

If this does not solve the problem, you can also try setting "allowJs": true within the compilerOptions section of your tsconfig.json file. However, it is important to note that this should be viewed as a temporary workaround and indicates there may be underlying issues with your repository.

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

Angular does not receive events from Socket.io

Recently I started coding with AngularJS and decided to build a real-time app using Socket.io: The service I'm using shows that the connection is fine on the console. Here's a picture of the Console.log output However, when I attempt to emit c ...

Unable to establish connection between Angular-CLI and backend server using proxy

Visit this link for instructions on how to set up proxying to a backend server. I followed the steps carefully, but my requests are still not being proxied. I am running an Express backend on port 8080 and an Angular2 frontend on port 4200. In my Angular ...

Exploring the zoom functionality and tooltip features of Area Range charts in Highcharts

I need help with a couple of things on the high charts area range chart: I am trying to enable zooming into the y-axis of the chart, but I am facing difficulties. Can anyone suggest how this can be achieved? Below is the link to my jsfiddle with the sam ...

I'm having trouble grasping the issue: TypeError: Unable to access the 'subscribe' property of an undefined object

I've been working on a feature that involves fetching data from API calls. However, during testing, I encountered some errors even before setting up any actual test cases: TypeError: Cannot read property 'subscribe' of undefined at DataC ...

When attempting to redirect to the home page in Angular 6, the page successfully redirects but fails to load properly

I am new to using angular. Recently, I converted a large project from html/css/php/js to twig/slim, and switched the hosting platform from apache2/sql to s3 buckets/lambda apis. While I have successfully converted smaller projects to angular without any i ...

Run JavaScript code whenever the table is modified

I have a dynamic table that loads data asynchronously, and I am looking for a way to trigger a function every time the content of the table changes - whether it's new data being added or modifications to existing data. Is there a method to achieve th ...

Managing enum types with json2typescript

After receiving a JSON response from the back-end that includes an Enum type, I need to deserialize it. The JSON looks like this: { ..., pst:['SMS','EMAIL'], ... } In Typescript, I have defined my enum class as follows: export enum Pos ...

Angular 5 - Empty array containing objects has a length of zero

In my app.component.ts file, I have an array initialized to load objects in the onInit event: ngOnInit() { this.pages = []; } Within the ngOnInit event, I also have a setInterval method that evaluates an expression every few milliseconds: setInterval(() ...

Angular is unable to find any matching routes

I am currently working with two components: •QuestionsComponent •QuestionComponent Within app.module.ts, I have defined my routes using the following code: import { Component, NgModule } from '@angular/core'; import { BrowserModule } from &a ...

Trigger a table refresh to display updated information

When I select the select option to make an API call for a new datasource, my table appears before fetching data and it remains empty. Additionally, if I choose another select option, it displays the previous data from the previous selection. I have attemp ...

Angular jsonp.get request was denied despite receiving a status code of 200 indicating success

I have been attempting to access my basic web API created in Jersey, which returns the following data: [ { "id": 1, "name": "Facebook", "userName": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4 ...

How to retrieve information from JSON files utilizing arrays

I have a JSON object that contains connection points data in an array. Here is an example of the structure: assetType : "this" connectionPoints:Array(1) type:{name: "Structure", In my TypeScript file, I am handling this data like so (entity represents ...

Explore the route parameter in Angular 2

Trying to transfer a variable between two components using route parameters? In the first component, an id is sent using this function: sendId(id : string) : void { this.router.navigate(['/component2', id]); } The routing module setup inclu ...

Modal for Firestore CRUD operations update()

Currently seeking assistance with a CRUD system that involves modal dialogues. I have successfully implemented adding and deleting functionalities, but I am encountering an issue with editing. Although I can retrieve the data for each record in its respect ...

The data set in a setTimeout is not causing the Angular4 view to update as expected

I am currently working on updating a progress bar while importing data. To achieve this, I have implemented a delay of one second for each record during the import process. Although this may not be the most efficient method, it serves its purpose since thi ...

Discover the steps to implement user authentication with a combination of username, password, and token in an Angular 4

After developing a form using Angular 4, I encountered the need to send the form data via the post method with Angular 4. Testing with Postman showed that the data is being received correctly. To accomplish this, I must use Basic Auth with a username and p ...

Tips for troubleshooting or modifying a dependency that exclusively consists of type declaration files

I am currently facing a challenge where I need to access and debug/change the code of one of our dependencies that contains custom Angular components from a separate repository. This particular repository is being included via a self-hosted npm registry wi ...

fill the designated column in accordance with the specific criteria

Is there a method to automatically fill in a specific column based on certain conditions? I am looking to populate the column labeled [Last] when the column index is 1 and the corresponding name is [First]. import {Component, OnInit} from '@angular ...

Adding an external JavaScript library file to a specific component in Angular 7 is a straightforward process. Let's walk through the

As a beginner in Angular framework, I've encountered an issue while working on creating a custom HTML template using Angular version 7. My template consists of various pages like home, about, product, etc. Specifically, on the home page, I am trying t ...

Is it recommended to exclude the NGXS NgxsLoggerPluginModule for production deployments?

When developing, it's common to use the following imports: import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin'; import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin'; Is it recommended to remove these imp ...