ng build message "ERROR in Cannot read property 'toLowerCase' of undefined"

Question

I am using an Azure DevOps YAML pipeline to build/deploy my Angular 9 application. The YAML contains a Powershell script to build it as follows

- powershell: |
    $angularBuildConfiguration = "MyBuildConfig";

    write-host "ng-build start";
    ng build --prod --aot --configuration $angularBuildConfiguration;
    write-host "ng-build end";

  workingDirectory: '$(Build.SourcesDirectory)\...'
  displayName: 'Build app - Angular app'

The above goes through the Angular build and at the end returns the message "ERROR in Cannot read property 'toLowerCase' of undefined".

I have verified that the workingDirectory and angularBuildConfiguration parameters have the values intended - I have also replaced them with hardcoded values and get the same result. If I run the Powershell script above on the build server (where the YAML script actually runs on), in the folder intended the build fails with the same error message, however if I build with the same script on my local machine it builds successfully

I don't know whether it is a ng build issue, or whether there is something within my Angular 9 project that causes the error - there is no 'associated' file that is flagged that accompanies the error message

Does anyone have any ideas ?

I have the same issue. It's not even showing the line number — Alfred Francis, Feb 27 '20 at 20:14
I am also having the same issue. I got past it by removing --prod, but that's not a solution. — Catherine, May 26 '20 at 20:12

score 1 · Accepted Answer · answered Jun 02 '20 at 03:21

This was really random - the toLowerCase message wasn't referring to any javascript/typescript code - it must be an internal message. The only way I could pinpoint where the issue was by process of elimination - i.e. taking out webpages a batch at a time until I got a clean prod compile - then worked back including one by one to get to the culprit.

There was a style that was causing the issue - we replaced the following

.gridlines-left {
  border: 1px solid #c0c0c0;
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

...with

.gridlines-left {
  border: 1px solid #c0c0c0;
  border-right-style: none;
  border-top-style: none;
  border-bottom-style: none;
}

...and the compile ran successfully. I still have no idea how/why as we had plenty of other styles very similar and used the same strategy of setting border-right/left/bottom/top-width: 0 - it may have had something to do with how we combined css classes - certain styles may conflict with others come compile time - who knows, but all works well now and haven't had the problem since

score 0 · Answer 2 · answered Jan 21 '20 at 07:50

0

There is an error in code base in converting string variable to lower case. Simply, it's trying to convert undefined or false value to lower case.

To use tolowercase JavaScript built-in function, the variable should be true value.

So search it in codebase, and update it like below.

If (variable) {
    variable = variable.toString().tolowercase();
}

answered Jan 21 '20 at 07:50

Rise

1,493
9
17

Thanks JuCheng - The question is not really about why a particular part of the code is causing the issue - it is about why it is being flagged by "ng build" - the error message "Cannot read property 'toLowerCase' of undefined" is a run-time message - I'm running a compile - does the "ng build" actually know which parts of my code cause these types of errors or is there something internal to ng build that raises the error ? (And if it's part of my code why doesn't it flag the file that causes the problem?) – TerrorBight Jan 21 '20 at 07:58
Yes. `ng build` compiles and it will run through code base one by one. While run `ng build`, if there is an issue raised, it simply throws error and end build process. If that is not present specific issue file name, but I certainly think that there is an issue in codebase. I recommend to check) – Rise Jan 21 '20 at 08:07
Hi JuCheng - I'm not convinced "ng build" is producing this message as a result of the codebase being compiled not containing a check for undefined - I've done a global search and replace of all instances of ".toLowerCase()" in the codebase and replaced with "" - then recompiled using the above ng build script and still get the same error message – TerrorBight Jan 21 '20 at 10:02

ng build message "ERROR in Cannot read property 'toLowerCase' of undefined"

2 Answers2