I consider myself above novice with some web development experience, and have been practicing Angular. However, I'm not finding the answer on how to implement this one step from the angular-ui.github.io/bootstrap page.
It says to download the package to add it to my project, and to add this to the Angular module:
angular.module('myModule', ['ui.bootstrap']);
I cannot find the life of me through searching stackoverflow, or tutorials on where to add this in my project.
Now, I did use a CLI command in the project directory:
npm install bootstrap#4.0.0-beta
Testing this with the bootstrap tags in my divs shows that it works, just not the programming part to have the interactive content work.
Would someone mind pointing me in the right direction or clarify what I'm missing here?
Thank you all for your help!
---edit---
AHONCIAN-M-X2UY:bootstrap ahoncian$ npm ls --depth=0
bootstrap#0.0.0 /Users/ahoncian/OneDrive/angulartraining/bootstrap/bootstrap
├── #angular/common#2.4.10
├── #angular/compiler#2.4.10
├── #angular/compiler-cli#2.4.10
├── #angular/core#2.4.10
├── #angular/forms#2.4.10
├── #angular/http#2.4.10
├── #angular/platform-browser#2.4.10
├── #angular/platform-browser-dynamic#2.4.10
├── #angular/router#3.4.10
├── #types/jasmine#2.5.38
├── #types/node#6.0.88
├── angular-cli#1.0.0-beta.28.3
├── angular-ui-bootstrap#2.5.0 extraneous
├── codelyzer#2.0.1
├── core-js#2.5.1
├── jasmine-core#2.5.2
├── jasmine-spec-reporter#2.5.0
├── karma#1.2.0
├── karma-chrome-launcher#2.2.0
├── karma-cli#1.0.1
├── karma-jasmine#1.1.0
├── karma-remap-istanbul#0.2.2
├── protractor#4.0.14
├── rxjs#5.4.3
├── ts-helpers#1.1.2
├── ts-node#1.2.1
├── tslint#4.5.1
├── typescript#2.0.10
└── zone.js#0.7.8
npm ERR! extraneous: angular-ui-bootstrap#2.5.0 /Users/ahoncian/OneDrive/angulartraining/bootstrap/bootstrap/node_modules/angular-ui-bootstrap
npm ERR! extraneous: tsickle#0.2.5 /Users/ahoncian/OneDrive/angulartraining/bootstrap/bootstrap/node_modules/#angular-cli/ast-tools/node_modules/tsickle
AHONCIAN-M-X2UY:bootstrap ahoncian$
Related
I was trying to set up an existing project in a new development server. However I get the following error:
./node_modules/react-router-dom/esm/react-router-dom.js
Attempted import error : 'createLocation' is not exported from 'history'.
Searching for a solution I found that it might be because there are conflicting versions of the history and react-router-dom. It seems that react-router-dom 5.2.0 works with history 4.9.0, and I have history 5.0.0. The solution should be downgrading history to 4.9.0, but in the existing project, with the same versions, this error does not appear.
I checked the libraries versions with npm list -depth=0
├── #ant-design/compatible#1.0.8
├── #ant-design/icons#4.2.2
├── #babel/preset-env#7.11.5
├── #babel/preset-react#7.10.4
├── #craco/craco#5.7.0
├── #types/jest#26.0.14
├── #types/jwt-decode#2.2.1
├── #types/node#14.11.1
├── #types/react-dom#16.9.8
├── #types/react-highlight-words#0.16.1
├── #types/react-redux#7.1.9
├── #types/react-resizable#1.7.2
├── #types/react-router-dom#5.1.5
├── #types/react-table#7.0.23
├── #types/react#16.9.49
├── #types/redux-logger#3.0.8
├── #typescript-eslint/eslint-plugin#3.10.1
├── #typescript-eslint/parser#3.10.1
├── antd#4.10.2
├── axios#0.19.2
├── bootstrap#4.5.2
├── craco-less#1.17.0
├── env-cmd#10.1.0
├── eslint-plugin-react-hooks#4.1.2
├── eslint-plugin-react#7.20.6
├── eslint#6.8.0
├── history#5.0.0
├── js-file-download#0.4.12
├── jwt-decode#3.1.2
├── lodash#4.17.20
├── mocker-data-generator#2.9.0
├── moment#2.28.0
├── node-sass#4.14.1
├── password-validator#5.1.0
├── prettier#1.19.1
├── query-string#6.13.2
├── react-dom#16.13.1
├── react-highlight-words#0.16.0
├── react-redux#7.2.1
├── react-resizable#1.11.0
├── react-router-dom#5.2.0
├── react-scripts#3.4.3
├── react-test-renderer#16.13.1
├── react#16.13.1
├── redux-devtools-extension#2.13.8
├── redux-logger#3.0.6
├── redux-thunk#2.3.0
├── redux#4.0.5
├── resize-observer-polyfill#1.5.1
├── rsuite#4.8.2
├── typescript#3.9.7
├── webpack-dev-middleware#3.7.2
└── webpack-hot-middleware#2.25.0
Ideally I wanted to use the same versions as the existing project, however I dont understand how the project is working with the conflicting versions of history and react-router-dom.
History 5.x.x does not export createLocation. Therefore it will never work if you have that history version in your root package.json and trying to do that import from your project.
Using "react-bootstrap"
import { useAccordionButton } from 'react-bootstrap/AccordionButton';
Gives error message:
Module not found: Can't resolve 'react-bootstrap/AccordionButton'
npm list
bsn-gui#0.1.0 C:\goproj\src\github.com\amortaza\bsn-gui
├── #testing-library/jest-dom#5.14.1
├── #testing-library/react#11.2.7
├── #testing-library/user-event#12.8.3
├── bindings#1.5.0 extraneous
├── bootstrap#5.1.1
├── file-uri-to-path#1.0.0 extraneous
├── nan#2.15.0 extraneous
├── react-bootstrap-validation#0.1.11
├── react-bootstrap#1.6.3
├── react-dom#17.0.2
├── react-scripts#4.0.3
├── react-split#2.0.13
├── react#17.0.2
└── web-vitals#1.1.2
Accordion.Button is available in react-bootstrap v5 (v2.0.0-rc0)
Accordion.Button
You have v4 react-bootstrap#1.6.3 installed.
Uninstall the current version and install latest.
npm uninstall -S react-bootstrap
npm install -S react-bootstrap#2.0.0-rc.0
Your NPM list states you are using react-bootstrap#1.6.3 yet your code is referencing the 2.0.0-rc.0 API. Of course, as with all third-party tools, you must reference the documentation relevant to the version you choose to use. Refer to the proper documentation for 1.6.3, or change your version to 2.0.0-rc.0 if you need that API.
I have created my first react-js app, just saying 'Hello world'. After I change the 'Hello world' to another text, nothing changes when I refresh the browser, even if I empty the cache. The changes take place only when I close the local server and reopen it with npm start. Could anyone help me?
If you want to create new react app from-scratch. You can use :
> npx create-react-app my-app
> cd my-app
> npm start
After that, you will have the initial configured react project structure :
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
└── App.css
└── App.js
└── App.test.js
└── index.css
└── index.js
└── logo.svg
└── registerServiceWorker.js
See react app seed in Github : https://github.com/facebook/create-react-app.
Sam's answer is probably the best way to do it but if you want do refresh it without adding all the bells and whistles of create-react-app you can go for browsersync.
https://browsersync.io/
It watches over your CSS, HTML, JS. I usually use create-react-app but in some cases browsersync does the trick as well.
I am learning to use check for unit testing my code. I have my project set up with autotools, and I have check set up to do some tests.
The program I'm making is a red black tree that I want to be able to use for other projects. For one of my tests, I want to read input from a file to use as test data to insert into the tree. I have a file called words.txt in my tests directory that I want to read from. I like to keep my build tree separate though. So how can set up my makefiles to put the words file in the right place? Then can I just read it from the directory that make check runs in?
Here's what everything looks like:
Project Directory:
├── aclocal.m4
├── autom4te.cache
│ ├── output.0
│ ├── output.1
│ ├── requests
│ ├── traces.0
│ └── traces.1
├── build-aux
│ ├── ar-lib
│ ├── compile
│ ├── depcomp
│ ├── install-sh
│ ├── missing
│ └── test-driver
├── config.h.in
├── config.h.in~
├── configure
├── configure.ac
├── Makefile.am
├── Makefile.in
├── src
│ ├── libredblack.c
│ ├── libredblack.h
│ ├── main.c
│ ├── Makefile.am
│ └── Makefile.in
└── tests
├── check_libredblack.c
├── Makefile.am
├── Makefile.in
└── words.txt
tests/Makefile.am:
TESTS = check_libredblack
check_PROGRAMS = check_libredblack
check_libredblack_SOURCES = check_libredblack.c $(top_builddir)/src/libredblack.h
check_libredblack_CFLAGS = #CHECK_CFLAGS#
check_libredblack_LDADD = $(top_builddir)/src/libredblack.a #CHECK_LIBS#
One way is to let the Makefile tell the test program where to find it.
Add to your test program's CPPFLAGS something like -DWORDS_LOCATION="\"$(top_srcdir)/tests/data/words.txt\"" and then the path to the data file will be available to your program as a string, defined in the macro WORDS_LOCATION.
Following along the getting started example from ZEIT for next.js, I'm getting this error:
error in ./pages/index.js
Module build failed: ReferenceError: [BABEL] /Users/Projects/nextDemo/pages/index.js: Using removed Babel 5 option: /Users/Projects/.babelrc.optional - Put the specific transforms you want in the `plugins` option
What is this error - is it trying to use my globally installed babel? Is there a version mismatch or an update I should be doing?
This is the basic steps I did to get here:
$ npm install next --save
$ mkdir pages
//pages/index.js:
import React from 'react'
export default () => <div>Hello world!</div>
Add a script to the package.json like this:
{
"scripts": {
"dev": "next"
}
}
$ npm run dev
and the installed packages:
└─┬ next#1.2.3
├── ansi-html#0.0.6
├── babel-core#6.18.2
├── babel-generator#6.19.0
├── babel-loader#6.2.8
├── babel-plugin-module-resolver#2.4.0
├── babel-plugin-react-require#3.0.0
├── babel-plugin-transform-async-to-generator#6.16.0
├── babel-plugin-transform-class-properties#6.19.0
├── babel-plugin-transform-object-rest-spread#6.19.0
├── babel-plugin-transform-runtime#6.15.0
├── babel-preset-es2015#6.18.0
├── babel-preset-react#6.16.0
├── babel-runtime#6.18.0
├── cross-spawn#5.0.1
├── del#2.2.2
├── domready#1.0.8
├── friendly-errors-webpack-plugin#1.1.1
├── glamor#2.20.8
├── glob-promise#2.0.0
├── htmlescape#1.1.1
├── is-windows-bash#1.0.2
├── json-loader#0.5.4
├── loader-utils#0.2.16
├── minimist#1.2.0
├── mkdirp-then#1.2.0
├── mz#2.6.0
├── path-match#1.2.4
├── react#15.4.1
├── react-dom#15.4.1
├── react-hot-loader#3.0.0-beta.6
├── read-pkg-up#2.0.0
├── send#0.14.1
├── source-map-support#0.4.6
├── strip-ansi#3.0.1
├── url#0.11.0
├── webpack#1.13.3
├── webpack-dev-middleware#1.8.4
├── webpack-hot-middleware#2.13.2
└── write-file-webpack-plugin#3.4.2
It uses your .babelrc file from the parent directory because:
Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.
Use "babelrc": false to stop lookup behavior.