Angular build failed wtih - angular10

When I am trying to ng build the angular project, it failed generating ES5 bundle. But ng serve is working well.
Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
See "C:\Users\Users\AppData\Local\Temp\ng-NswrgZ\angular-errors.log" for further details.
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file C:\WINDOWS\system32\cmd.exe
npm ERR! errno ENOENT
npm ERR! initial-angular-project#0.0.0 build: `ng build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the initial-angular-project#0.0.0 build 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\Users\AppData\Roaming\npm-cache\_logs\2020-10-29T10_43_34_845Z-debug.log
angular-errors.log file message error:
[error] Error: Call retries were exceeded
at ChildProcessWorker.initialize (E:\Work_Cord\InitialAngularProject\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
at ChildProcessWorker._onExit (E:\Work_Cord\InitialAngularProject\node_modules\jest-worker\build\workers\ChildProcessWorker.js:274:12)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"InitialAngularProject": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/InitialAngularProject/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"allowedCommonJsDependencies": [
"file-saver",
"rxjs/internal/Observable",
"js-sha256",
"devextreme",
"devextreme-angular"
],
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.css",
"./node_modules/#angular/material/prebuilt-themes/purple-green.css",
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/bootstrap/dist/js/bootstrap.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,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "10mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "InitialAngularProject:build",
"port": 4201
},
"configurations": {
"production": {
"browserTarget": "InitialAngularProject:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "InitialAngularProject: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": [
"./node_modules/#angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json",
"tsconfig.server.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "InitialAngularProject:serve"
},
"configurations": {
"production": {
"devServerTarget": "InitialAngularProject:serve:production"
}
}
},
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/InitialAngularProject/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"app-shell": {
"builder": "#angular-devkit/build-angular:app-shell",
"options": {
"browserTarget": "InitialAngularProject:build",
"serverTarget": "InitialAngularProject:server",
"route": "app-shell-path"
},
"configurations": {
"production": {
"browserTarget": "InitialAngularProject:build:production",
"serverTarget": "InitialAngularProject:server:production"
}
}
}
}
}
},
"defaultProject": "InitialAngularProject",
"cli": {
"analytics": "05fad134-b906-4d6c-81e2-8fd3f3ad3a2e"
}
}
I have tried a few method but it kept failing. Please refer to the link below.
https://javascriptforwp.com/forums/topic/npm-err-code-elifecycle-on-terminal/
https://github.com/Autodesk-Forge/forge-boilers.nodejs/issues/7
How to solve npm error "npm ERR! code ELIFECYCLE"

Related

VSCODE - How to configure docker compose problem matcher

I've the following workspace configuration
{
"folders": [
{
"path": "."
}
],
"launch": {
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "docker-compose:launch:chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
},
"preLaunchTask": "docker:compose:up",
"postDebugTask": "docker:compose:down"
},
],
},
"tasks": {
"version": "2.0.0",
"tasks": [
{
"label": "npm:install",
"type": "shell",
"command": "npm install",
"linux": {
"command": "if [ -d ${workspaceFolder}/node_modules ]; then npm install fi"
},
"windows": {
"command": "cmd",
"args": ["/C","if not exist ${workspaceFolder}/node_modules npm install"]
},
"options": {"cwd":"${workspaceFolder}"}
},
{
"type": "docker-compose",
"label": "docker:compose:up",
"dependsOn": ["npm:install"],
"isBackground": true,
"dockerCompose": {
"up": {
"detached": true,
"build": true,
"customOptions": "",
"services": [
"site"
]
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
}
},
{
"type": "docker-compose",
"label": "docker:compose:down",
"dockerCompose": {
"down": {
"removeVolumes":false
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
},
},
]
},
"settings": {
"terminal.integrated.cwd": "${workspaceFolder}"
}
}
The launch("docker-compose:launch:chrome") configuration is not launching the chrome and I think thats happening because it thinks the task is not finished.
As far I know this should be checked using the problemMatcher, for vuejs as an example i can have the following problemMatcher:
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
How can i achive the same results using docker-compose?
I mean, is there a way to only launch chrome browser when the npm run serve command is finished?

Sass styles not applied with Angular CLI v1.7.3 Console says strict MIME checking enabled

I am trying to apply sass based styling to my angular project but the styles are not being applied and in the console of the browser this message appears:
"Refused to apply style from 'http://localhost:4200/dest-list.component.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled'.
I have looked almost every related query but not found a solution, the files for styling i am using are .scss
//Here is Angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first-app": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "tourmet",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/first-app",
"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",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/style.css"
],
"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,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "first-app:build"
},
"configurations": {
"production": {
"browserTarget": "first-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "first-app: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"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"defaults":{
"styleExt":"scss",
"component":{}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "first-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "first-app:serve:production"
}
}
}
}
}},
"defaultProject": "first-app"
}
I have analysed little bit more on your issue. Looks like your angular.json file is corrupted. I have corrected the issues and included the scss styling in schematics. So Please use the following angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/first-app",
"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",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [],
"es5BrowserSupport": true
},
"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": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "first-app:build"
},
"configurations": {
"production": {
"browserTarget": "first-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "first-app: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/**"
]
}
}
}
},
"first-app-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "first-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "first-app:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "first-app"
}
The above will work definitely. But to avoid the same error in future. I recommend the following steps
Update your angular CLI again.
When you are creating new project using angular cli. You should follow the
ng new second-app --style=scss
For your existing project try running the following command to convert your css to scss
ng set defaults.styleExt scss
By following the first two steps will rectify your scss error. But the third step is also essential in case if you are switching from css to .scss.
Hope it helps and will work.

Angular 6 with Saas Module not found: Error

I am new to angular and trying to setup it locally. I am facing an error and trying to fix from last 1 day.
Here is the error i am getting:
ERROR in multi ./scss/styles.scss ../node_modules/font-awesome/css/font-awesome.css ./scss/font-awesome.scss
Module not found: Error: Can't resolve 'D:\angular\my-app\scss\font-awesome.scss' in 'D:\miet\miet-app'
ERROR in multi ./scss/styles.scss ../node_modules/font-awesome/css/font-awesome.css ./scss/font-awesome.scss
Module not found: Error: Can't resolve 'D:\angular\my-app\scss\styles.scss' in 'D:\miet\miet-app'
ERROR in multi ./scss/styles.scss ../node_modules/font-awesome/css/font-awesome.css ./scss/font-awesome.scss
Module not found: Error: Can't resolve 'D:\angular\node_modules\font-awesome\css\font-awesome.css' in 'D:\angular\my-app
My folder structure is D:\miet\miet-app and inside this folder i have node_modules and src folders
Here is my angular.json file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"miet-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/miet-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"scss/styles.scss",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/font-awesome/scss/font-awesome.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules/bootstrap/scss",
"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": "miet-app:build"
},
"configurations": {
"production": {
"browserTarget": "miet-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "miet-app: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/**"
]
}
}
}
},
"miet-app-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "miet-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "miet-app:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "miet-app"
}
I have placed my font-awesome files inside src/scss/font-awesome and in node_module/font-awesome
Here is my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Can anyone help me where i am wrong.
Thanks
Try:
npm --depth 9999 update
npm rebuild node-sass
If doesn't work remove node_modules folder and repeat commands above.

Aurelia build for production creates bundles with "undefined" as content

Hi I have a web app built over the Aurelia CLI. To fix a performance problem (that I addressed here) I updated to the latest version of Aurelia (0.30.1, which fixed the performance issue). To do so, I had to update other npm packages, forcing the semver to the latest versions available using the npm-check-updates package first
npm install -g npm-check-updates
ncu --upgrade
npm update
npm install babel-runtime --save-dev
npm install timers-ext --save-dev
npm install gulp-sourcemaps --save-dev
npm install aurelia-pal --save-dev
npm install aurelia-binding --save-dev
npm install aurelia-templating --save-dev
this is my aurelia.json file
{
"name": "XX.YY.Web",
"type": "project:application",
"platform": {
"id": "web",
"displayName": "Web",
"output": "scripts",
"index": "index.html"
},
"transpiler": {
"id": "babel",
"displayName": "Babel",
"fileExtension": ".js",
"options": {
"plugins": [
"transform-es2015-modules-amd"
]
},
"source": "src\\**\\*.js"
},
"markupProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".html",
"source": "src\\**\\*.html"
},
"cssProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".css",
"source": "src\\**\\*.css"
},
"editor": {
"id": "vscode",
"displayName": "Visual Studio Code"
},
"unitTestRunner": {
"id": "karma",
"displayName": "Karma",
"source": "test\\unit\\**\\*.js"
},
"paths": {
"root": "src"
},
"testFramework": {
"id": "jasmine",
"displayName": "Jasmine"
},
"build": {
"targets": [
{
"id": "web",
"displayName": "Web",
"output": "scripts",
"index": "scripts/index.html",
"useAbsolutePath": true
}
],
"loader": {
"type": "require",
"configTarget": "vendor-bundle.js",
"includeBundleMetadataInConfig": "auto",
"config": {
"waitSeconds": 0,
"paths": {
"jquery": "../scripts/lib/cdn/jquery-3.1.0.min",
"breeze-client": "../node_modules/breeze-client/breeze.debug"
}
},
"plugins": [
{
"name": "text",
"extensions": [
".html",
".css"
],
"stub": true
}
]
},
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage",
"rev": "stage & prod"
},
"bundles": [
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
]
},
{
"name": "vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"scripts/lib/require.js"
],
"dependencies": [
"aurelia-binding",
"aurelia-bootstrapper",
"aurelia-dependency-injection",
"aurelia-event-aggregator",
"aurelia-fetch-client",
"aurelia-framework",
"aurelia-history",
"aurelia-history-browser",
"aurelia-loader",
"aurelia-loader-default",
"aurelia-logging",
"aurelia-logging-console",
"aurelia-metadata",
"aurelia-pal",
"aurelia-pal-browser",
"aurelia-path",
"aurelia-polyfills",
"aurelia-route-recognizer",
"aurelia-router",
"aurelia-task-queue",
"aurelia-templating",
"aurelia-templating-binding",
{
"name": "text",
"path": "../scripts/lib/text",
"packageRoot": "../scripts/lib"
},
{
"name": "aurelia-templating-resources",
"path": "../node_modules/aurelia-templating-resources/dist/amd",
"main": "aurelia-templating-resources"
},
{
"name": "aurelia-templating-router",
"path": "../node_modules/aurelia-templating-router/dist/amd",
"main": "aurelia-templating-router"
},
{
"name": "aurelia-breeze",
"path": "../node_modules/aurelia-breeze/dist/amd",
"main": "aurelia-breeze"
},
{
"name": "breeze-client",
"path": "../node_modules/breeze-client",
"main": "breeze.debug"
},
{
"name": "whatwg-fetch",
"path": "../node_modules/whatwg-fetch",
"main": "fetch"
},
{
"name": "aurelia-testing",
"path": "../node_modules/aurelia-testing/dist/amd",
"main": "aurelia-testing",
"env": "dev"
},
{
"name": "icheck",
"path": "../node_modules/icheck",
"main": "icheck.min"
},
{
"name": "filesaver.js",
"path": "../node_modules/filesaver.js",
"main": "FileSaver.min"
}
]
}
]
}
}
I have now a problem. If I run
au build
or
au run –watch
I have no problem.
If I run
au build –env prod
to create the app- and vendor-bundle-[identifier].js, I don’t get any errors, but both files end up created empty, or rather just with “undefined” in them.
Node.js version: 6.11.2 (current latest stable)
NPM version: 3.10.10
Does anyone have an idea? Does it have to do with the minification mechanism (which in dev does not happen)
How can I debug / log what is going wrong?
UPDATE:
I have activated minifying also for the dev environment in the aurelia.json file, this is what I got
Failed to write the bundle
SyntaxError: Unexpected token u in JSON at position 0
at Object.parse (native)
at new Converter (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:42:48)
at Object.exports.fromJSON (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:96:10)
at work.then (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\bundle.js:259:48)
at process._tickDomainCallback (internal/process/next_tick.js:135:7)
{ uid: 8,
name: 'writeBundles',
branch: false,
error:
SyntaxError: Unexpected token u in JSON at position 0
at Object.parse (native)
at new Converter (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:42:48)
at Object.exports.fromJSON (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:96:10)
at work.then (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\bundle.js:259:48)
at process._tickDomainCallback (internal/process/next_tick.js:135:7),
duration: [ 5, 639721541 ],
time: 1502969144275 }
{ uid: 0,
name: '<series>',
branch: true,
error:
SyntaxError: Unexpected token u in JSON at position 0
at Object.parse (native)
at new Converter (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:42:48)
at Object.exports.fromJSON (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:96:10)
at work.then (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\bundle.js:259:48)
at process._tickDomainCallback (internal/process/next_tick.js:135:7),
duration: [ 47, 444524559 ],
time: 1502969144277 }
SyntaxError: Unexpected token u in JSON at position 0
at Object.parse (native)
at new Converter (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:42:48)
at Object.exports.fromJSON (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\convert-source-map\index.js:96:10)
at work.then (E:\Code\Application\XX-dev\XX.YY.Web\node_modules\aurelia-cli\lib\build\bundle.js:259:48)
at process._tickDomainCallback (internal/process/next_tick.js:135:7)
If I activate minification for dev, it doesn't work either, giving the error I pasted above. If I also remove sourcemaps, it doesn't work (undefined by both bundles) but no error message.
Upgrading to the latest version of the aurelia-cli npm module (0.31.3) and all other modules to their latest versions fixed the issue.
I think you can now just do au build (without the --env prod flags.

how to run 2 watch tasks in VS code?

I want to run 2 npm scripts in parallel, but this VS Code only runs the first task and stops there. How can I solve it?
My tasks.json is as below:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"suppressTaskName": true,
"args": [
"run"
],
"tasks": [
{
"args": [
"gulp"
],
"taskName": "gulp",
"isBuildCommand": true
},
{
"args": [
"babel"
],
"taskName": "babel",
"isBuildCommand": true
}
]
}
On Windows, the NPM package "concurrently" may help you.
In the package.json:
"scripts": {
"gulpbabel": "concurrently \"npm run gulp\" \"npm run babel\""
},
Then in tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "gulpbabel",
"isBackground": true,
"problemMatcher": [
"create_one_for_gulp",
"create_another_for_babel",
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Ideally (but not required), you also need to create two problem matchers: one for the gulp task and one for babel. They should be able to extract error details from the merged output and to detect when the respective task's watcher fires/stops (so that VS Code can display the rotating '\' in the status bar).
I don't believe you can do both tasks at once. Instead you can do this from npm.
In the tasks.json file:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"suppressTaskName": true,
"args": [
"run"
],
"tasks": [
{
"args": [
"gulpbabel"
],
"taskName": "gulpbabel",
"isBuildCommand": true
}
]
}
In the package.json file if you are on windows:
{
"name": "stacktest",
"version": "1.0.0",
"description": "",
"scripts": {
"gulpbabel": "gulp & babel"
},
"author": "",
"license": "ISC"
}
In the package.json file if you are on unix/linux/mac:
{
"name": "stacktest",
"version": "1.0.0",
"description": "",
"scripts": {
"gulpbabel": "gulp && babel"
},
"author": "",
"license": "ISC"
}