Angular 5 build error when attaching bootstrap css file - css

I have created angular 5 app, installed ng-bootstrap and trying to attach bootstrap css file from node_modules: ../node_modules/bootstrap/dist/css/bootstrap.min.css. when I run ng build command I get followinf error:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./node_modules/bootstrap/scss/bootstrap.scss
Module build failed: BrowserslistError: Unknown browser major
at error (/Users/***/dev/***/node_modules/browserslist/index.js:37:11)
at Function.browserslist.checkName (/Users/***/dev/***/node_modules/browserslist/index.js:320:18)
at Function.select (/Users/***/dev/***/node_modules/browserslist/index.js:438:37)
at /Users/***/dev/***/node_modules/browserslist/index.js:207:41
at Array.forEach (<anonymous>)
at browserslist (/Users/***/dev/***/node_modules/browserslist/index.js:196:13)
at Browsers.parse (/Users/***/dev/***/node_modules/autoprefixer/lib/browsers.js:44:14)
at new Browsers (/Users/***/dev/***/node_modules/autoprefixer/lib/browsers.js:39:28)
at loadPrefixes (/Users/***/dev/***/node_modules/autoprefixer/lib/autoprefixer.js:56:18)
at plugin (/Users/***/dev/***/node_modules/autoprefixer/lib/autoprefixer.js:62:18)
at LazyResult.run (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:277:20)
at LazyResult.asyncTick (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:192:32)
at LazyResult.asyncTick (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:204:22)
at LazyResult.asyncTick (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:204:22)
at processing.Promise.then._this2.processed (/Users/***/dev/***/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:231:20)
at new Promise (<anonymous>)
# ./node_modules/bootstrap/scss/bootstrap.scss 4:14-164
# multi ./node_modules/bootstrap/scss/bootstrap.scss ./src/styles.css
node version: 8.9.1
typescript version: 2.6.0
npm version: 5.5.1
angular version: 5.2.0
bootstrap version: ^4.0.0
ng-bootstrap version: "^1.0.0-beta.8
Any ideas?

If you are using Angular CLI with Bootstrap, you need to ensure you have these versions:
#angular/cli : 1.7.0
Bootstrap : 4.0.0
These was a breaking change when Bootstrap 4.0.0 was released, Angular CLI team addressed it with the release of 1.7.0.

Related

Nuxt 3 Uncaught ReferenceError: require is not define

Nuxt3 project
npm run build
npm run start
Nuxi 3.0.0 15:16:13
ℹ Node.js version: 14.21.2 15:16:13
ℹ Preset: node-server 15:16:13
ℹ Working dir: .output 15:16:13
ℹ Loading .env. This will not be loaded when running the server in production. 15:16:13
ℹ Starting preview command: node ./server/index.mjs 15:16:13
15:16:13
Listening http://[::]:3000
http://localhost:3000/
then got error in browser
entry.042ab8e0.js:19 Uncaught ReferenceError: require is not defined
at entry.042ab8e0.js:19:3018
upgrade my node 14 to 18 then still got the same error
Short answer: ordered-uuid library is designed to be used by a "traditional" Node backend and not for frontend.
Longer answer: require is something coming from CommonJS, which is what NodeJs uses. It was used as a way to dynamically import modules. However since the introduction to JavaScript Modules in ES6 (aka JS 2015 aka ECMAScript 2015, aka ECMAScript 6) import and export are the new standard of doing things. Also Nuxt follows ES
require is not recognised by ES6 and thus the reason why you get this error. Since ordered-uuid hasn't been updated in the last 6 years. I suggest you to find something that suits your needs more. For example: https://github.com/danielboven/ordered-uuid-v4
npm install ordered-uuid-v4
This library has both a CommonJS compatible approach as well as a ES6 compatible approach.
Nuxt actually has a nice page explainting everything about CommonJS, ES Modules in depth: take a look here.

Angular ERROR: PostCSS received undefined instead of CSS string

Trying to build an Angular project and I'm getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time troubleshooting it with no luck and appreciate any help.
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
This can sometimes happen if node-sass was compiled for a different version of Node.js than you're currently running (ie if you've recently changed your Node.js version). You can fix that with:
npm rebuild node-sass
if you are using webpack, and trying to use sass-loader, also add sass
I had this same issue when attempting to test an Angular library, and the issue was I had [``] instead of [] in the styles property of my component metadata.
Wrong
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [``],
Right
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [],
I had similar problem. I was trying to build an angular library and the message below appeared:
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'library-name'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
See "/tmp/ng-itlEgm/angular-errors.log" for further details.
[12:03:38] 'compile' errored after 17 s
[12:03:38] Error: Command `ng build library-name --prod` exited with code 127
at ChildProcess.handleSubShellExit (/node_modules/gulp-run/command.js:166:13)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at ChildProcess.EventEmitter.emit (domain.js:505:15)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
[12:03:38] 'build' errored after 17 s
I was using gulp-run to execute the command ng build library-name --prod. But, executing the command ng build library-name --prod directly on the terminal, the log error was smaller, but similar too.
The problem was in one component. The component had one styleURL (Angular component decorator), like this:
...component.css
but, the library uses scss. So, I changed the path to:
...component.scss
and I executed the command 'ng build library-name --prod'. So, the error didn't appear again.
I was using NVM v0.35.2 (allow to have more than one NodeJS version installed in my machine); NodeJS v12.18.2; Ubuntu x64 18.0.4 LTS and Angular CLI 9.1.9.
I faced the same situation now and the command that helped me is -
npm i node-sass -D
Check the node version, see if the version of node changes cause this problem. I use node version 16.14.2 which occured this error, after switch to 12.16.1 it works well. Just check your node-sass and node version will find a way out.
This can happen due to change in version of node. I had same issue with a NUXT app. What I did was
using yarn, in the root directory of your project, run yarn. But if you're using npm run npm install
start your project again.

How to fix Firebase Analytics Plugin install error

I am trying to install firebase analytics plugin in my ionic project using
sudo ionic cordova plugin add cordova-plugin-firebase-analytics
But i get this as my error and the plugin isnt installed. I have tried pod install and pod update but it still gives the same error
> cordova plugin add cordova-plugin-firebase-analytics
Installing "cordova-plugin-firebase-analytics" for ios
Failed to install 'cordova-plugin-firebase-analytics': undefined
CordovaError: Promise rejected with non-error: '/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/2.3.0/universal-darwin18/rbconfig.rb:215: warning: Insecure world writable dir /Users/villifixinc/Documents/TravelApp in PATH, mode 040777\n/Library/Ruby/Gems/2.3.0/gems/claide-1.0.3/lib/claide/command.rb:439:in `help!\': \u001b[31m[!] You cannot run CocoaPods as root.\u001b[39m (CLAide::Help)\n\n\u001b[4mUsage:\u001b[24m\n\n $ \u001b[32mpod\u001b[39m \u001b[32mCOMMAND\u001b[39m\n\n CocoaPods, the Cocoa library package manager.\n\n\u001b[4mCommands:\u001b[24m\n\n \u001b[32m+ cache\u001b[39m Manipulate the CocoaPods cache\n \u001b[32m+ env\u001b[39m Display pod environment\n \u001b[32m+ init\u001b[39m Generate a Podfile for the current directory\n \u001b[32m+ install\u001b[39m Install project dependencies according to versions from a\n Podfile.lock\n \u001b[32m+ ipc\u001b[39m Inter-process communication\n \u001b[32m+ lib\u001b[39m Develop pods\n \u001b[32m+ list\u001b[39m List pods\n \u001b[32m+ outdated\u001b[39m Show outdated project dependencies\n \u001b[32m+ repo\u001b[39m Manage spec-repositories\n \u001b[32m+ setup\u001b[39m Setup the CocoaPods environment\n \u001b[32m+ spec\u001b[39m Manage pod specs\n \u001b[32m+ update\u001b[39m Update outdated project dependencies and create new Podfile.lock\n\n\u001b[4mOptions:\u001b[24m\n\n \u001b[34m--silent\u001b[39m Show nothing\n \u001b[34m--version\u001b[39m Show the version of the tool\n \u001b[34m--verbose\u001b[39m Show more debugging information\n \u001b[34m--no-ansi\u001b[39m Show output without ANSI codes\n \u001b[34m--help\u001b[39m Show help banner of specified command\n\tfrom /Library/Ruby/Gems/2.3.0/gems/cocoapods-1.8.4/lib/cocoapods/command.rb:47:in `run\'\n\tfrom /Library/Ruby/Gems/2.3.0/gems/cocoapods-1.8.4/bin/pod:55:in `<top (required)>\'\n\tfrom /usr/local/bin/pod:22:in `load\'\n\tfrom /usr/local/bin/pod:22:in `<main>\'\n'
at cli.catch.err (/usr/local/lib/node_modules/cordova/bin/cordova:29:15)
at process._tickCallback (internal/process/next_tick.js:68:7)
[ERROR] An error occurred while running subprocess cordova.
cordova plugin add cordova-plugin-firebase-analytics exited with exit
code 1.
Re-running this command with the --verbose flag may provide more
information.
try installing the older version of the plugin. version 2.0.3 should fix your problem.

Ionic3 Execution failed for task ':app:transformClassesWithDexBuilderForDebug'

I have been dealing with this for the past 2 weeks now.I'm building an application with Ionic3. Everything worked fine, Untill I install phonegap push plugin. Then I start to get this error
Execution failed for task ':app:transformClassesWithDexBuilderForDebug'. > com.android.build.api.transform.TransformException: java.lang.IllegalStateExce ption: Dex archives: setting .DEX extension only for .CLASS files
I have made research about this and none of the solution seemed to work for me. I have done below to app level build.gradle
defaultConfig {
multiDexEnabled true
}
i also added below code
dependencies {
compile 'com.android.support:multidex:1.0.1'
}
Then I started gettin below error
Execution failed for task ':app:transformClassesWithMultidexlistForDebug'.
> java.io.IOException: Can't write
[C:\ionic\brinmiz\platforms\android\app\build
\intermediates\multi-dex\debug\componentClasses.jar] (Can't read
[C:\ionic\brinmiz\platforms\android\app\build\intermediates\transforms\desugar\debug\17.jar(;;;;;;**.class)] (Duplicate zip entry [17.jar:android/support/v4/media/RatingCompat$1.class]))
This is my Ionic info
cli packages:
#ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 7.0.0 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.0.2
Node : v6.10.2
npm : 3.10.10
OS : Windows 8
Environment Variables:
ANDROID_HOME : C:\Users\Dd\AppData\Local\Android\sdk
Misc:
backend : legacy
Like I said, I have been on this for the past 2 weeks. I really need your solution
As explained here by the official documentation of Push Plugin, there is a known incompatibility between Push Plugin and another plugins that "are using an outdated way to declare dependencies such as android-support or play-services-gcm".
You can try to install cordova-android-support-gradle-release that will align various versions of the Android Support libraries specified by other plugins to a specific version.
cordova plugin add cordova-android-support-gradle-release --fetch
Also you can try to downgrade your cordova-android from 7.0.0 to 6.3.0 because there are also known issues with 7.x+. Delete your plugin folder(make sure you have all of them declared in config.xml) and run:
cordova platforms rm android
cordova platforms add android#6.3.0
If nothing do the job, update your answer with all the plugins used by your application using the next command and I will try to debug for you.
cordova plugin ls

CordovaError: Platform ios already added

I am running on OS X El Capitan. I am working with VSTS and have the TACO plug installed and also have an ios agent running.
I am following these steps trying to build for IOS.
https://www.visualstudio.com/en-us/docs/build/apps/mobile/cordova-build
I have an agent running in interatice mode:
https://www.visualstudio.com/en-us/docs/build/admin/agents/v2-osx
However, the Cordova build step is failing and I cannot understand why after checking all the steps a few times. See bolded error.
***************************************************************************** Finishing: npm install
****************************************************************************** Starting: Cordova Build ios
============================================================================== Task : Cordova Build Description : Build a hybrid app project
based on the Cordova CLI, Ionic CLI, TACO CLI, or other
Cordova-compliant CLI Version : 1.3.9 Author : Microsoft
Corporation Help : More
Information
============================================================================== DEVELOPER_DIR was undefined DEVELOPER_DIR for build set to
/Applications/Xcode8.0.app/Contents/Developer Input to
determineIdentity:
1 valid identities found
XXX
(YGKU7EWJD4)","keychain":"/Users/jordanmc/Documents/repos/myApp/1/s/_tasktmp.keychain"}
Input to determineProfile:
XXX Got rid of som sensitive info
Module cache at /Users/jordanmc/.taco_home/node_modules cordova
already installed. Adding Xcconfig update hook Module cache at
/Users/jordanmc/.taco_home/node_modules cordova already installed.
Adding support plugin. cp: no such file or directory:
/Users/jordanmc/Documents/repos/myApp/resources/ios/icon/icon-40#3x.png
cp: no such file or directory:
/Users/jordanmc/Documents/repos/myApp/resources/ios/icon/icon-83.5#2x.png
Removing Xcconfig update hook { CordovaError: Platform ios already
added.
at /Users/jordanmc/.taco_home/node_modules/cordova/6.4.0/node_modules/cordova-lib/src/cordova/platform.js:130:31
at _fulfilled (/Users/jordanmc/.taco_home/node_modules/cordova/6.4.0/node_modules/q/q.js:787:54)
at self.promiseDispatch.done (/Users/jordanmc/.taco_home/node_modules/cordova/6.4.0/node_modules/q/q.js:816:30)
at Promise.promise.promiseDispatch (/Users/jordanmc/.taco_home/node_modules/cordova/6.4.0/node_modules/q/q.js:749:13)
at /Users/jordanmc/.taco_home/node_modules/cordova/6.4.0/node_modules/q/q.js:557:44
at flush (/Users/jordanmc/.taco_home/node_modules/cordova/6.4.0/node_modules/q/q.js:108:17)
at _combinedTickCallback (internal/process/next_tick.js:67:7) Task failed
> at process._tickCallback (internal/process/next_tick.js:98:9) name: 'CordovaError', message: 'Platform ios already added.',
code: 0, context: undefined }
****************************************************************************** Finishing: Cordova Build ios
****************************************************************************** Starting: Post Job Cleanup
****************************************************************************** Cleaning any cached credential from repository: XXX
****************************************************************************** Finishing: Post Job Cleanup
****************************************************************************** Finishing: Build
I have this configured:
Any help would be great!

Resources