The compilation of angular-cli version 25.5 encountered an error during module build

Issue

Upon upgrading angular-cli from 22.1 to 25.5 (installing angular-cli@latest) and angular from version 2.2.3 to 2.3.1, the following problem occurred:

ERROR in ./src/app/app.module.ts
Module build failed: TypeError: Cannot read property 'text' of undefined
    at IdentifierObject.TokenOrIdentifierObject.getText (~/projects/MyProject/node_modules/typescript/lib/typescript.js:53644:56)
    at ~/projects/MyProject/node_modules/@ngtools/webpack/src/loader.js:83:72
    at Array.some (native)
    at ~/projects/MyProject/node_modules/@ngtools/webpack/src/loader.js:83:32
    at Array.filter (native)
    at _removeModuleId (~/projects/MyProject/node_modules/@ngtools/webpack/src/loader.js:82:10)
    at ~/projects/MyProject/node_modules/@ngtools/webpack/src/loader.js:167:48
 @ ./src/main.ts 5:0-45
 @ multi main

I am unable to determine the root cause of this issue as the main.ts seems normal:

import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Two other files are also failing with the same error message - first the environment.ts with nothing unusual and second a sub module which failed with the added snippet:

 @ ./src async
 @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
 @ ./~/@angular/core/src/linker.js
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi main

NodeModules SourceCode

The referenced section typescript.js:53644:56 appears as follows:

[53643] TokenOrIdentifierObject.prototype.getText = function (sourceFile) {
[53644]     return (sourceFile || this.getSourceFile()).text.substring(this.getStart(), this.getEnd());
[53645] };

and loader.js:83:72 & 83:32 points to webpack and this code block:

[078] exports.removeModuleIdOnlyForTesting = removeModuleIdOnlyForTesting;
[...] function _removeModuleId(refactor) {
[...]   var sourceFile = refactor.sourceFile;
[...]   refactor.findAstNodes(sourceFile, ts.SyntaxKind.ObjectLiteralExpression, true)
[...]       .filter(function (node) {
[083]       return node.properties.some(function (prop) { return prop.name.getText() == 'moduleId'; });
[...]   })
[...]       .forEach(function (node) {
[...]       var moduleIdProp = node.properties.filter(function (prop, idx) {
[...]           return prop.name.getText() == 'moduleId';
[...]       })[0];
[...]       // get the trailing comma
[...]       var moduleIdCommaProp = moduleIdProp.parent.getChildAt(1).getChildren()[1];
[...]       refactor.removeNodes(moduleIdProp, moduleIdCommaProp);
[...]   });
[093] }

and loader.js:167:48

[148] // Super simple TS transpiler loader for testing / isolated usage. does not type check!
[...] function ngcLoader(source) {
[...]   this.cacheable();
[...]   var cb = this.async();
[...]   var sourceFileName = this.resourcePath;
[...]   var plugin = this._compilation._ngToolsWebpackPluginInstance;
[...]   // We must verify that AotPlugin is an instance of the right class.
[...]   if (plugin && plugin instanceof plugin_1.AotPlugin) {
[...]       var refactor_2 = new refactor_1.TypeScriptFileRefactor(sourceFileName, plugin.compilerHost, plugin.program);
[...]       Promise.resolve()
[...]           .then(function () {
[...]           if (!plugin.skipCodeGeneration) {
[...]               return Promise.resolve()
[...]                   .then(function () { return _removeDecorators(refactor_2); })
[...]                   .then(function () { return _replaceBootstrap(plugin, refactor_2); });
[...]           }
[...]           else {
[...]               return Promise.resolve()
[...]                   .then(function () { return _replaceResources(refactor_2); })
[167]                   .then(function () { return _removeModuleId(refactor_2); });
[...]           }
[169]       })
[...]  ...

Inquiry

Has anyone encountered this issue before or can provide insights into why webpack(?) may be failing - or can elaborate on what the compiler is attempting to do and why it's encountering errors?

Update

angular-cli.json:

{
  "project": {
    "version": "1.0.0-beta.25.5",
    "name": "myproject"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "assets/css/main.css"
      ],
      "scripts": [
        "assets/lib/stomp.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev":    "environments/environment.ts",
        "live": "environments/environment.live.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es6",
      "dom"
    ],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "files": [
    "typings/index.d.ts"
  ]
}

Answer №1

Recent Update:

@stewdebaker has reported that the latest version of angular-cli, 1.0.0-beta.26, seems to have successfully resolved the previous issue.


In a related question highlighted by @stewdebaker Build error in angular2 frontend using angular-cli, the suggested solution was to roll back to version angular-cli: 1.0.0-beta.21.

For more details on this issue, you can visit https://github.com/angular/angular-cli/issues/4072 in the angular-cli issue tracker.


Attempts to fix the project and return to the previous angular-cli version, specifically 1.0.0-beta.22-1, were unsuccessful. Even after being informed about the alternative solution on Stack Overflow (reverting to 1.0.0-beta.21), it did not work out as expected.

Prior to updating to 1.0.0-beta.25.5, the ng serve command functioned correctly. However, reverting to 1.0.0-beta.22-1 resulted in the same errors persisting post-update.

The Resolution Approach

To address this issue, a new Angular2 project was initiated using the angular-cli. The entire project underwent rebuilding through CLI, where code from the former repository was integrated, and bugs were rectified during the process.

The encountered bugs mainly comprised minor issues (likely stemming from alterations in tslint.json as a consequence of the updated angular-cli), with no significant modifications made to the project, thereby ensuring restored functionality.

The specific source files mentioned in the error messages:

  • app.module.ts
  • tsconfig.json
  • angular-cli.json

remained unaltered, yet the angular-cli is now operational, allowing ng serve to execute smoothly without any further errors.

While not deemed the most optimal solution (neither is downgrading to 1.0.0-beta.21), it proved to be the best workaround discovered.

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

The functionality of ZoneAwarePromise has been modified within the Meteor framework

After updating to the latest Angular 2.0.1 release on Meteor 1.4.1.1, I'm facing an error that says: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten I've attempted running meteor update and meteor reset, b ...

Applying ngModel within ngFor can overwrite the current value

Welcome to my HTML file! <form [formGroup]='itemUpdateForm'> <div class="row"> <mat-form-field class="col-sm-8"> <mat-label>Restaurant Name:</mat-label> <i ...

Should ts-node be avoided in a production environment due to potential risks?

My current setup involves using ts-node with express in production and so far, it's been functioning smoothly. Am I missing out on any benefits by not compiling and running .js files instead? ...

Setting up a collaborative Angular + Web API environment for multiple developers can be achieved by following these steps

I am curious about how to set up our development environments for Angular + .Net Core Web API with multiple developers. Each developer working on the project may use a different port locally for the API. This means we need individual local settings for ea ...

Effective ways to request verification prior to eliminating an item with ng-select (multi-select)

https://i.stack.imgur.com/HDtXq.jpg Is it possible to add a confirmation prompt when deleting an item from a select component? I couldn't find any specific prop for the component. Is there any way to customize or override the delete function? ...

Guide on accomplishing masking in Angular 5

I'm curious if it's achievable to design a mask in Angular 5 that appears as follows: XXX-XX-1234 Moreover, when the user interacts with the text box by clicking on it, the format should transform into: 1234121234 Appreciate your help! ...

Connecting the SelectedItem of a listbox in ngPrime to an Observable Collection in Angular2

I am facing an issue while trying to use the ngPrime listbox in Angular2. I have a scenario where I am fetching an array of objects from Firebase as an observable and attempting to display it correctly in the listbox. <div *ngIf="addContactDialogVisibl ...

The loginError variable in the ts file may experience a delay in updating its value

After entering an incorrect email and password, clicking on submit should set this.LoginError to return true in the component ts file console. However, it initially returns false, and only after clicking submit two or three times does the value finally upd ...

Having two buttons in Protractor with identical text displayed

Hello, I'm encountering an issue with my Protractor e2e test: The problem is that I have a menu with a sub-menu. Both the main menu and the sub-menu contain buttons with the same name text (let's call it "menuItem"). I know how to locate and cli ...

What are the best ways to implement advanced data filtering in JavaScript?

Is there a way to improve the filtering of data in the ngx-datatable? Currently, I have a filter that only works for the "Name" column. How can I adjust it to filter data from other columns like "id" or "phone" as well? filt ...

When running `aws-cdk yarn synth -o /tmp/artifacts`, an error is thrown stating "ENOENT: no such file or directory, open '/tmp/artifacts/manifest.json'"

Starting a new aws-cdk project with the structure outlined below src └── cdk ├── config ├── index.ts ├── pipeline.ts └── stacks node_modules cdk.json package.json The package.json file looks like this: " ...

Ways to ensure that DOM elements have completed rendering in Angular 2 Unit Tests

I am currently working on a test that focuses on an HTML element, sets its value, and triggers the blur event handler. The blur event is supposed to initiate a validation check which, if invalid, should disable a save button. During a test run, this proce ...

What is the best way to perform a query in Angular using Firebase Firestore?

I am attempting to execute queries in Angular 6 using Firebase Firestore. I have this code, and I have already installed the package "npm firebase @angularfire" but it is not working: import { Component } from '@angular/core'; import { A ...

Challenges with React Event Listener Types

https://i.sstatic.net/cVlpr.png useEffect(() => { const handleEscClose = (e: KeyboardEvent) => { if (e.key === 'Escape') changeVisibility(); }; if (isVisible) document.addEventListener('keydown', handleEscClos ...

After defining the NEXTAUTH_URL and NEXTAUTH_SECRET variables, the getServerSession(authOptions) function in NextJS is returning null

I've been attempting to set up OAuth with the Google provider for my Next.js 13 web application. Unfortunately, I'm encountering an issue where getServerSession(authOptions) is returning null. Despite trying various solutions such as setting NEXT ...

Creating a loading screen in Angular2: Step-by-step guide

How can you best integrate a preloader in Angular 2? ...

Angular 4 applications do not come with TinyMCE embedded

I've been attempting to integrate the tinyMCE editor into an angular4 application, but unfortunately I encountered an error that reads: tinyMCE is not defined. https://i.stack.imgur.com/qMb5K.png I have been following the guidance provided by tin ...

Include TypeScript in a single component within an already established Vue project

I've been working on a large Vue project and I want to integrate TypeScript into it. However, every time I try to do so, I run into a lot of errors that take weeks to fix. Instead of going through that, I'd like to find a way to add TypeScript to ...

When it comes to rendering components in React using multiple ternary `if-else` statements, the question arises: How can I properly "end" or "close" the ternary statement?

I have developed a straightforward component that displays a colored tag on my HTML: import React, {Component} from 'react'; import "./styles.scss"; interface ColorTagProps { tagType?: string; tagText?: string; } /** * Rende ...

When an email link is clicked in Angular, Internet Explorer is automatically logged out and needs to be refreshed

I'm currently working on a project using an Angular 4 Application. One of the elements in my HTML code is an href link that has a mailto: email address. The issue I'm facing is that when I click on this link while using IE11, either I get autom ...