When using Typescript 2.1 in conjunction with the Angular 2 compiler, there may be instances where project files fail to compile without any output

After configuring TypeScript and Angular compiler with the following settings:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitHelpers": true,
    "skipDefaultLibCheck": true,
    "strictNullChecks": false,
    "outDir": "tmp"
  },
  "exclude": [
    "node_modules",
    "compiled",
    "app/main.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "compiled",
    "skipMetadataEmit" : true
  }
}

The /compiled directory only consists of /node_modules/@angular, while the necessary ngfactory files in the /app directory are missing. The compilation process completes quietly without any errors or output.

It seems to work smoothly with TypeScript 2.0, but I aim to utilize version 2.1 for async/await functionality when targeting es5 to avoid additional compiling steps using Babel.

[Edit]

This issue arises from Typescript 2.1.0-dev.20160907 onwards, precisely after the introduction of async/await support. There's a possibility that one of the modifications in this version has caused ngc to malfunction; whereas version 2.1.0-dev.20160906 was functioning correctly.

[Edit2]

If you've attempted using ngc with TypeScript 2.1, please share your experience in a brief comment to help me determine if the issue lies within my configuration.

Answer №1

The problem originates from modifications to typescript in version 2.1 that have not been accounted for in the angular tsc-wrapper.

A solution is currently being implemented through this pull request. Once this is merged, file compilation should return to normal.

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

Obtaining parameter types for functions from deeply nested types

I'm currently facing a challenge involving deeply nested parameters. When dealing with non-nested parameters, everything functions smoothly without any issues export type test = { 'fnc1': () => void, 'fnc2': () => void, ...

An efficient way to utilize angular components from various directories within the project

I am currently working on an Angular project that was previously developed by others who opted to copy and paste components. In this project, the mobile view differs significantly from the desktop view, except for a few components that are reused. These c ...

Ways to pass a parameter through a URL in Angular without using the body section

I am trying to use a post method where I need to send parameters along with the address without sending them in the body. Instead, I want to include them in the URL. qid="msq"; this.http.post("http://localhost:44301/consentinitiation/qid ...

TypeScript integrated Cypress code coverage plugin

I've been attempting to integrate the @cypress/code-coverage plugin with TypeScript in my project, but so far I haven't had any success. Here is a breakdown of the steps I've taken thus far: Followed all the instructions outlined in https:/ ...

The custom component in ngx-formly remains unchanged after updating the model

I am utilizing custom component fields in my project. Initially, everything works smoothly until I attempt to replace the model with a different one. Unfortunately, the component for each field does not get updated with the new value. No events seem to ...

Moving the starting directory of a NodeJS application on Azure

My NodeJS app on Azure was initially written in Javascript with the app.js file located in the root directory. This file was automatically detected during deployment via Git. Recently, I converted the app to Typescript and now have a build directory, with ...

Increase the ngClass attribute's value

Is there a way to automatically increment a numeric value in a class using the ngClass directive? For example, can we achieve something like this: <some-element [ngClass]="'class-*'">...</some-element>, where the asterisk (*) will in ...

Purpose of receiving a call without displaying in an angular testing scenario

I need help with some code I am working on. export class MyComponent implements OnInit { ngOnInit() { // Some code here this.method1(); // This part is getting executed. } method1() { console.log('method1'); // Bu ...

Exploring the world of shaders through the lens of Typescript and React three fiber

Looking to implement shaders in React-three-fiber using Typescript. Shader file: import { ShaderMaterial } from "three" import { extend } from "react-three-fiber" class CustomMaterial extends ShaderMaterial { constructor() { supe ...

Declaration files for Typescript ESLint configurations

I've been researching this issue online, but I haven't been able to find any solutions. It could be because I'm not entirely sure what's causing the problem. What I'm trying to do is set a global value on the Node.js global object ...

Is it possible to implement mat-color in Angular's theme?

Incorporating an Angular 9 theme into my app, I encountered the need to utilize mat-color lighter and darker functions (for color and background respectively). While I have successfully implemented this in the past with a custom theme, doing so with an Ang ...

Error: The <Class> cannot be accessed until it has been initialized

I have a basic autoloader method that initializes and returns an instance of a class using require() The require statement includes some logic that requests information from a database and checks if the class exists in the filesystem. let elementClass = r ...

The issue with Ionic 2 and Angular 2 is that the http Headers are not getting included in the request

I'm currently working with the latest beta release of Ionic and I've encountered an issue with sending headers along with an HTTP POST request to my API server. The code snippet I used is as follows: ** Ionic version - Beta-8 & Angular version -r ...

Struggling to dynamically create form controls within Angular forms and receiving the following error in the console: "TypeError: feature_r5.get is not a function"

When I click a button in my Angular v14 HTML template, I am trying to dynamically generate form controls and although I am able to generate them, an error is popping up in the console. ERROR TypeError: feature_r5.get is not a function at PostAdvComponent_ ...

The nested component in Angular 8+ using ngswitch fails to refresh the view

I am currently facing an unusual issue with rendering component views. A part of the component I am working on has the following structure: <div [ngSwitch]="step"> <comp1 *ngSwitchCase="'step1'"></comp1> <comp2 *ngSwitc ...

The issue of Angular 4 routerLinkActive failing to apply the active class has users

I am struggling to style the css and add a class when a link is active using routerLinkActive. Despite success with Bootstrap, when I received custom CSS from the front end developer, the active class fails to be added, even when the route URL matches the ...

The module version discrepancies are apparent between the contents of yarn.lock and package.json

I discovered the contents of my yarn.lock file are as follows: "@aws-sdk/client-dynamodb@^3.42.0": version "3.145.0" resolved "https://registry.yarnpkg.com/@aws-sdk/client-dynamodb/-/client-dynamodb-3.145.0.tgz#2a358e9cbb117637 ...

Tips for dividing by a large number

I am currently attempting the following: const numerator = 268435456; const denominator = 2 ** 64; const decimalFraction = numerator / denominator; In order to achieve this, I have experimented with utilizing the code provided in this link: : const rawVal ...

Utilizing the power of TypeScript in React to ensure components only return a specific type of component

Imagine you have a component named <Banner />: function Banner({ message }: { message: string; }) { return <div>{message}</div>; } Now, suppose you want to create components called <SuccessBanner /> and <ErrorBanner />: fun ...

What are the steps to resolve TypeScript errors in OpenLayers version 6.6.1?

Since updating to OpenLayers 6.6.1, I have been bombarded with numerous typescript errors related to generics. For example... import olLayerVector from 'ol/layer/Vector'; import olFeature from 'ol/Feature'; public static highlightOver ...