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

Angular application displays Msal v2 interaction_in_progress during login process

Encountering a unique issue with MSAL authentication in our app - we're seeing the msal interaction_in_progress error only during the initial login, which disappears upon refresh but reappears whenever a user logs out and back in. Check out these sni ...

Information sent from TypeScript frontend to Java backend is converted into a LinkedHashMap

I have a situation where my typescript frontend is communicating with my java backend using REST. Recently, I added a new simple rest endpoint but encountered an issue when trying to cast the sent object properly because the body being sent is a LinkedHash ...

What Causes a Mongoose Query to Result in an Empty Array?

Hello, I have reviewed similar questions regarding the issue I am facing with developing an API. Despite trying different solutions, none seem to resolve my problem. When handling request and response payloads in my API, everything seems to be working fin ...

Enhance your Angular2+ writing skills by delving into the intricacies of subscriptions with `

Seeking assistance to enhance the code structure. I am struggling with understanding switchMap, mergeMap and how to avoid nested subscriptions. this.service .service1('something') .pipe(takeUntil(this.unsubscribe)) .subscribe( (s1result ...

Angular project hosting causing malfunctions in route parameters

Encountering a problem with route parameters after deploying my website on namecheap hosting. Routes Setup: const routes: Routes = [ { path: 'women', component: ProductlistingComponent }, { path: 'women/:search_1', component: ...

The utilization of React.Component inheritance in TypeScript

In my attempt to develop a base class using React.Component and derive two classes from the base class, I have encountered an issue. Here is how I structured the classes: interface BaseItemProps { base_prop: string; } class BaseItem<P, T> exten ...

Using Angular 6's httpClient to securely post data with credentials

I am currently working with a piece of code that is responsible for posting data in order to create a new data record. This code resides within a service: Take a look at the snippet below: import { Injectable } from '@angular/core'; import { H ...

How can a parent component update a child component's prop value in VUE?

I'm facing an issue with managing dynamic props in Vue with TypeScript. Below is my parent component: <script setup lang="ts"> const friends = [ { id: "emanuel", name: "Emanuella e", phone: "08788 ...

Unable to display image in Angular 4 even after selecting the checkbox

Currently delving into Angular 4 and facing a challenge. I am attempting to display an image when the checkbox is checked, however the functionality isn't working as expected. Below is how my app.component.html file is structured: <input type="che ...

What are the best practices for establishing a secure SignalR client connection?

While tackling this issue may not be solely related to SignalR, it's more about approaching it in the most efficient way. In C#, creating a singleton of a shared object is achievable by making it static and utilizing a lock to prevent multiple threads ...

Oops! There was an error: Unable to find a solution for all the parameters needed by CountdownComponent: (?)

I'm currently working on creating a simple countdown component for my app but I keep encountering an error when I try to run it using ng serve. I would really appreciate some assistance as I am stuck. app.module.ts import { BrowserModule } from &apo ...

What is the best way to incorporate the TUI image editor for Javascript into my Angular application?

Issue - I'm facing a challenge with my Angular application as I want to integrate Toast UI image editor. However, I am unsure about how to properly add the imports to app.module.ts in order to utilize it. Despite following the npm installation instru ...

Leveraging generics within TypeScript

I have developed a class in TypeScript that uses generics. export class ModelTransformer { static hostelTransformer: HostelTransformer; static fromAtoB(instance: T): U { if (instance instanceof HostelType) { return ModelTrans ...

The parameters provided in TypeScript do not align with any signature of the call target

In JavaScript, a function can be called with any number of parameters. If a parameter is not passed, it will default to undefined without causing an error. Below is a code snippet for reference: function test(a,b){ if(b){console.log(b)} else{console ...

Utilizing JSDoc for establishing an index signature on a class in ES6

When working with JSDoc, achieving the equivalent of Typescript's computed property names can be a challenge. In Typescript, you'd simply define it like this: class Test { [key: string]: whatever } This syntax allows you to access these comput ...

When clicking on absolute URLs, Angular Router Navigation Events are not triggered

Hey there! I need to reset certain values when we navigate away from the current page by clicking on an anchor link with an absolute URL. I've tried using the router events code below, but it only works for relative URLs and not absolute URLs. Is the ...

Steps to set angular for all items in the dropdown menu:

I am currently working on implementing a dropdown feature within my Angular application. The dropdown will display a list of shops, and when a shop is selected, it will show the content related to that particular shop. I need to add a new item called "ALL ...

The arrow function in Jest is missing a name property

Currently, my setup includes: node.js: 9.8.0 Jest: 23.4.2 ts-jest: 23.1.3 typescript: 2.9.2 While attempting the following in my *.test.ts files: const foo = () => 'bar'; console.log(foo.name); // '' foo contains the name pro ...

Ways to change the CSS styling of the placeholder attribute within a textarea or input field tag

I am currently working on adjusting the font size of the text within the placeholder attribute of a textarea element. While I have been successful in achieving this using vanilla CSS, I have encountered difficulties when trying to implement the same concep ...

Using React MUI Select in combination with react-hook-form does not seem to be compatible with Cypress testing

Within my React application, I have implemented a form that includes a dropdown select. Depending on the option selected from the dropdown, different input fields are rendered. const [templateType, setTemplateType] = useState(""); const { regi ...