Angular build - Index html generation failed. undefined:9:219187: property missing ':' - node.js

I have an Angular App that doesn't seem to build with the prod configuration. I get the following error:
Index html generation failed.
undefined:9:219187: property missing ':'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! JI.Infopool.WebApp#0.0.0 build: `ng build --outputHashing=all "--configuration=prod"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the JI.Infopool.WebApp#0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
The normal build works fine and I don't think that I changed any of the run configurations. I couldn't find anything useful in the log file either. Here's the config in the angular.json file:
"prod": {
"baseHref": "/myApp/",
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},

Just change `angular.json' file like this:
"configurations": {
"production": { // <=
"optimization": { //<= add this
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
}
},
"budgets": [...]

there are some reasons may not generate the index file
cause of minificaion on of errored css and script files or you may access the commonjs file. or external files like google fonts all are require internet at build time.
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": true
},
"fonts": true
}
please refer this link for more details
https://angular.io/guide/workspace-config#optimization-configuration

Related

Run mocha with Typescript throws: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

I'm trying to write some tests with Typescript and Mocha.
Following its documentation I ended up with the following setup:
package.json
{
//...
"scripts": {
"test": "mocha",
},
//...
}
.mocharc.json
{
"extension": ["test.ts"],
"spec": "tests/*.test.ts",
"require": "ts-node/register",
"recursive": true
}
tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": false,
"strict": true,
"esModuleInterop": true,
"isolatedModules": true,
},
"files": [
"src/main/main.ts",
],
}
Running npm test throws the following error: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for [...]/tests/task.test.ts.
That is my only test, and it works until I import a separate .ts file (../src/core/task), for completeness:
task.test.ts
import { assert } from 'chai';
import { Task } from '../src/core/task';
describe('Task', () => {
it('Task Run', () => {
const task = new Task({
title: "My Title",
command: "echo hello",
path: "."
});
task.run();
})
});
I have tried several permutations of my config according to some other answers as well as ts-mocha without success.
I have same problem before it work in ts-node#9 but not in ts-node#10 and then i tried this configuration in .mocharc.json to make it work as expected
{
"extensions": ["ts"],
"spec": ["**/*.spec.*"],
"node-option": [
"experimental-specifier-resolution=node",
"loader=ts-node/esm"
]
}
In my case the problem was caused by an import in a JS file imported by TypeScript test files. Transforming it to a require fixed the problem.
Generally speaking, when the exception occurs in:
Loader.defaultGetFormat [as _getFormat] internal/modules/esm/get_format.js
there can be only one explanation: Node.js is using its ESM loader to load what should be code transpiled by ts-node.
So the fix should always be - find the reason Node.js is switching to ESM and eliminate it.

Parsing error "parserOptions.project" has been set for #typescript-eslint/parser

I created a new NestJS project which is a very popular NodeJS framework. But I have this error (see title) on my IDE (PhpStorm 2020.2-Beta) and ESLint doesn't work at all.
I've used the NestJS CLI :
nest new nestjs-micro
I don't seem to be the only one with this problem, so it would be nice to find the cause of this problem and fix it once and for all.
I already have an open issue but I haven't had an answer, this is really very problematic.
If anyone has an idea on how to fix the problem and keeping an ESLint / Prettier integration with PhpStorm, thanks.
Repro
// .eslintrc.js
module.exports = {
parser: '#typescript-eslint/parser',
parserOptions: {
project: 'tsconfig.json',
sourceType: 'module',
},
plugins: ['#typescript-eslint/eslint-plugin'],
extends: [
'plugin:#typescript-eslint/eslint-recommended',
'plugin:#typescript-eslint/recommended',
'prettier',
'prettier/#typescript-eslint',
],
root: true,
env: {
node: true,
jest: true,
},
rules: {
'#typescript-eslint/interface-name-prefix': 'off',
'#typescript-eslint/explicit-function-return-type': 'off',
'#typescript-eslint/no-explicit-any': 'off',
},
};
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "es2017",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true
}
}
Additional Info
Versions
Typescript: 3.7.4
Node: 14.3.0
ESLint: 7.1.0
#typescript-eslint/parser: 3.0.2
Yarn: 1.22.4
FWIW what worked for me with this error was to add ignorePatterns: ['.eslintrc.js'], to the .eslintrc.js file. This line tells eslint to ignore the .eslintrc.js file (since it's not included in the tsconfig declared project rootDir).
I figured it out.
The error occurs when Typescript does not have a file to include for compilation.
The simplest solution is to create a tsconfig.build.json file for example and specify the following parameters in it :
{
"extends": "./tsconfig.json",
"exclude": ["node_modules", "test", "dist", "dist/**/*spec.ts"],
"include": ["src/**/*", ".eslintrc.js"]
}
The above example is adapted for NestJS but should work for other projects.
The most surprising thing is that it's only an error that shows up on PHPStorm, the build, it works fine.
Add it to the includes in tsconfig.json:
"include": [
".eslintrc.js",
]
in my case it was due to typings.d.ts file and adding it t0 the includes in tsconfig.json:
"include": [
...
"typings.d.ts",
...
]
resolved my issue.

cmd eslint can not find ts error which found by IDE

I want to use eslint in cmd to check ts file, but it can not get error info which I got in IDE.
I have set #typescript-eslint/parser in eslintrc.js. And eslint which running in cmd gave me some ts error when I did some wrong. But some wrong else did not be found.
I have a ts file with code:
interface Item {
name: string;
age: number;
}
const config: Array<Item> = [{
name: 'foo',
}]
so, I got some error in IDE:
Property 'age' is missing in type '{ name: string; age: number }' but required in type 'Item'.ts(2741)
That right. I need this error info.
But when I run eslint in cmd
eslint fileName.ts or eslint --ext .ts fileName.ts
cmd eslint return nothing or some other warning/error in this file.
eslintrc here
module.exports = {
"extends": ["xxx"],
"globals": {
"__SERVER_ENV__": true,
},
"rules": {
"react/jsx-filename-extension": 0,
"no-console": ["warn", { allow: ["error", "warn"] }],
"#typescript-eslint/no-unused-vars": ["error", {
"vars": "all",
"args": "after-used",
"ignoreRestSiblings": true
}],
},
"settings": {
"react": {
"createClass": "createReactClass", // Regex for Component Factory to use,
// default to "createReactClass"
"pragma": "React", // Pragma to use, default to "React"
"version": "detect", // React version. "detect" automatically picks the version you have installed.
// You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
// default to latest and warns if missing
// It will default to "detect" in the future
},
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
// use <root>/tsconfig.json
"typescript": {
// always try to resolve types under `<roo/>#types` directory even it doesn't contain any source code, like`#types/unist`
"alwaysTryTypes": true,
"directory": "./",
},
},
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"modules": true,
},
},
"plugins": ["#typescript-eslint", "import"],
};
and tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"noImplicitAny": true,
"module": "commonjs",
"lib": ["es6","dom","es2017"],
"target": "es5",
"jsx": "react",
"types":["react"],
"outDir": "/output",
"baseUrl": ".",
"paths": {
"src/*": ["./src/*"]
},
"allowSyntheticDefaultImports": true,
"sourceMap": true
},
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true,
"useTranspileModule": true,
"doTypeCheck": true,
"forkChecker": true
},
"include": [
".d.ts",
"./src/**/*"
]
}
I hope to get whole error info by cmd. what should I do?
It appears that eslint by design will not perform your Typescript type checking. I am just running my build command locally using tsc to be notified of this "property missing in type" error message, and fixing when the build fails.
It's very inconvenient because I only get alerted to one error per build attempt. If anyone has a better solution I'd appreciate any help.

electron-updater: Can not find module 'debug'

I am developing Desktop App(windows/mac) using Electronjs. I was trying to implement auto-update feature using electron-updater since I am using electron-builder for the building.
I am able to generate .exe file for my app but when trying to install, it's throwing an error: "Can not find module 'debug'". Please find attached screenshot.
Without electron-updater implementation, my app is running fine. When I am importing autoUpdator in my index.js, started getting that error. I am using autoUpdator as below:
const {autoUpdater} = require("electron-updater");
autoUpdater.on('update-downloaded', (ev, info) => {
setTimeout(function() {
autoUpdater.quitAndInstall();
}, 5000)
})
app.on('ready', ()=> {
autoUpdater.checkForUpdates();
});
Please find the libraries description below:
"electron-updater": "^4.0.6"
"electron": "^3.0.6"
"electron-builder": "^20.38.4"
I followed below links:
Electron builder Auto Update
electron builder using local server
I am new to the Electron js actively looking for your support.
As asked please find my build configuration below:
"build": {
"appId": "com.****.*****",
"productName": "********",
"directories": {
"output": "build"
},
"publish": [
{
"provider": "generic",
"url": "http://127.0.0.1:4080/"
}
],
"nsis": {
"oneClick": false,
"perMachine": true,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"deleteAppDataOnUninstall": true,
"createDesktopShortcut": true
},
"win": {
"target": "nsis"
},
"files": [
"!**/.vscode",
"!**/build",
"!**/config",
"!**/assets/data",
"!**/src"
],
"extraResources": [
{
"from": "src/assets/data",
"to": "dist/assets/data",
"filter": "database*"
}
]
},
The line "!**/src" in your exclude list is the culprit.
Many node modules will have "src" folders which have to be packaged/bundled along with your application source code.
If you observe "debug" module folder under "node_modules" it has a "src" folder which has been excluded by above rule.
Suggestion: If you have your apps source folder as "src", rename it to something else like "source" (which is in your control), but ensure you don't exclude "src" folders of node_modules (renaming these is not in your control as it could break the module's integrity and they get overwritten on fresh npm install also)

nightwatch could not find my step definition file

I am doing a POC for my project. When i do run a sample test with below project structure am facing a error as mentioned. Any help on this is much appreciated.
I have my project structure as below.
and my conf file content is like below.
require('nightwatch-cucumber')({
cucumberArgs: [
'--require', 'features/step_definitions',
'features',
]
});
module.exports = {
output_folder : 'reports',
custom_assertions_path : '',
page_objects_path : 'page_objects',
live_output : false,
disable_colors: false,
globals_path : '',
selenium : {
start_process : true,
server_path : './bin/selenium-server-standalone-3.9.1.jar',
log_path : '',
host: '127.0.0.1',
port : 4444
},
test_settings : {
default : {
launch_url : "https://<url>",
selenium_host : '127.0.0.1',
selenium_port : 4444,
desiredCapabilities : {
browserName : 'chrome',
javascriptEnabled : true,
acceptSslCerts : true
}
},
chrome : {
desiredCapabilities : {
browserName : 'chrome',
javascriptEnabled : true,
acceptSslCerts : true
},
selenium : {
cli_args : {
'webdriver.chrome.driver' : './bin/chromedriver/chromedriver'
}
}
}
}
};
and the saturnLogin step file has
const { client } = require('nightwatch-cucumber')
const { defineSupportCode } = require('cucumber')
// const { Given, When, Then } = require('cucumber')
defineSupportCode( ({Given, When, Then}) => {
Given(/^I login SATURN application with "(.*?)" and "(.*?)"$/, (user, pass) => {
console.log("Manimaran....")
const loginPage = client.page.saturn_login()
return loginPage
.navigate()
.setValue('#userName', user)
.setValue('#passWord', pass)
})
})
and the package.json file has
{
"name": "nightwatch-poc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"mytest": "nightwatch -e chrome"
},
"author": "",
"license": "ISC",
"dependencies": {
"cucumber": "^4.1.0",
"nightwatch": "^0.9.20",
"nightwatch-cucumber": "^9.1.2"
}
}
When i run my test, i am getting the error as below.
λ npm run mytest
> nightwatch-poc#1.0.0 mytest C:\<user>\nightwatch-POC
> nightwatch -e chrome
Starting selenium server... started - PID: 3220
There was an error while starting the test runner:
Error: Cannot find module 'features\step_definitions\saturnLogin.js'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at C:\<user>\nightwatch-POC\node_modules\cucumber\lib\cli\index.js:163:16
at Array.forEach (<anonymous>)
at Cli.getSupportCodeLibrary (C:\<user>\nightwatch-POC\node_modules\cucumber\lib\cli\index.js:162:24)
at Cli.<anonymous> (C:\<user>\nightwatch-POC\node_modules\cucumber\lib\cli\index.js:181:39)
at Generator.next (<anonymous>)
at Generator.tryCatcher (C:\<user>\nightwatch-POC\node_modules\bluebird\js\release\util.js:16:23)
at PromiseSpawn._promiseFulfilled (C:\<user>\nightwatch-POC\node_modules\bluebird\js\release\generators.js:97:49)
at Promise._settlePromise (C:\<user>\nightwatch-POC\node_modules\bluebird\js\release\promise.js:574:26)
at Promise._settlePromise0 (C:\<user>\nightwatch-POC\node_modules\bluebird\js\release\promise.js:614:10)
at Promise._settlePromises (C:\<user>\nightwatch-POC\node_modules\bluebird\js\release\promise.js:693:18)
at Async._drainQueue (C:\<user>\nightwatch-POC\node_modules\bluebird\js\release\async.js:133:16)
at Async._drainQueues (C:\<user>\nightwatch-POC\node_modules\bluebird\js\release\async.js:143:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nightwatch-poc#1.0.0 mytest: `nightwatch -e chrome`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nightwatch-poc#1.0.0 mytest 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:\Users\par964\AppData\Roaming\npm-cache\_logs\2018-04-04T18_28_54_978Z-debug.log

Resources