Ng serve failing to compile in ionic 4

Hi,
My application suddenly can’t run a ng serve or ionic cordova build android anymore.
First some config was emptied, possibly by visual studio code, so I ran the command
as per this discussion:
ionic integrations enable cordova --add

Now when I run ng serve --verbose I get this:

ERROR in ./node_modules/@ionic/core/dist/esm/legacy/index.mjs 3:0-202
Can’t reexport the named export ‘t’ from non EcmaScript module (only default export is available)
at HarmonyExportImportedSpecifierDependency._getErrors (C:\websites\weight-recording-app-4\node_modules\webpack\lib\dependencies\HarmonyExportImportedSpecifierDependency.js:360:6)
at HarmonyExportImportedSpecifierDependency.getErrors (C:\websites\weight-recording-app-4\node_modules\webpack\lib\dependencies\HarmonyExportImportedSpecifierDependency.js:338:16)
at Compilation.reportDependencyErrorsAndWarnings (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compilation.js:1365:22)
at Compilation.finish (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compilation.js:1167:9)
at hooks.make.callAsync.err (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compiler.js:622:17)
at _done (eval at create (C:\websites\weight-recording-app-4\node_modules\tapable\lib\HookCodeFactory.js:33:10), :9:1)
at _err4 (eval at create (C:\websites\weight-recording-app-4\node_modules\tapable\lib\HookCodeFactory.js:33:10), :72:22)
at _addModuleChain (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compilation.js:1095:12)
at processModuleDependencies.err (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compilation.js:1007:9) at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
@ ./node_modules/@ionic/core/dist/index.mjs
@ ./node_modules/@ionic/angular/dist/fesm5.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node ./src/main.ts
ERROR in ./node_modules/@ionic/core/loader/index.mjs 21:0-47
Can’t reexport the namespace object from non EcmaScript module (only default export is available)
at HarmonyExportImportedSpecifierDependency._getErrors (C:\websites\weight-recording-app-4\node_modules\webpack\lib\dependencies\HarmonyExportImportedSpecifierDependency.js:360:6)
at HarmonyExportImportedSpecifierDependency.getErrors (C:\websites\weight-recording-app-4\node_modules\webpack\lib\dependencies\HarmonyExportImportedSpecifierDependency.js:338:16)
at Compilation.reportDependencyErrorsAndWarnings (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compilation.js:1365:22)
at Compilation.finish (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compilation.js:1167:9)
at hooks.make.callAsync.err (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compiler.js:622:17)
at _done (eval at create (C:\websites\weight-recording-app-4\node_modules\tapable\lib\HookCodeFactory.js:33:10), :9:1)
at _err4 (eval at create (C:\websites\weight-recording-app-4\node_modules\tapable\lib\HookCodeFactory.js:33:10), :72:22)
at _addModuleChain (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compilation.js:1095:12)
at processModuleDependencies.err (C:\websites\weight-recording-app-4\node_modules\webpack\lib\Compilation.js:1007:9) at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
@ ./node_modules/@ionic/angular/dist/fesm5.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node ./src/main.ts
ERROR in ./node_modules/@ionic/core/dist/esm/polyfills/index.js 15:18
Module parse failed: Unexpected token (15:18)
You may need an appropriate loader to handle this file type.
|
| if (!win.customElements || (win.Element && (!win.Element.prototype.closest || !win.Element.prototype.matches || !win.Element.prototype.remove))) {

promises.push(import('./dom.js'));

| }
|
@ ./node_modules/@ionic/core/loader/index.mjs 21:0-47 21:0-47
@ ./node_modules/@ionic/angular/dist/fesm5.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node ./src/main.ts
ERROR in ./node_modules/@ionic/core/dist/esm/legacy/chunk-d83bfeae.js 172:37
Module parse failed: Unexpected token (172:37)
You may need an appropriate loader to handle this file type.
| baseEl.classList.remove(‘overlay-hidden’);
| aniRoot = baseEl.shadowRoot || overlay.el;

            return [4 /*yield*/, import('./index-d9adb105.js').then(function (mod) { return mod.create(animationBuilder, aniRoot, opts); })];

| case 1:
| animation = _a.sent();
@ ./node_modules/@ionic/core/dist/esm/legacy/index.mjs 3:0-202 3:0-202 3:0-202 3:0-202 3:0-202 3:0-202 3:0-202 3:0-202
@ ./node_modules/@ionic/core/dist/index.mjs
@ ./node_modules/@ionic/angular/dist/fesm5.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node ./src/main.ts
ERROR in ./node_modules/@ionic/core/dist/esm/legacy/chunk-09ec7fc0.js 61:11
Module parse failed: Unexpected token (61:11)
You may need an appropriate loader to handle this file type.
| return module[exportName];
| }

return import(

| /* webpackInclude: /.entry.js$/ /
| /
webpackExclude: /.system.entry.js$/ */
@ ./node_modules/@ionic/core/dist/esm/legacy/loader.mjs 1:0-86 4:11-19 5:8-15 6:8-21
@ ./node_modules/@ionic/core/loader/index.mjs
@ ./node_modules/@ionic/angular/dist/fesm5.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node ./src/main.ts
i 「wdm」: Failed to compile.

There are more logs that this, but that should give you an idea of what I am seeing.

Removing node_modules and running npm i didn’t help.
Running ionic repair didn’t help.

Ionic Info:
Ionic:

Ionic CLI : 5.2.3
Ionic Framework : @ionic/angular 4.6.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : not available
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 8 other plugins)

Utility:

cordova-res : 0.3.0
native-run : 0.2.6

System:

NodeJS : v8.11.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

Can anyone help?

In my case it was the www directory that was corrupted/broken, possibly by visual studio code.
Removing and restoring it fixed the build.
Some steps to take (courtesy of Ionic support)

  • Delete the app’s node_modules/ ​ dir

  • Delete the app’s platforms/ dir

  • Delete the app’s plugins/ dir

  • Delete the app’s www/ dir

  • Run npm install ​ (which will regenerate what you deleted above)

  • Run npm run build

  • Run ionic cordova platform add android

  • Run ionic cordova platform add ios

What worked for me was

  1. Deleting package-lock.json (really, this was my problem)
  2. Cleaning the project with ionic repair (it does all the listed steps above: delete node_modules/platforms, etc)

have tried but my project is not working. After trying all that it is still warning failed to compile

PS C:\Users\pc\rba-app> ionic serve

ng.cmd run app:serve --host=localhost --port=8100
[ng] i 「wds」: Project is running at http://localhost:8100/webpack-dev-server/
[ng] i 「wds」: webpack output is served from /
[ng] i 「wds」: 404s will fallback to //index.html
[ng] chunk {main} main.js, main.js.map (main) 1.97 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 149 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 101 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
[ng] Date: 2020-01-27T11:12:21.094Z - Hash: 075d96c61b41336c3e8e - Time: 116139ms
[ng]
[ng] ERROR in src/app/app.module.ts:14:35 - error TS2307: Cannot find module ‘…/pages/complaints-details/complaints-details.page’.
[ng] 14 import { ComplaintsDetails } from ‘…/pages/complaints-details/complaints-details.page’;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] src/app/services/complaints.service.ts:21:30 - error TS2339: Property ‘Complaints’ does not exist on type ‘Object’.
[ng] 21 map(results => results.Complaints));
[ng] ~~~~~~~~~~
[ng] src/app/services/database.service.ts:25:3 - error TS2300: Duplicate identifier ‘complaintsdetails’.
[ng] 25 complaintsdetails = new BehaviorSubject();
[ng] ~~~~~~~~~~~~~~~~~
[ng] src/app/services/database.service.ts:43:13 - error TS2339: Property ‘get’ does not exist on type ‘HttpClientModule’.
[ng] 43 this.http.get(‘assets/seed.sql’, { resposeType: ‘text’})
[ng] ~~~
[ng] src/app/services/database.service.ts:47:1 - error TS2349: Cannot invoke an expression whose type lacks a call signature. Type ‘BehaviorSubject<any>’ has no compatible call signatures.
[ng] 47 this.complaintsdetails ();
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] src/app/services/database.service.ts:48:1 - error TS2349: Cannot invoke an expression whose type lacks a call signature. Type ‘BehaviorSubject<any>’ has no compatible call signatures.
[ng] 48 this.complaints();
[ng] ~~~~~~~~~~~~~~~~~
[ng] src/app/services/database.service.ts:63:1 - error TS2300: Duplicate identifier ‘complaintsdetails’.
[ng] 63 complaintsdetails() {
[ng] ~~~~~~~~~~~~~~~~~
[ng]

[INFO] Development server running!

   Local: http://localhost:8100

   Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[ng] i 「wdm」: Failed to compile.

That is the message I am getting

It contains lots of detailed error messages telling you exactly what problems exist on what lines of your code.