问题描述

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.

标签： javascriptangulartypescriptpost-build

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