I recently started a angular2 web app using ng-cli. i'm trying to add Twitter-bootstrap (which I installed with npm) to my index.html file. For some reason it doesn't seem to find bootstrap even though the path is correct. Am I missing something? Is ng-cli moving bootstrap somewhere else?
My code:
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/stylesheet">
Angular cli does not work the way you are doing. it add third party library like below.
add install library using NPM
npm install bootstrap#next
add your script and style files in apps[0].scripts and apps[0].styles properties of angular-cli.json. like
apps": [
{
"root": "src",
"outDir": "dist",
......
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js",
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
after adding like this. it will add all the files into index.html
Related
I am trying to optimize the ng2-smart-table package, which we are using as a dependency, as I have noticed it has a big unnecessary dependency on lodash, even though it only uses a tiny portion of lodash.
However, I'm running into some issues when trying to get webpack bundle analyzer to work with their angular.json workspace file.
If I just try to run ng build I get this:
❯ ng build --statsJson
Unknown option: '--statsJson'
❯ ng build --stats-json
Unknown option: '--stats-json'
Now, the project uses an angular.json workspace file with the following contents:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ng2-smart-table": {
"projectType": "library",
"root": "projects/ng2-smart-table",
"sourceRoot": "projects/ng2-smart-table/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "#angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/ng2-smart-table/tsconfig.lib.json",
"project": "projects/ng2-smart-table/ng-package.json"
}
},
...
If I try to add "statsJson": true to the options I get this error:
❯ ng build ng2-smart-table
Schema validation failed with the following errors:
Data path "" should NOT have additional properties(statsJson).
I suspect it has something to do with the project using #angular-devkit/build-ng-packagr:build rather than the standard #angular-devkit/build-angular:browser. However, since the packagr apparently doesn't support analysis I just don't know how I can get my analysis file generated.
You need to specify project if you are using a workspace such as
ng build myproject --statsJson
Go to angular.json file and check "projects" section.
"projects": {
"template": { <--- here
"projectType": "application",
"schematics": {},
Then run ng build template --statsJson
In your case it's ng build ng2-smart-table --statsJson
I’m testing Babel with browserslist in an npm script.
Here is my current package.json, in which Babel is doing what I expect:
{
"name": "npm-scripts-igloo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"devserver": "live-server",
"watch-sass": "node-sass sass/style.scss css/style.css --output-style expanded --watch",
"compile-sass": "node-sass sass/style.scss css/style.compiled.css --output-style expanded",
"prefix-css": "postcss css/style.compiled.css --use autoprefixer -o css/style.prefix.css",
"compress-css": "node-sass css/style.prefix.css css/style.min.css --output-style compressed",
"build-css": "npm-run-all compile-sass prefix-css compress-css",
"babel": "babel app.js --watch -o js/app.compiled.js",
"start": "npm-run-all -p devserver watch-sass babel"
},
"browserslist": [
"last 5 versions"
],
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"cover 99.5%"
]
}
}
]
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.6.1",
"autoprefixer": "^9.4.7",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"live-server": "^1.2.1",
"node-sass": "^4.11.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.1.1"
}
}
I’m not using a .babelrc file or any other configuration of Babel.
I’ve tried to target Edge 16 using the browserslist key:
"browserslist": [
"Edge 16"
]
With this configuration, Babel should NOT convert const to var, but it does, as explained here:
Babel doesn’t change const since Edge 16 supports it
https://github.com/browserslist/browserslist-example
However, if I target Edge 16 using the babel key:
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"Edge 16"
]
}
}
]
]
}
then Babel correctly doesn’t change const to var since Edge 16 supports it.
I would prefer to use the browserslist key, as it’s the recommended practice
https://github.com/browserslist/browserslist
Also, I could then simply share this browserslist option with autoprefixer, which is how it’s supposed to work.
But, the problem is that Babel seems to ignore the browserslist key.
The same is true if I use a .browserslistrc file containing:
Edge 16
There is an asterisked note on this slide:
https://slides.com/ai/browserslist#/14
that reports:
Only Babel 7 supports config file
So, I tried updating Babel to v7:
npm install #babel/core -D
This produced the following in devDependencies:
"#babel/core": "^7.3.4"
Unfortunately, that didn’t seem to make any difference.
So, my questions are:
Why does the browserslist key not appear to be affecting Babel? Is there something wrong with my syntax?
Does it matter where in package.json the browserslist key appears? i.e. does key order matter?
A little bit late for the party but I was reading through the docs and found out this:
"By default #babel/preset-env will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set."
source: here
So in your case you need to get rid of targets property otherwise it will take precedence and neither .browserlistrc nor browserslist property in package.json will take effect.
Hope it helps!
try to clean cache in node_modules/.cache/babel-loader
Its worked for me with babel#7.6.0 with following config in .babelrc fie
'#babel/preset-env', {
'useBuiltIns': 'usage',
'corejs': 3,
'targets': {
'browsers': ['chrome 74']
}
}
Found more info here.
An or combiner can use the keyword or as well as ,. last 1 version or > 1% is equal to last 1 version, > 1%.
and query combinations are also supported to perform an intersection of the previous query: last 1 version and > 1%.
Using Visual Studio Code, I have two directories in my workspace (both node.js projects), but I can only launch one of them. The launch.json file exists in both folders, but only the first is available in debug menu. The launch.json files looks like that:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\app.js",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
How can I start debugging the second folder of my workspace?
I removed the first folder from the workspace, started the only project left, then added the removed folder again. Now I have both projects in the launch configurations.
I have found two solutions. Both involve editing your *.code-workspace file.
As OP found, you can reorder the folders. In the *.code-workspace file, place the folder with the desired launch.json at the top of the list of folders.
"folders": [
{
"path": "..\\ProjectWithLaunchJson"
},
{
"path": "..\\MyOtherProject"
}
]
Alternatively, you can include the launch configuration in the *.code-workspace file.
"folders": [
:
:
],
"settings": {
"launch": {
"configurations": [
{
<copy your launch.json's configuration into here>
}
]
}
}
YMMV. I had to tweak the path to the executable. And I had to remove the preLaunchTask property since VS Code could not find the Task. VS Code's support for this will likely evolve.
I have a situation where I am using polymer starter-kit template for my app. My polymer.json files looks like this:
{
"entrypoint": "index.html",
"shell": "src/my-app.html",
"fragments": [
],
"sourceGlobs": [
"src/**/*",
"images/**/*",
"bower.json"
],
"includeDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
When I build using polymer-cli command - 'polymer build', the bundled folder seems to miss the shell file 'my-app.html'.
If I remove
"shell": "src/my-app.html",
from the polymer.json file, the my-app.html file gets created in the bundled/src folder as it should but then the index.html file goes missing.
I am using the polymer-starter-kit template and adding files to it. I can't figure out why my-app.html or index.html goes missing depending on how polymer.json is configured.
Can you please tell me what's going wrong here?
Thank you.
I had the same problem with you yesterday and I added "/" at front of urls in polymer.json.
{
"entrypoint": "index.html",
"shell": "/src/my-app.html",
"fragments": [
"/src/my-app.html",
"/src/my-home.html",
"/src/my-shop.html"
],
"sourceGlobs": [
"src/**",
"src/**/*",
"src/structure/**/*",
"images/**/*",
"bower.json"
],
"includeDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
I only added "/" at shell & fragments part and it worked.
I hope this can help.
Cheers.
I have the latest version of Bower installed. I am trying the command
bower register flatly-3 https://github.com/brandonjschwartz/bower-bootswatch-flatly.git
Bower has the error message that the bower.json file is malformed due to an unexpected string. I have tried a number of different things (punctuation etc) but get the same error... Any help is greatly appreciated
Bower is attempting to get tag 3.0.0 from your repo:
https://github.com/brandonjschwartz/bower-bootswatch-flatly/releases/tag/3.0.0
The bower.json from that release does have some issues:
{
"name": "bower-bootswatch-flatly",
"version": "2.3.2",
"main": "less/flatly.less",
"keywords": [
"flatly",
"bootstrap",
"twitter bootstrap",
"bootswatch",
"less",
"css",
"flat",
"flat ui",
"theme"
] <-- missing comma
"ignore": [
"**/.*",
"node_modules",
"components"
],
"dependencies": {
"bootstrap-less": "2.3.2"
}
}
Your best bet is to redo the tag