Angular v5 issue compiling Bootstrap4 styles - javascript

I am trying to use Bootstrap4 for one of my project; however, when I set up my project with angular-cli following this tutorial (https://medium.com/codingthesmartway-com-blog/building-an-angular-5-project-with-bootstrap-4-and-firebase-4504ff7717c1), I am getting this error in the terminal:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: BrowserslistError: Unknown browser major
at error (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:37:11)
at Function.browserslist.checkName (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:320:18)
at Function.select (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:438:37)
at /Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:207:41
at Array.forEach (<anonymous>)
at browserslist (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:196:13)
at Browsers.parse (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/browsers.js:44:14)
at new Browsers (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/browsers.js:39:28)
at loadPrefixes (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/autoprefixer.js:56:18)
at plugin (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/autoprefixer.js:62:18)
at LazyResult.run (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:277:20)
at LazyResult.asyncTick (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:192:32)
at LazyResult.asyncTick (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:204:22)
at processing.Promise.then._this2.processed (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:231:20)
at new Promise (<anonymous>)
at LazyResult.async (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:228:27)
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
3:10-186
# ./src/styles.css
# multi ./src/styles.css
I've used Bootstrap before perfectly, so I do not know if there is an issue with the new beta version released one week ago.
Thank you!

There is an error with the newest version of Bootstrap4. If you want to know how to fix it please visit: https://github.com/angular/angular-cli/issues/9020

Related

How can I resolve a TypeError using old version of ember and ember-light-table?

I have the test project at https://github.com/ericg-ember-questions/test_computed_sort
I setup the project by doing the following:
Node version: v12.18.1 (npm v6.14.5)
npm install --save-dev ember-cli#3.4
./node_modules/.bin/ember new test_computed_sort
cd test_computed_sort/
./node_modules/.bin/ember install ember-light-table#1.13.2
./node_modules/.bin/ember generate component test-comp
./node_modules/.bin/ember serve
application.hbs
{{test-comp}}
test-comp.hbs
Hello
{{#light-table}}
{{/light-table}}
If I comment out the reference to light-table, no error is generated. However, with it, I see in the console:
media.js:15 Uncaught TypeError: decorator is not a function
at media.js:15:1
at Array.reduce (<anonymous>)
at _applyDecoratedDescriptor (media.js:15:1)
at Module.callback (media.js:240:1)
at Module.exports (loader.js:106:1)
at Module._reify (loader.js:143:1)
at Module.reify (loader.js:130:1)
at Module.exports (loader.js:104:1)
at requireModule (loader.js:27:1)
at Class._extractDefaultExport (index.js:432:1)
What can I do to resolve this error so I can use ember-light-table with this project?
The error kinda hints at this, but it doesn't really make sense unless you're using modern ember -- but you're using 3.4 (thanks for providing that information!!)
The stack in your error is actually very helpful, and here's how you can figure out what the issue is.
I downloaded your reproduction repo (thanks for providing that! reproductions are immensely helpful in debugging!)
I got the same error you did:
The key piece here is the media.js reference.
Clicking into that we see:
that the compiled version of the ember-responsive/services/media file is using decorators --
you have some version of ember-responsive in your app which has decorators.
I saw in your package.json that you're specifying on alder version:
"ember-responsive": "^4.0.2",
this v4 version of ember-responsive only supports ember 3.13 and higher.
Kinda poking around the ember-responsive github, https://github.com/freshbooks/ember-responsive/blob/v3.0.5/config/ember-try.js
I see that the v3 series of ember-responsive supports back to Ember 2.12 -- definitely before decorators before supported.
So downgrading ember-responsive and restarting the app reveals this error:
"Assertion Failed: [ember-light-table] table must be an instance of Table"
this error is documented here: https://github.com/adopted-ember-addons/ember-light-table/issues/726
so it looks like some APIs usage issue.
If you want help figuring that out, feel free to post another question.

Getting error while building ConnectyCube javascript demo app

I am developing a dating app in NativeScript angular. I want to add connectycube messaging plugin in my project. I got a demo app which is in JavaScript from GitHub repository. When I try to run it, it throws an error :
ERROR in ../node_modules/nativescript-connectycube/lib/videocalling_conference/cubeConferenceClient.js 12:21
Module parse failed: Unexpected token (12:21)
You may need an appropriate loader to handle this file type.
DEVICE_INPUT_TYPES = DEVICE_INPUT_TYPES
CALL_TYPES = CALL_TYPES
# ../node_modules/nativescript-connectycube/lib/cubeMain.js 49:31-88
# ./services/connectycube-service.js
# ./app.js
# multi #babel/polyfill ./app.js
If I just add this plugin in my project and build, it always throws the same error. How do I solve it?
You should add '#babel/plugin-proposal-class-properties'

Ionic 3 commands not working

I'm new in Ionic, recently i got an error with every command i write for ionic, I'm using ionic 3.18.0
Here's the error:
{ Error
at new Exception
(C:\Users\Luis\AppData\Roaming\npm\node_modules\ionic\node_modules\#ionic\cli-
utils\lib\errors.js:8:23)
at new FatalException
(C:\Users\Luis\AppData\Roaming\npm\node_modules\ionic\node_modules\#ionic\cli-
utils\lib\errors.js:17:9)
at Config.<anonymous>
(C:\Users\Luis\AppData\Roaming\npm\node_modules\ionic\node_modules\#ionic\cli-
utils\lib\config.js:61:35)
at Generator.throw (<anonymous>)
at rejected
(C:\Users\Luis\AppData\Roaming\npm\node_modules\ionic\node_modules\tslib\
tslib.js:101:69)
at <anonymous> name: 'Exception', exitCode: 1, fatal: true }
Hope you can help me, i have no idea whats wrong, i try to install again ionic, i delete the npm_modules folder in /users/luis/AppData/Roaming/ even i reinstall node, i dont know what to do
I solve it by: unistalling Node.js, deleting node_modules/ and installing the last version of Node.js.
Don't know what was wrong, but it solve all.

Strange error when updating an application to Vue2

After running vue-migration-helper and change all i need to update i'm getting this error bellow.
vue2.default.user is not a function
Console error:
Uncaught TypeError: _vue2.default.use is not a function
at eval (eval at <anonymous> (app.js:1624), <anonymous>:153:15)
at Object.<anonymous> (app.js:1624)
at __webpack_require__ (vendor.js:53)
at webpackJsonpCallback (vendor.js:24)
at app.js:1
Anyone aware of what triggered this error?
______ UPDATE
Ok, looks like the error is about the new Vue() not a function, maybe something with Laravel-Elixir-Webpack.
Ok, for future mates facing the same problem. To solve the problem i've changed from Laravel Elixir to the new Laravel Mix.
Also you need to add vue-template-compiler to your package.json and this package need have the same version as your Vue, this is mandatory.
So for now i have Vue 2.3.0 and vue-template-compiler 2.3.0.
If doubts with webpack.config.js here is the Gist with what i have now link

Angular 2 debugging issues

I'm starting out on a sizeable angular 2 project and am having a lot of difficulty debugging. I am using Angular-CLI, WebStorm and Chrome.
Whenever I run into an issue, firstly my IDE fails to catch any problems with the typescript. No matter the issue, the browser always shows this error about 15 times, could be because of a syntax error in my code, injecting incorrectly, constructor problems, or markup issues.
EXCEPTION: Uncaught (in promise): TypeError: Cannot set property 'stack' of undefined
TypeError: Cannot set property 'stack' of undefined
at NoProviderError.set [as stack] (http://localhost:4200/vendor.bundle.js:6147:61)
at assignAll (http://localhost:4200/vendor.bundle.js:98290:29)
at NoProviderError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:98361:16)
at NoProviderError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:6109:16)
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor.bundle.js:58296:16)
at new NoProviderError (http://localhost:4200/vendor.bundle.js:58345:16)
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:79884:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:79921:25)
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:79871:25)
at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:79633:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:4200/vendor.bundle.js:59199:52)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:4200/vendor.bundle.js:80642:45)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:4200/vendor.bundle.js:81070:49)
at ElementInjector.get (http://localhost:4200/vendor.bundle.js:80150:27)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:79918:24)
How am I supposed to figure out the issue from this error message? Is there a tool to help understand this?
I faced the same error, the details of the error mentioned above can be seen by upgrading zone.js version in package.json to ^0.7.4(anything greater than version 0.7.4).
You can also upgrade by this npm terminal command:
npm install --save zone.js#0.7.4
Other than this I use the Intellij (JetBrains), angular-cli and chrome and debugging goes quite easy.

Categories

Resources