Topic: Error when pass my application to universal angular
Braulio Linares asked 4 years ago
Hello, I was passing my application to universal angular, with the following guide, taking into account the section of version 8 (the project uses 8.2)
I changed all the project-name data, and when I tried to deploy the following error came up ... An unhandled exception occurred: Error: ENOENT: no such file or directory, lstat tsconfig.app.json comparto configuración angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"project-name": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"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/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,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ng-uikit-pro-standard:build"
},
"configurations": {
"production": {
"browserTarget": "ng-uikit-pro-standard:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ng-uikit-pro-standard: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.scss"
],
"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/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}]
}
}
}
}
},
"project-name-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ng-uikit-pro-standard:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ng-uikit-pro-standard"
}
webpack.server.config.js
// Work around for https://github.com/angular/angular-cli/issues/7200
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'none',
entry: {
// This is our Express server for Dynamic universal
server: './server.ts',
// This is an example of Static prerendering (generative)
},
target: 'node',
resolve: { extensions: ['.ts', '.js'] },
// Make sure we include all node_modules etc
externals: [/node_modules/, nodeExternals({
whitelist: [
/^@agm\/core/,
/^hammerjs/
]
})],
output: {
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' },
{
// Mark files inside `@angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
parser: { system: true },
},
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
}
server.ts
// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
const domino = require('domino');
const fs = require('fs');
const path = require('path');
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const app = express();
const PORT = process.env.PORT || 4201;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['Node'] = win.Node;
global['navigator'] = win.navigator;
global['Event'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['document'] = win.document;
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
app.engine('html', (_, options, callback) => {
renderModuleFactory(AppServerModuleNgFactory, {
// Our index.html
document: template,
url: options.req.url,
// DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => {
callback(null, html);
});
});
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Server static files from dist folder
app.get('*.*', express.static(DIST_FOLDER));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render('index', { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
package.json
{
"name": "ng-uikit-pro-standard",
"version": "8.2.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:client-and-server-bundles": "ng build --prod && ng run project-name:server:production",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server"
},
"private": true,
"dependencies": {
"@agm/core": "~1.0.0-beta.6",
"@angular-devkit/build-angular": "^0.803.0",
"@angular/animations": "~8.2.0",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/platform-server": "^10.1.5",
"@angular/router": "~8.2.0",
"@fortawesome/fontawesome-free": "^5.6.3",
"@nguniversal/express-engine": "^8.2.6",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@sweetalert2/ngx-sweetalert2": "^7.2.0",
"@types/socket.io-client": "^1.4.32",
"angular-webstorage-service": "^1.0.2",
"chart.js": "^2.5.0",
"easy-pie-chart": "2.1.x",
"express": "^4.17.1",
"hammerjs": "^2.0.8",
"jwt-decode": "^2.2.0",
"ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.2.0.tgz",
"ngx-wow": "^2.0.1",
"rxjs": "~6.4.0",
"screenfull": "3.3.x",
"socket.io-client": "^2.3.0",
"sweetalert2": "^9.5.3",
"ts-loader": "^4.0.0",
"tslib": "^1.10.0",
"webpack-node-externals": "^2.5.2",
"wowjs": "^1.1.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular/cli": "~8.2.2",
"@angular/compiler-cli": "~8.2.0",
"@angular/language-service": "~8.2.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"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": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
},
"//": "git+https://oauth2:REPLACE_WITH_YOUR_TOKEN@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
"license": "Custom license"
}
Laura Fuentes answered 4 years ago
Hello, make the change your mentioned ,
scripts:
"build:client-and-server-bundles": "ng build --prod && ng run ng-uikit-pro-standard:server:production",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server"
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ng-uikit-pro-standard": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images",
"output": "leaflet/"
},
"src/favicon.ico",
"src/assets",
"src/robots.txt"
],
"styles": [
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
"node_modules/animate.css/animate.min.css",
"node_modules/wowjs/css/libs/animate.css",
"src/assets/scss/buttons.scss",
"src/assets/scss/compass.scss",
"src/assets/scss/fonts.scss",
"src/assets/scss/scroll.scss",
"src/styles.scss"
],
"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/easy-pie-chart/dist/easypiechart.js",
"node_modules/screenfull/dist/screenfull.js",
"node_modules/hammerjs/hammer.min.js",
"node_modules/wowjs/dist/wow.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": "ng-uikit-pro-standard:build"
},
"configurations": {
"production": {
"browserTarget": "ng-uikit-pro-standard:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ng-uikit-pro-standard:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}]
}
}
}
}
},
"ng-uikit-pro-standard-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ng-uikit-pro-standard:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ng-uikit-pro-standard"
}
Error and console:
chunk {0} runtime-es2015.c7f72c86d0dc2b275db6.js (runtime) 4.24 kB [entry] [rendered]
chunk {1} main-es2015.20a9fa54aebb47a3a9ad.js (main) 1.31 MB [initial] [rendered]
chunk {2} polyfills-es2015.fd917e7c3ed57f282ee5.js (polyfills) 64.3 kB [initial] [rendered]
chunk {3} polyfills-es5-es2015.f24fb8cb85b392c952f0.js (polyfills-es5) 211 kB [initial] [rendered]
chunk {4} styles.a12f85ebad54c72568bd.css (styles) 647 kB [initial] [rendered]
chunk {5} 5-es2015.1bf6d6e481dec78bd597.js () 319 kB [rendered]
chunk {6} 6-es2015.c72260668f3c3424bbd3.js () 369 kB [rendered]
chunk {scripts} scripts.1907c6b32e950bbb7603.js (scripts) 260 kB [entry] [rendered]
Date: 2020-10-24T18:52:51.093Z - Hash: 8e05b23fb9cdbbd5dc55 - Time: 40391ms
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
Browserslist: caniuse-lite is outdated. Please run next command npm update
Hash: 9a753def39404b6b4e37
Time: 14536ms
Built at: 2020-10-24 13:53:09
Asset Size Chunks Chunk Names
fondo-fuerte.jpg 54.1 KiB [emitted]
fondo.jpg 85.9 KiB [emitted]
main.js 1.6 MiB main [emitted] [big] main
main.js.map 431 KiB main [emitted] main
Entrypoint main [big] = main.js main.js.map
chunk {main} main.js, main.js.map (main) 1.55 MiB [entry] [rendered]
ng-uikit-pro-standard@8.2.0 webpack:server C:.....\Documents\Integriapp\Desarrollo\incidencias\Us\us-universal webpack --config webpack.server.config.js --progress --colors
[webpack-cli] Unknown argument: --colors √ Which flags do you want to use? · No items were selected [webpack-cli] Executing CLI
[webpack-cli] Compilation finished Hash: 08a9b9f2031f1dc6dd3e Version: webpack 4.39.2 Time: 41ms Built at: 2020-10-24 13:53:45
ERROR in Entry module not found: Error: Can't resolve './src' in 'C:....\Documents\Integriapp\Desarrollo\incidencias\Us\us-universal'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ng-uikit-pro-standard@8.2.0 webpack:server: webpack --config webpack.server.config.js --progress --colors
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ng-uikit-pro-standard@8.2.0 webpack:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:....\AppData\Roaming\npm-cache_logs\2020-10-24T18_53_46_660Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ng-uikit-pro-standard@8.2.0 build:ssr: npm run build:client-and-server-bundles && npm run webpack:server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ng-uikit-pro-standard@8.2.0 build:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:....\AppData\Roaming\npm-cache_logs\2020-10-24T18_53_46_698Z-debug.log
LOG:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build:ssr'
1 verbose cli ]
2 info using npm@6.12.0
3 info using node@v12.13.0
4 verbose run-script [ 'prebuild:ssr', 'build:ssr', 'postbuild:ssr' ]
5 info lifecycle ng-uikit-pro-standard@8.2.0~prebuild:ssr: ng-uikit-pro-standard@8.2.0
6 info lifecycle ng-uikit-pro-standard@8.2.0~build:ssr: ng-uikit-pro-standard@8.2.0
7 verbose lifecycle ng-uikit-pro-standard@8.2.0~build:ssr: unsafe-perm in lifecycle true
8 verbose lifecycle ng-uikit-pro-standard@8.2.0~build:ssr: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:.....\Documents\Integriapp\Desarrollo\incidencias\Us\us-universal\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\TortoiseGit\bin;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Program Files\PuTTY\;C:...\AppData\Local\Microsoft\WindowsApps;C:....\AppData\Local\Programs\Microsoft VS Code\bin;C:...\AppData\Roaming\npm;C:\src\flutter\bin;C:...\AppData\Local\Programs\Python\Python38-32;C:....\AppData\Local\Programs\Python\Python38-32\Scripts;C:\myoml4rclient\instantclient_12_1;
9 verbose lifecycle ng-uikit-pro-standard@8.2.0~build:ssr: CWD: C:.....\Documents\Integriapp\Desarrollo\incidencias\Us\us-universal
10 silly lifecycle ng-uikit-pro-standard@8.2.0~build:ssr: Args: [
10 silly lifecycle '/d /s /c',
10 silly lifecycle 'npm run build:client-and-server-bundles && npm run webpack:server'
10 silly lifecycle ]
11 silly lifecycle ng-uikit-pro-standard@8.2.0~build:ssr: Returned: code: 1 signal: null
12 info lifecycle ng-uikit-pro-standard@8.2.0~build:ssr: Failed to exec build:ssr script
13 verbose stack Error: ng-uikit-pro-standard@8.2.0 build:ssr: npm run build:client-and-server-bundles && npm run webpack:server
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:210:5)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:210:5)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid ng-uikit-pro-standard@8.2.0
15 verbose cwd C:...\Documents\Integriapp\Desarrollo\incidencias\Us\us-universal
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build:ssr"
18 verbose node v12.13.0
19 verbose npm v6.12.0
20 error code ELIFECYCLE
21 error errno 1
22 error ng-uikit-pro-standard@8.2.0 build:ssr: npm run build:client-and-server-bundles && npm run webpack:server
22 error Exit status 1
23 error Failed at the ng-uikit-pro-standard@8.2.0 build:ssr script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Arkadiusz Idzikowski staff commented 4 years ago
It looks like there is a still problem with the paths to files. Please prepare a simple demo (fresh MDB project with your Universal configuration) and send it to a.idzikowski@mdbootstrap.com. It will help us to find the cause of the problem much faster.
Laura Fuentes commented 4 years ago
hello, we send code your email
Arkadiusz Idzikowski staff commented 4 years ago
Hello. I double-checked my inbox and it looks like I didn't receive any email from you. From what address did you send the message? Could you try to send it again?
Laura Fuentes commented 4 years ago
Ok, ok my email is diana@integriapp.com
Arkadiusz Idzikowski staff commented 4 years ago
Thank you, I received your email now. I requested access to the project file because currently, it's not possible to download it.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.2.0
- Device: Web
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
The app can't find the
tsconfig.app.json
in thesrc
folder. Can you confirm if the config file is placed in this location?Braulio Linares commented 4 years ago
It is in the root address, it contains the following information: { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "files": [ "src / main.ts", "src / polyfills.ts" ], "include": [ "src / ** / . ts" ], "exclude": [ "src / test.ts", "src / * / *. spec.ts" ] }
Arkadiusz Idzikowski staff commented 4 years ago
In this case, you need to update the paths to the tsconfig in
angular.json