I just pulled the new version of my project with git and angular-cli stopped working. When I start it, I get the following error:
Parsing .angular-cli.json failed. Please make sure your .angular-cli.json is valid JSON. Error:
SyntaxError: Unexpected token ] in JSON at position 1044
InvalidConfigError: Parsing .angular-cli.json failed. Please make sure your .angular-cli.json is valid JSON. Error:
SyntaxError: Unexpected token ] in JSON at position 1044
My angular-cli.json file is the following:
{
"project": {
"version": "1.0.0-beta.22-1",
"name": "quest"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.less",
"../node_modules/angular2-toaster/toaster.css",
"../node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css",
"../node_modules/bootstrap-timepicker/css/bootstrap-timepicker.css",
"../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/admin-lte/dist/js/app.js",
"../node_modules/bootstrap-slider/dist/bootstrap-slider.js",
"../node_modules/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
"../node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
I tried updating angular-cli, I tried deleting node_modules et running npm install. I have node version 6.9.5. I tried parsing the angular-cli.json with some JSON validation tools.
Any other idea?
Related
Cannot connect to localhost .Could not debug at localhost it keeps showing this whenever i try to run the code .Please help out
json -
{
"folders": [],
"launch": {
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "chrome",
"webRoot": "${workspaceFolder}"
}
]
},
"extensions": {
"recommendations": [
"formulahendry.code-runner"
]
},
"settings": {
"code-runner.clearPreviousOutput": true,
"json.format.keepLines": true,
"json.format.enable": false,
"code-runner.runInTerminal": true
}
}
i tried to run and debug code but it showed this error
I have the following in .vscode/launch.json :
{
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"firefoxExecutable": "C:/Users/Geoffrey Swenson/AppData/Local/Mozilla Firefox/firefox.exe",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
},
"preLaunchTask": "serve"
},
{
"type": "chrome",
"request": "launch",
"reAttach": true,
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
},
"preLaunchTask": "serve"
}]
}
I have the following in .vscode/tasks.json :
{
"version": "2.0.0",
"tasks": [
{
"label": "start",
"type": "npm",
"script": "serve",
"isBackground": true
},
{
"label": "serve",
"type": "npm",
"script": "serve",
"isBackground": true,
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
I also have vue.config.ts :
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
Breakpoints work in Firefox, though I have to press F5 the first time I load it. They never work in Chrome. Firefox involves installing a debugger extension, but there is supposedly no need for this for Chrome.
first you need to set launch.json and then set your config file as you need:
hereafter an example which works with vite running as bundler in front and server in back
{
"debug": {
"javascript": {
"terminalOptions": {
"skipFiles": [
"<node_internals>/**"
],
"trace": true
}
}
},
"configurations": [
{
"name": "Run bundler",
"request": "launch",
"type": "node-terminal",
"command": "npm run <your-command-to-run-app>",
"cwd": "${workspaceFolder}"
}
]
}
Then forget webpack and use vite, thus you need to install vite and a vite config file
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
// cf. https://vitejs.dev/config/
export default defineConfig(async ({ command, mode }) => {
return {
plugins: [vue()],
server: {
proxy: {
'/api/': {
target: 'http://localhost:3080',
changeOrigin: true,
secure: false
}
},
port: 3080,
strictPort: true
},
build: {
outDir: './server/public'
}
};
});
I use typescript and in my ts.config.json, I setted
...
"sourceMap": true,
"types": ["vite/server"],
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
...
hope that's will help folk's !
In my Angular 4 project i have included Bootstrap, Fontawesome and some my own CSS but everything is rendering as tag in the top of my index.html. I expect all of them minimize and include as a bundle CSS in the file please refer the image attached for more clarification
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css"
],
"scripts": ["../node_modules/bootstrap/dist/js/bootstrap.min.js"],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
The css vendors are being added as style elements by the javascript bundle files .
You need to compile your application with the --extract-css options, which will create single .css files
I noticed that when viewing a package.json under node_modules, I see JSON that looks like:
{
"_args": [
[
"example#0.2.0",
"C:\\path\\to\\project\\folder"
]
],
"_from": "example#0.2.0",
"_id": "example#0.2.0",
"_inCache": true,
"_installable": true,
"_location": "/example",
"_nodeVersion": "6.2.0",
"_npmUser": {},
"_npmVersion": "3.8.9",
"_phantomChildren": {},
"_requested": {
"name": "example",
"raw": "example#0.2.0",
"rawSpec": "0.2.0",
"scope": "#edf",
"spec": "0.2.0",
"type": "version"
},
"_requiredBy": [
"/"
],
"_resolved": "http://internal.registry/example/-/example-0.2.0.tgz",
"_shasum": "b564b263db925ff3a8bffdc922c16f8e4b6f4641",
"_shrinkwrap": null,
"_spec": "example#0.2.0",
"_where": "C:\\path\\to\\project\\folder",
"author": {
"name": "NPM User"
},
"dependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-less": "^3.1.0"
},
"description": "Example Package",
"devDependencies": {},
"dist": {
"shasum": "b564b263db925ff3a8bffdc922c16f8e4b6f4641",
"tarball": "http://internal.registry/example/-/example-0.2.0.tgz"
},
"main": "index.js",
"name": "example",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"readmeFilename": "README.md",
"scripts": {
"postinstall": "gulp"
},
"version": "0.2.0"
}
Instead of just:
{
"name": "example",
"version": "0.2.0",
"description": "Example Package",
"main": "index.js",
"scripts": {
"postinstall": "gulp"
},
"author": "NPM User",
"dependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-less": "^3.1.0"
}
}
Is there a command-line argument I can specify to keep dependency package.json files as authored when installing, or is there another way I can access the file as authored when there is no repository specified for the package?
I found an option called proprietary-attribs on the npm-config documentation but I don't think that's what I'm looking for.
Tired of bower downloading everything in each repo I install, I setup bower-installer.
https://scotch.io/tutorials/only-grab-the-files-you-need-while-using-bower
However after running bower-installer I get this strange error:
bower-installer
/usr/local/lib/node_modules/bower-installer/bower-installer.js:56
throw createError('Neither bower.json nor component.json present', 'ENOEN
My bower.json file is there, and what's in it below:
{
"name": "app",
"main": "app.js",
"version": "0.0.0",
"authors": [
"Leon"
],
"description": "My app",
"keywords": [
"tags",
"manage"
],
"license": "MIT",
"homepage": "me.com",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular-bootstrap": "~0.12.1",
"angular-loader": "1.2.x",
"angular-mocks": "~1.2.x",
"angular-route": "1.2.x",
"angular-scroll": "~0.6.5",
"chartist": "~0.7.3",
"bootstrap": "~3.3.4",
"angular": "~1.3.15"
},
"install": {
"path": "libs",
"sources": {
"angular": "bower_components/angular/angular.min.js",
"bootstrap": "bower_components/bootstrap/dist/js/bootstrap.min.js",
"chartist": [
"bower_components/chartist/dist/chartist.min.js",
"bower_components/chartist/dist/chartist.min.css",
],
"angular-scroll": "bower_components/angular-scroll/angular-scroll.min.js",
"angular-route": "bower_components/angular-route/angular-route.min.js",
"angular-mocks": "bower_components/angular-mocks/angular-mocks.js",
"angular-loader": "bower_components/angular-loader/angular-loader.min.js",
"angular-bootstrap": [
"bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
"bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js",
"bower_components/angular-bootstrap/ui-bootstrap.js",
"bower_components/angular-bootstrap/ui-bootstrap.min.js"
]
}
}
}
Your bower.json is incorrect, this part
"chartist": [
"bower_components/chartist/dist/chartist.min.js",
"bower_components/chartist/dist/chartist.min.css",
],
should be
"chartist": [
"bower_components/chartist/dist/chartist.min.js",
"bower_components/chartist/dist/chartist.min.css"
],
So drop the last comma. That comma makes the json invalid and therefore the bower installer can't parse it. I verified this with your bower.json and it works fine after removing the comma.