Ionic build --prod giving many errors

Ionic Framework
1

Hi all,

This just started happening today. I’ve done this a hundred times and I don’t think anything chaged on my system.

I build a brand new ionic application using ionic start. As soon as I start it and try to do a ionic build --prod I get a whole shlooo of errors. Here are the errors. There is more to the error but this form will not let me post that many characters

> ng.cmd run app:build:production
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing anonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

    ng analytics project off

✔ Browser application bundle generation complete.

Warning: D:/IONIC/disablefirebase/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.



./node_modules/css-loader/dist/runtime/api.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

./node_modules/css-loader/dist/runtime/noSourceMaps.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

./src/main.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

./src/global.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at tryRunOrWebpackError (D:\IONIC\disablefirebase\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (D:\IONIC\disablefirebase\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (D:\IONIC\disablefirebase\node_modules\webpack\lib\Compilation.js:4936:18)
    at Module.<anonymous> (D:\IONIC\disablefirebase\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[1]!D:\IONIC\disablefirebase\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[2]!D:\IONIC\disablefirebase\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[3].rules[1].use[0]!D:\IONIC\disablefirebase\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[3].rules[1].use[1]!D:\IONIC\disablefirebase\src\global.scss:5:111)
    at D:\IONIC\disablefirebase\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (D:\IONIC\disablefirebase\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at D:\IONIC\disablefirebase\node_modules\webpack\lib\Compilation.js:4981:39
    at tryRunOrWebpackError (D:\IONIC\disablefirebase\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (D:\IONIC\disablefirebase\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (D:\IONIC\disablefirebase\node_modules\webpack\lib\Compilation.js:4936:18)
-- inner error --
Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at Object.<anonymous> (D:\IONIC\disablefirebase\node_modules\@angular-devkit\build-angular\src\babel\webpack-loader.js??ruleSet[1].rules[1].use[0]!D:\IONIC\disablefirebase\node_modules\@angular-devkit\build-angular\node_modules\@ngtools\webpack\src\ivy\index.js!D:\IONIC\disablefirebase\node_modules\css-loader\dist\runtime\noSourceMaps.js:1:7)
    at D:\IONIC\disablefirebase\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (D:\IONIC\disablefirebase\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at D:\IONIC\disablefirebase\node_modules\webpack\lib\Compilation.js:4981:39
    at tryRunOrWebpackError (D:\IONIC\disablefirebase\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (D:\IONIC\disablefirebase\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (D:\IONIC\disablefirebase\node_modules\webpack\lib\Compilation.js:4936:18)
    at Module.<anonymous> (D:\IONIC\disablefirebase\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[1]!D:\IONIC\disablefirebase\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[2]!D:\IONIC\disablefirebase\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[3].rules[1].use[0]!D:\IONIC\disablefirebase\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[3].rules[1].use[1]!D:\IONIC\disablefirebase\src\global.scss:5:111)
    at D:\IONIC\disablefirebase\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (D:\IONIC\disablefirebase\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)

Generated code for D:\IONIC\disablefirebase\node_modules\@angular-devkit\build-angular\src\babel\webpack-loader.js??ruleSet[1].rules[1].use[0]!D:\IONIC\disablefirebase\node_modules\@angular-devkit\build-angular\node_modules\@ngtools\webpack\src\ivy\index.js!D:\IONIC\disablefirebase\node_modules\css-loader\dist\runtime\noSourceMaps.js
1 | throw new Error("Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):\nTransform failed with 1 error:\nerror: Invalid version: \"15.2-15.3\"");

Generated code for D:\IONIC\disablefirebase\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[1]!D:\IONIC\disablefirebase\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[3].rules[0].oneOf[1].use[2]!D:\IONIC\disablefirebase\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[3].rules[1].use[0]!D:\IONIC\disablefirebase\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[3].rules[1].use[1]!D:\IONIC\disablefirebase\src\global.scss
 1 | __webpack_require__.r(__webpack_exports__);
 2 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 3 | /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 4 | /* harmony export */ });
 5 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("D:\\IONIC\\disablefirebase\\node_modules\\@angular-devkit\\build-angular\\src\\babel\\webpack-loader.js??ruleSet[1].rules[1].use[0]!D:\\IONIC\\disablefirebase\\node_modules\\@angular-devkit\\build-angular\\node_modules\\@ngtools\\webpack\\src\\ivy\\index.js!D:\\IONIC\\disablefirebase\\node_modules\\css-loader\\dist\\runtime\\noSourceMaps.js");
 6 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
 7 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("D:\\IONIC\\disablefirebase\\node_modules\\@angular-devkit\\build-angular\\src\\babel\\webpack-loader.js??ruleSet[1].rules[1].use[0]!D:\\IONIC\\disablefirebase\\node_modules\\@angular-devkit\\build-angular\\node_modules\\@ngtools\\webpack\\src\\ivy\\index.js!D:\\IONIC\\disablefirebase\\node_modules\\css-loader\\dist\\runtime\\api.js");
 8 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 9 | // Imports
10 | 
11 | 
12 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
13 | // Module

Does anyone know what is happening?

Thanks
Darrell

2

Maybe node version mismatch? When was the last time u created a new project? Before or after ionic6?

3

its before 6, I am currently using ionic 5.4.16

4

Key is node version.

5

ok Just to lt everyone know. it appears that NPM audit fix --force is the only thing that worked for me in fixing this problem. Now it appears every time I make a new project thats what I gotta do. but at least it works

1 Like
6

Hi

Great you have been able to resolve the issue. The issue I have had with npm audit fix is that it may resolve the warnings, it also updated some dependencies which should not have been upgraded, breaking the app in a different way. So it is always good to be able to backtrack to the original package.json. And for upgrading I tend to prefer official update guides, instead of following NPM’s warnings.

I am still inclined to believe that due to the new starter template introduced by Ionic 6, there is likely a mismatch between you node version and the one the dependencies in the template require.

Here, the magic of NVM could be of use in order to alternate between node versions.

But again, congrats for the catch

Tom

7

It looks like this is actually tied to an issue in Angular that’s being (been?) resolved:

8

A better solution without using --force.

ng update @angular/core @angular/cli
ng update

Hope it helps.