Encountering difficulties when trying to deploy Angular 4 with TypeScript on Heroku

I have been facing an issue while trying to deploy my angular 4 app on Heroku. The deployment fails to proceed properly even though everything works fine locally.

Here are the relevant files:

package.json

{
  "name": "webcli2",
  "version": "0.0.0",
  "license": "MIT",
  "main": "app.js",
  ...
}

app.js 

const express = require('express');
...
console.log('console listening');

Procfile web: npm start

About the error encountered, here is a snippet:

remote:        @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2824263b22272e39662827220b7f657f657d">[email protected]</a> requires typescript@'>=2.1.0 <2.4.0' but 2.6.1  was found instead.
...
remote: -----> Build failed

It appears that Heroku has TypeScript version 2.6.1 whereas the package specifies version 2.3.3. Is this causing the errors?

Locally I see:

Brunos-MBP:webcli brunolopes$ ng build -aot
12% building modules 18/18 modules 0 activeWarning: Can't resolve all 
parameters for ApplicationError in ...
Date: 2017-11-16T07:51:16.467Z                                                          
Hash: 32f3a3b7f72daf78e799
...

Thank you

B

angulartypescriptherokudeployment

Answer №1

Updating the Angular version to 4.4.6 resolved the problem for me.

It turns out I mistakenly had version 4.2.4 in my package.json file on my local environment.

Appreciate all the help!

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

Error Encountered: Visual Studio cannot locate the file 'COMPUTE_PATHS_ONLY.ts' during the build process

Upon fixing my visual studio 2015, an error was thrown that I haven't encountered before. Error Build: File 'COMPUTE_PATHS_ONLY.ts' not found. I did not add COMPUTE_PATHS_ONLY.ts to my Git repository. The other files in the repo rema ...

visual-studiotypescript

Issue: StaticInjectorError(DynamicTestModule)[CityService -> Http]: Http provider not found

I am working on a service that retrieves all cities from a web service. @Injectable() export class CityService { constructor(private http: Http, private router: Router, private auth: AuthService) { } public getAllCity(): Observable<City[]> { ...

angulartypescripttestingjasmine

How to create an array of objects using an object

I have a specific object structure: { name: 'ABC', age: 12, timing: '2021-12-30T11:12:34.033Z' } My goal is to create an array of objects for each key in the above object, formatted like this: [ { fieldName: 'nam ...

javascriptreactjsangulartypescript

What could be causing the lack of re-rendering in children components using redux-form?

When the parent component sends data, the children components do not re-render automatically. Re-rendering only occurs when a key is pressed on an input element. SMART User values from the state are sent by the smart component. If we add console.log(this. ...

reactjstypescriptredux

Utilize Angular 8 to dynamically populate Input values with data pulled from an API

I need help with setting the input value dynamically using data from my API. Once I click send, I want it to be saved in the database. However, I am struggling to dynamically populate the input field. Can someone guide me on the right approach to achieve t ...

javascriptnode.jsangularangular8

Error encountered in Node.js OpenAI wrapper: BadRequestError (400) - The uploaded image must be in PNG format and cannot exceed 4 MB

Attempting to utilize the OpenAI Dall-e 2 to modify one of my images using the official Nodejs SDK. However, encountering an issue: This is the snippet of code: const image = fs.createReadStream(`./dist/lab/${interaction.user.id}.png`) const mask = fs.c ...

node.jstypescriptopenai-api

Typescript encountering onClick function error during the build process

My current challenge involves creating a submit function for a button in my application. However, when I attempt to build the project, I encounter a typing error that is perplexing me. Despite trying various methods, I am unable to decipher how to resolve ...

javascriptreactjstypescript

Angular's Validator directive offers powerful validation capabilities for reactive forms

Referenced from: This is the approach I have experimented with: custom-validator.directive.ts import { Directive } from '@angular/core'; import { AbstractControl, FormControl, ValidationErrors } from '@angular/forms'; @Directive({ ...

htmlangulartypescript

Developing a TypeScript NodeJS module

I've been working on creating a Node module using TypeScript, and here is my progress so far: MysqlMapper.ts export class MysqlMapper{ private _config: Mysql.IConnectionConfig; private openConnection(): Mysql.IConnection{ ... } ...

javascriptnode.jstypescriptcommonjs

Solution for dealing with error 'Cannot find Property length on type {} in React using TypeScript

Any ideas on how to fix the error "Property 'length' does not exist on type '{}'"? Below is the code snippet causing the issue: //component const SearchResults = ({ results }: { results: {} }) => { let pageCount = results? ...

reactjstypescriptnext.js

What is the process for utilizing a user AD account with SecretClient in a node/TypeScript environment?

Currently, I am faced with authentication challenges while attempting to utilize the Azure Key Vault Secret client library (https://www.npmjs.com/package/@azure/keyvault-secrets). Most of the examples provided involve service principal usage, but my requ ...

node.jstypescriptazure-keyvault

Displaying error messages in Angular Material upon clicking a button

I am struggling with validation using the <mat-form-field> and <mat-error>. The validation works as expected when the user tabs out of the input without filling it. However, I'm facing a challenge in making this error show up when a button ...

angulartypescriptangular-material

TS will not display an error when the payload is of type Partial

Why doesn't TypeScript throw an error when making the payload Partial? It seems to only check the first value but not the second one. type UserState = { user: User | null; loading: boolean; error: Error | null } type UserAction = { type: type ...

reactjstypescriptredux

The element 'app-layout' is unrecognized: a guide to sharing Components across multiple Modules

Everything was running smoothly with my application until I made the decision to implement lazy loading: As a result, my shared component appears like this: import { Component, Renderer2 } from '@angular/core'; export interface FormModel { ...

angularangular6

What is the process for listening to custom events in Angular 4 components that have been loaded using routing?

In the app.component.html file <li routerLinkActive="active current"> <a [routerLink]="['/stats']"> Cluster stats </a> </li> When we route to the DisplayAllStatsComponent, how can we ...

angulartypescripteventemitter

Having trouble reading the length property of undefined in Angular 7

Seeking to obtain a picture link of the object. The objects are stored in an array and the typescript method looks like this: getMealPicture(orderLineMeal: OrderLine): string { for (let meal of this.meals) { if (meal.id === orderLineMeal.mealId) ...

angulartypescript

What sets apart exporting a component from importing its module in another module?

When working with Angular, consider having both module A and module B. If I intend to utilize "A-component" within components of module B, what is the distinction between importing module A in Module B compared to including the "A-component" in the exports ...

angulartypescript

obtaining the value of an input using typescript (put request)

Does anyone know how to extract input values and store them as JSON? I'm having trouble with accessing the input value in this scenario. When I attempt document.querySelector("todo-text").value, it results in an error. const NewTodo: React.FC<NewT ...

reactjstypescripttsx

Styling of Bootstrap HTML element not appearing as expected

Recently, I've been trying out a new approach by embedding Bootstrap components in an iframe. However, despite loading the necessary stylesheet and scripts, the elements seem to be missing their styles. Can anyone shed some light on why this might be ...

javascriptangulartypescript

What are the best ways to work with LatLng objects?

When I run a request to retrieve data from a database, the response displayed in the console using JSON.Stringify() is as follows: sites : [{"siteName":"Site de Marseille", "siteAdress1":"rue du string", "siteAddress2":"string", "siteCodPost":"13010","sit ...

angulartypescriptgoogle-mapsangular-google-maps