ng build succeeds, but " cannot find module '@angular/core' " once opened in browser

Question

Doing searches on StackOverflow and Google just yields myriads of results which either seem either voefully outdated with the modern pace of JS or fail during the build part, or issue with VSCode or IntelliJ lint throwing a fit; which is not my issue:

Thus I made this thread.

Background

The application is app I took over as an in-house dev for maintenance an unspecified amount of time ago, with the original devs no longer being available.

I have now been tasked to update it further; but to do so, I needed to fix a dependency issue that was occurring, that causes any of the new builds of the same commits that used to work to not work.

Thus me going over to first upgrading node, npm and all the packages involved; so that I can create a good baseline to try to keep things consistent for future for rapid updates and to build upon it.

However, I am getting to the point that I feel like starting from scratch would be a better option but this is being held down by my feeling that this is very close to be resolved, and so a redo would be a very inefficient use of my time as I have a stack of stuff to do on other stuff as well.

According to the commit history of the app, this was originally was an Angular2 app, and was upgraded to Angular 5 prior to me taking over. This version used to work fine and currently runs in production in a docker container; unless rebuilt which causes some very essential features (specifically interaction) to fail on the target devices. Meaning, I cannot update until I either dig-up exactly what the dependency tree is in there, or just go ahead and fix the issue by going forward.

Now recently I have been in the process of upgrading from Angular 5.0 to Angular 6.1 using the guidelines as specified in https://update.angular.io/ and which have been, atleast on dev machine and an target device emulator, worked fine.

As a preamble, It has some ionic elements, but feels to be just for styling and icons, and aren't used to their fullest, as all the commands used in both the DockerFile and in the Readme are using angular-cli instead.

So some app details

package.json

{
  "name": "",
  "author": "",
  "private": true,
  "description": "",
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "node_modules/.bin/ng build --prod --aot=true",
    "start:dev": "ng serve --port 8100 --host=0.0.0.0 --disable-host-check", "server:prod": "node_modules/.bin/http-server dist --cors --silent "
  },
  "dependencies": {
    "@angular/core": "~6.1.5",
    "@angular/compiler": "~6.1.5",
    "@angular/common": "~6.1.5",
    "@angular/http": "~6.1.5",
    "@angular/forms": "~6.1.5",
    "@angular/platform-browser": "~6.1.5",
    "@angular/platform-browser-dynamic": "~6.1.5",
    "@angular/router": "~6.1.5",
    "@ng-idle/core": "~6.0.0-beta.3",
    "@ngx-translate/core": "~9.1.1",
    "@ngx-translate/http-loader": "~2.0.1",
    "@reactivex/rxjs": "~6.3.2",
    "http-server": "~0.11.1",
    "angular2-uuid": "~1.1.1",
    "ajv": "~6.5.3",
    "caniuse-db": "~1.0.30000884",
    "core-js": "~2.5.7",
    "ionic-angular": "~3.9.2",
    "ionicons": "4.4.3",
    "lodash": "~4.17.5",
    "moment": "~2.22.2",
    "node-sass": "~4.9.3",
    "rxjs": "~6.3.2",
    "rxjs-compat": "^6.3.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@types/node": "8.0.53",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "~6.1.5",
    "@angular-devkit/build-angular": "~0.7.5",
    "@angular-devkit/core": "~0.7.5",
    "@types/lodash": "~4.14.112",
    "codelyzer": "~4.4.4",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "2.9.2"
  }
}

tsconfig.app.json

{
    "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "outDir": "../out-tsc/app",
        "module": "es2015",
        "baseUrl": "",
        "types": [],
        "lib": [
            "es2017",
            "dom"
        ]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

Target of ES5 is a must, due to target devices cannot run any newer versions, and JIT methodology would be slow on the ma chine.

What Works?

ng serve 

Works fine, and the page is fully usable and works as expected. Tests also succeed.

The build and run the build via

ng build --prod --aot=true
http-server dist --cors --silent 

Also completes the builds without error.

The simple http-server boots up, and hosts the files successfully.

Issue

However when I open to browser and navigate to the page, I get the following error.

Uncaught Error: Cannot find module '@angular/core'
    at n (VM736 main.84a8ed63029b59b371ad.js:1)
    at VM736 main.84a8ed63029b59b371ad.js:1
    at VM736 main.84a8ed63029b59b371ad.js:1
    at Object.eD2c (VM736 main.84a8ed63029b59b371ad.js:1)
    at p (VM734 runtime.a66f828dca56eeb90e02.js:1)
    at Object.zUnb (VM736 main.84a8ed63029b59b371ad.js:1)
    at p (VM734 runtime.a66f828dca56eeb90e02.js:1)
    at Object.4 (VM736 main.84a8ed63029b59b371ad.js:1)
    at p (VM734 runtime.a66f828dca56eeb90e02.js:1)
    at n (VM734 runtime.a66f828dca56eeb90e02.js:1)

That is the only error, and the angular-app refuses render in the browser.

This occurs both on dev machine and the docker container the app is eventually built into, so build environment should be eliminated as a variable.

I am sure this must be a tsconfig issue or something similar or something my inexperience with ts or angular is just missing.

Answer 1

The Problem is the combination of Angular 6 and Ionic 3. This combination is not officially supported: https://forum.ionicframework.com/t/upgrading-to-angular-6/131121/5

The Angular 6 ahead-of-time compiler, which uses webpack, does not minify the javascript correctly. This is why the script tries to load a module - see your error message. If the minification works correctly no modules have to be loaded since they are all compiled together.

The problem lies within ionic-angular which is incompatible with either typescript ot webpack. While webpack is minifying the code there are many warnings like Critical dependency: the request of a dependency is an expression

To solve your problem either disable ahead-of-time compilation or update to Angular 6 and Ionic 4.