How to solve production build issue of [duplicate] - node.js

This question already has answers here:
Angular 6 many Can't resolve errors (crypto, fs, http, https, net, path, stream, tls, zlib)
(11 answers)
Closed 2 years ago.
I have created my Angular 8 application.
on command ng serve application running smoothly without any errors and code work properly but,
when I create a build for production then I got the error image shown below.
I use the node-rsa package to encrypted and decrypt my data but I'm not able to build a project for a production server, I don't know how these errors are raised.
My package.json
{
"name": "cftrack",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~8.2.3",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/material": "^8.2.3",
"#angular/material-moment-adapter": "^8.2.3",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#fortawesome/fontawesome-free": "^5.15.1",
"#types/jquery": "^3.5.4",
"angular-animations": "^0.11.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.3.1",
"bootstrap-select": "^1.13.18",
"buffer": "^6.0.3",
"classlist.js": "^1.1.20150312",
"cors": "^2.8.5",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"fs": "0.0.1-security",
"jquery": "^3.5.1",
"moment": "^2.29.1",
"ngx-spinner": "^10.0.1",
"ngx-toastr": "^11.3.3",
"node-rsa": "^1.1.1",
"popper.js": "^1.16.1",
"primeng": "^11.0.0-rc.1",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"uuid": "^8.3.2",
"web-animations-js": "^2.3.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.29",
"#angular/cli": "~8.3.29",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.10.66",
"#types/node-rsa": "^1.0.0",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "^3.4.4"
},
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.29.",
"main": "karma.conf.js",
"author": "Sachin",
"license": "ISC"
}
My angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"CFTRACK": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/CFTRACK",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/files",
"src/assets",
"src/web.config"
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/#fortawesome/fontawesome-free/css/v4-shims.min.css",
"node_modules/#fortawesome/fontawesome-free/css/all.min.css",
"node_modules/bootstrap-select/dist/css/bootstrap-select.min.css",
"node_modules/ngx-toastr/toastr.css",
"node_modules/#angular/material/prebuilt-themes/indigo-pink.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "10mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "10kb",
"maximumError": "15kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "CFTRACK:build"
},
"configurations": {
"production": {
"browserTarget": "CFTRACK:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "CFTRACK:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/files",
"src/assets",
"src/web.config"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "CFTRACK:serve"
},
"configurations": {
"production": {
"devServerTarget": "CFTRACK:serve:production"
}
}
}
}
}
},
"defaultProject": "CFTRACK"
}
After I enter the command "ng build --prod"
it raised error after 92% done like this

You mention
I have created my Angular 10 application
But package.json shows an angular 8 application ???
The first line of errors is: node-modules doesn't exist
Are You sure npm packages installed successfully?
Check it with npm install again.
Set aot flag in angular.json to true, to enable a head of time compilation.
serve the application again, you must see the problem.
For
Field 'browser' doesn't contain a valid alias configuration
error see this post

I found the answer to these related issues/bugs/errors,
by adding in package.json
"browser": {
"path": false,
"stream": false,
"tls": false,
"crypto": false,
"constants": false
}
more detail visit below mention almost the same error answer link https://stackoverflow.com/a/52367183/12213901

Related

Trying to generated the installers of electron app for windows and linux but it doesn't work

I'm using electron-builder through the electron-vue lib (https://github.com/SimulatedGREG/electron-vue).
And following the instructions to build the application in this documentation (https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html) using the command npm run build are appearing just these two files, one .snap and another .AppImage and I was thinking that should appear one .deb and another .exe for windows at least. Am I wrong?
My environment:
Node version: 16.15.1
NPM version: 8.11.0
vue-cli version:
vue: 2.6.11
vue-cli-plugin-electron-builder: 2.0.0
Operating System: linux ubuntu
My package.json:
{
"name": "simulans",
"version": "1.0.0",
"private": true,
"build": {
"productName": "simulans",
"appId": "lucaslgr.simulans",
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"directories": {
"output": "build"
},
"files": [
"dist/electron",
"node_modules/",
"package.json"
],
"mac": {
"icon": "./src/assets/img/simulans-icon.ico"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve --remote-debugging-port=9222",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"anim-event": "^1.0.17",
"big.js": "^6.1.1",
"core-js": "^3.6.5",
"cssprefix": "^2.0.17",
"eigen": "^0.2.0",
"fs": "*",
"fs-extra": "^10.1.0",
"leader-line": "^1.0.5",
"lodash.clonedeep": "^4.5.0",
"m-class-list": "^1.1.10",
"plain-draggable": "^2.5.14",
"plotly.js-dist-min": "^2.6.3",
"plotly.js-locales": "^2.8.1",
"pointer-event": "^1.0.2",
"vue": "^2.6.11",
"vue-router": "^3.0.3",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "^3.0.5",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"electron": "^13.0.1",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"skeleton-loader": "^2.0.0",
"vue-cli-plugin-electron-builder": "~2.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"prettier/prettier": 0
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

An unhandled exception occurred: \environments\environment.prod.ts path in file replacements does not exist

I moved environment.prod.ts file to this directory 'C:\DailyProcess\daily-process\src\WebUI\Angular\src\environments\environment.prod.ts' and get this error. I need assistance and am seeking a possible solution to this error. This is what I have in my package.json file.
package.json
{
"name": "daily-process",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.2.0",
"#angular/common": "~13.2.0",
"#angular/compiler": "~13.2.0",
"#angular/core": "~13.2.0",
"#angular/forms": "~13.2.0",
"#angular/platform-browser": "~13.2.0",
"#angular/platform-browser-dynamic": "~13.2.0",
"#angular/router": "~13.2.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.2.1",
"#angular/cli": "~13.2.1",
"#angular/compiler-cli": "~13.2.0",
"#types/jasmine": "~3.10.0",
"#types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
}
environment.prod.ts
export const environment = {
production: true
};
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"daily-process": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/daily-process",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "daily-process:build:production"
},
"development": {
"browserTarget": "daily-process:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "daily-process:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
}
},
"defaultProject": "daily-process"
}
Figured it out. I had the environment files in the wrong directory. Once I moved them to the correct area my build worked.
I had those files in the 'C:\DailyProcess\daily-process\src\WebUI\Angular\environments\ and it needed to be in 'C:\DailyProcess\daily-process\src\WebUI\Angular\src\environments\

Node.js / Angular unable to serve files behind symbolic links

We have an angular application that is deployed in a container, with an injected configuration file when starting (so not when building). We used to have it on Angular 7 (Node.js 10), and there we had no issues. We are currently in the process of upgrading to Angular 12 (Node.js 14), and are running into issues with our injected configuration file.
The configuration file is injected as assets/environments/environment.json, but in practice (due to the container system), environment.json is a symbolic link to assets/environments/.data/environment.json.
Now somewhere in the application, we try to get this file (through a regular HTTP call) to load our configuration. This http call works for http://<url>/assets/css/all.css, for example, but not for http://<url>/assets/environments/environment.json, seemingly because of the symbolic link.
What can we do to be able to HTTP get this file, hidden behind the symbolic link?
For completeness, our package.json:
{
"scripts": {
"start": "serve -s dist",
"build": "ng build --configuration production",
"serve": "ng serve --host 0.0.0.0",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"#angular/animations": "^12.1.0",
"#angular/cdk": "^12.1.0",
"#angular/cli": "^12.1.0",
"#angular/common": "^12.1.0",
"#angular/compiler": "^12.1.0",
"#angular/compiler-cli": "^12.1.0",
"#angular/core": "^12.1.0",
"#angular/forms": "^12.1.0",
"#angular/platform-browser": "^12.1.0",
"#angular/platform-browser-dynamic": "^12.1.0",
"#angular/router": "^12.1.0",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#popperjs/core": "^2.9.2",
"adal-angular": "^1.0.18",
"bootstrap": "^5.0.2",
"core-js": "^3.15.1",
"jquery": "^3.6.0",
"messageformat": "^2.3.0",
"ngx-translate-messageformat-compiler": "^4.10.0",
"popper.js": "^1.16.1",
"primeicons": "^4.1.0",
"primeng": "^12.0.0",
"process": "^0.11.10",
"rxjs": "^7.1.0",
"serve": "^12.0.0",
"tslib": "^2.3.0",
"util": "^0.12.4",
"zone.js": "^0.11.4"
},
"devDependencies": {
"#angular-builders/custom-webpack": "^12.1.0",
"#angular-devkit/build-angular": "^12.1.0",
"#angular/language-service": "^12.1.0",
"#types/adal-angular": "^1.0.1",
"#types/jasmine": "^3.7.7",
"#types/jasminewd2": "^2.0.9",
"#types/node": "^15.12.5",
"codelyzer": "^6.0.2",
"jasmine-core": "^3.7.1",
"jasmine-spec-reporter": "^7.0.0",
"karma": "^6.3.4",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.6.0",
"protractor": "^7.0.0",
"ts-node": "^10.0.0",
"tslint": "^5.11.0",
"typescript": "^4.3.4"
}
}
and our angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"application-name": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/",
"index": "src/index.html",
"main": "src/main.ts",
"preserveSymlinks": true,
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"./src/favicon.ico",
"./src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./src/assets/css/all.css",
"./src/styles.css"
],
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"./node_modules/jquery/dist/jquery.slim.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "application-name:build"
},
"configurations": {
"production": {
"browserTarget": "application-name:build:production"
}
}
}
}
}
}
}

Angular 9 Node.js AWS - Compile errors after adding import AWS from 'aws-sdk'

I have been trying everything on the web on this topic with no luck, this is my first post to StackOverflow, sorry if I'm not doing the best job.
ERROR :
node_modules/aws-sdk/clients/dynamodbstreams.d.ts:92:38 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i #types/node` and then add `node` to the types field in your tsconfig.
92 export type BinaryAttributeValue = Buffer|Uint8Array|Blob|string;
~~~~~~
node_modules/aws-sdk/clients/ec2.d.ts:4439:23 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i #types/node` and then add `node` to the types field in your tsconfig.
4439 export type _Blob = Buffer|Uint8Array|Blob|string;
~~~~~~
node_modules/aws-sdk/clients/ecr.d.ts:990:31 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i #types/node` and then add `node` to the types field in your tsconfig.
990 export type LayerPartBlob = Buffer|Uint8Array|Blob|string;
~~~~~~
node_modules/aws-sdk/clients/firehose.d.ts:206:22 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i #types/node` and then add `node` to the types field in your tsconfig.
STEPS Taken
npm -i -d #types/node
removed types from the tsconfig files
added the polyfills.ts fix :
(window as any).global = window;
(window as any).process = {
env: { DEBUG: undefined },
};
Files
**angular.json:**
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"emsForest": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/emsForest",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "10mb",
"maximumError": "20mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "emsForest:build"
},
"configurations": {
"production": {
"browserTarget": "emsForest:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "emsForest:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "emsForest:serve"
},
"configurations": {
"production": {
"devServerTarget": "emsForest:serve:production"
}
}
}
}
}
},
"defaultProject": "emsForest",
"cli": {
"analytics": "4b8ead9f-656d-4d3f-8080-037f834cd184"
},
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
}
}
package.json
{
"name": "ems-forest",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:browser:prod": "ng build --prod",
"build:browser:serverless": "ng build --prod --base-href /production/",
"build:serverless": "npm run build:browser:serverless && npm run build:server:serverless",
"build:prod": "npm run build:browser:prod && npm run build:server:prod",
"server": "node local.js",
"build:prod:deploy": "npm run build:prod && npm run deploy",
"build:serverless:deploy": "npm run build:serverless && npm run deploy",
"deploy": "serverless deploy",
"build:server:prod": "webpack --config webpack.server.config.js --progress --colors",
"build:server:serverless": "webpack --config webpack.server.config.js --progress --colors"
},
"private": true,
"dependencies": {
"#angular/animations": "~9.1.1",
"#angular/cdk": "^9.2.0",
"#angular/common": "^9.1.1",
"#angular/compiler": "~9.1.1",
"#angular/core": "~9.1.1",
"#angular/forms": "~9.1.1",
"#angular/localize": "^9.1.1",
"#angular/material": "^9.2.0",
"#angular/platform-browser": "~9.1.1",
"#angular/platform-browser-dynamic": "~9.1.1",
"#angular/router": "~9.1.1",
"#ng-toolkit/serverless": "^8.1.0",
"#types/gzip-js": "^0.3.1",
"#types/hammerjs": "^2.0.36",
"#types/lodash": "^4.14.149",
"angular-bootstrap-md": "^9.0.1",
"aws-sdk": "^2.655.0",
"aws-serverless-express": "^3.3.8",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"buffer": "^5.5.0",
"core-js": "^3.6.4",
"cors": "~2.8.4",
"cp-cli": "^1.1.0",
"enhanced-resolve": "^4.1.1",
"fetch": "^1.1.0",
"file-saver": "^2.0.2",
"fs": "0.0.1-security",
"gzip-js": "^0.3.2",
"hammerjs": "^2.0.8",
"igniteui-angular": "^9.0.9",
"igniteui-angular-core": "^9.0.1",
"igniteui-angular-excel": "^9.0.1",
"igniteui-angular-spreadsheet": "^9.0.1",
"jszip": "^3.3.0",
"lodash": "^4.17.15",
"lzutf8": "^0.5.5",
"minireset.css": "~0.0.4",
"ngx-webstorage-service": "^4.1.0",
"node-sass": "^4.13.1",
"resize-observer-polyfill": "^1.5.1",
"rxjs": "^6.5.5",
"sass": "^1.26.3",
"stream": "0.0.2",
"tslib": "^1.11.1",
"web-animations-js": "^2.3.2",
"xlsx": "^0.15.6",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.901.0",
"#types/aws-sdk": "^2.7.0",
"#angular/cli": "^9.1.0",
"#angular/compiler-cli": "~9.1.1",
"#angular/language-service": "~9.1.1",
"#igniteui/angular-schematics": "~9.0.500",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.34",
"#types/node": "^12.12.34",
"codelyzer": "^5.2.2",
"igniteui-cli": "~5.0.1",
"jasmine-core": "^3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.3",
"opencollective": "^1.0.3",
"protractor": "^5.4.3",
"serverless": "1.40.0",
"serverless-apigw-binary": "^0.4.4",
"ts-loader": "4.2.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.8.3",
"webpack-cli": "^3.3.11"
}
}
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}
src\tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
The TS file if the: "import AWS from 'aws-sdk'" is removed the code complies ok
import { Component, OnInit } from '#angular/core';
import * as AWS from 'aws-sdk';
#Component({
selector: 'app-admin-portal',
templateUrl: './admin-portal.component.html',
styleUrls: ['./admin-portal.component.scss']
})
export class AdminPortalComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
In the api docs, it is mentioned that you either add "types": ["node"] to the project's tsconfig.app.json file, or remove the "types" field entirely.
It is working on my side after adding the node in the array:
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["node"]
}
I hope this helps.

Blank Page after deploying Angular 6 to heroku

I've tried deploying my mean app to heroku, Angular 6. The deployment was successful without any errors but the page was blank.
my package.json file is:
{
"name": "koko-and-friend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --aot --prod",
"preinstall": "npm install -g #angular/cli #angular/compiler-cli typescript #angular-devkit/build-angular"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.2",
"#angular/common": "^6.0.2",
"#angular/compiler": "^6.0.2",
"#angular/core": "^6.0.2",
"#angular/forms": "^6.0.2",
"#angular/http": "^6.0.2",
"#angular/platform-browser": "^6.0.2",
"#angular/platform-browser-dynamic": "^6.0.2",
"#angular/router": "^6.0.2",
"bootstrap": "^4.1.1",
"core-js": "^2.5.4",
"express": "^4.16.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",
"primeng": "^6.0.0-alpha.1",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/compiler-cli": "^6.0.2",
"#angular-devkit/build-angular": "~0.6.3",
"typescript": "~2.7.2",
"#angular/cli": "~6.0.3",
"#angular/language-service": "^6.0.2",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
},
"engines": {
"node": "8.11.2",
"npm": "6.0.1"
}
}
my server.js:
const path = require('path');
const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, '/dist')));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/koko-and-friend/index.html'));
});
app.listen(process.env.PORT || 4201, () => {
console.log('Connected to Port'); //Listening on port 4201
});
my angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"koko-and-friend": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"styleext": "sass"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/koko-and-friend",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./src/assets/styles/bootstrap.min.css",
"./node_modules/font-awesome/css/font-awesome.min.css",
"./node_modules/primeng/resources/themes/omega/theme.css",
"src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "koko-and-friend:build"
},
"configurations": {
"production": {
"browserTarget": "koko-and-friend:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "koko-and-friend:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.sass"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"koko-and-friend-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "koko-and-friend:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "koko-and-friend"
}
When I check the heroku console using bash 'dir', the dist/koko-and-friend folder after the angular app was built is there. This is weird because I'm using this same option for angular 4 exluding the #angular-devkit/build-angular in preinstall. I also checked heroku logs and there's no error.
Try to replace following line in your server.js
app.use(express.static(path.join(__dirname, '/dist')));
with
app.use( express.static(path.join(__dirname, '/dist/koko-and-friend')));
Your NPM scripts don't have any logic about moving your content to a specific folder.
This means that your page should be on dist/index.html, not dist/koko-and-friend/index.html.
Please, also post the content of your angular-cli.json (v5) or angular.json (v6) file.

Resources