I have the problem when I try to add the latest bootstrap version with
npm install bootstrap
After that, I got an error message when I tried to run it.
ng serve --open
I Add Bootstrap in angular.json
like this
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
And the error message is
ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve '...\node_modules\bootstrap\dist\css\bootstrap.min.css' in '...'
Why did I get the error message?
Delete "../node_modules/bootstrap/dist/css/bootstrap.min.css", in the Angular.json.
Try add this #import "~bootstrap/dist/css/bootstrap.css"; to your style.css file.
Ref: Styling Angular CLI v6 apps with Bootstrap
If the project has a test runner like Karma the Angular.json file has two styles property:
1- projects -> projectName -> architect -> build -> options
2- projects -> projectName -> architect -> test -> options
Maybe you just change styles in the test section and the build section has old styles.
In the Angular 6 you can add bootstrap to two files:
Inside the angular.json:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Inside the angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
Inside the styles.css:
/* You can add global styles to this file, and also import other style files */
#import "~bootstrap/dist/css/bootstrap.css";
Note: If you use the first or second way, it's needed to cancel the running application, that means, if ng serve is active you must exit the app with Ctrl + C, but in the third way, it's not needed to cancel the application.
In the new version of angular, use node_modules/bootstrap/dist/css/bootstrap.min.css instead of ../node_modules/bootstrap/dist/css/bootstrap.min.css
So in angular.json file style attribute will look like
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
NOTE: if ng serve is already running then you may need to stop and run it again after doing the above changes. Happy coding :)
In angular, We have to add the direction of the bootstrap we installed.
Which means steps are as follows to use bootstrap in angular.
1. npm install bootstrap
Then we have to add the path in angular.json as follows
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css"
]
Related
This is my first attempt at building an npm package that includes C++ code. I thought that I had everything set up properly because, while working in the project folder for the package itself, npm i or node-gyp rebuild was working just fine.
But now that I've published the package, and I'm trying to use that package as a dependency in another project, installation is failing during compilation, when trying to include an important C header file:
CXX(target) Release/obj.target/ar_signal_monitor/ar-signal-monitor-node.o
../ar-signal-monitor-node.cpp:1:10: fatal error: 'napi.h' file not found
#include <napi.h>
^~~~~~~~
1 error generated.
The header file is inside one of the package's dependencies, node-addon-api. My binding.gyp file looks like this:
{
"targets": [
{
"target_name": "ar_signal_monitor",
"cflags!": ["-fno-exceptions"],
"cflags_cc!": ["-fno-exceptions"],
"cflags": ["-Wall", "-std=c++11", "-pthread"],
"cflags_cc": ["-Wall", "-pthread"],
"sources": [
"ar-signal-monitor-node.cpp",
"ar-signal-monitor-node.h",
"ar-signal-monitor.cpp",
"ar-signal-monitor.h"
],
"include_dirs": [
"<!(node -e \"require('node-addon-api').include\")",
"node_modules/node-addon-api",
"/usr/include/node",
"/usr/local/include/node"
],
"libraries": [
"-lwiringPi"
],
"defines": ["NAPI_CPP_EXCEPTIONS"],
'conditions': [
["OS==\"mac\"", {
"defines": ["USE_FAKE_WIRING_PI"],
"libraries!": ["-lwiringPi"],
"xcode_settings": {"GCC_ENABLE_CPP_EXCEPTIONS": "YES"}
}],
["OS==\"win\"", {
"defines": ["USE_FAKE_WIRING_PI"],
"libraries!": ["-lwiringPi"]
}],
],
}
]
}
I'm trying to use "include_dirs" to tell the compiler where to find the <napi.h> header file. I think that perhaps the problem I have is that the installation process wants to compile my C++ code first, and only after that's successfully done then load the dependent npm packages where the header file I need for successful compilation lives.
Is there a way around this problem? Is it a different problem than I think it is? I tried first including node-addon-api in the client project, but that didn't help. (And even if it had worked, that wouldn't be any better than a temporary word-around.)
Full code for the project can be found here: https://github.com/kshetline/rpi-acu-rite-temperature
I'd been thinking I'd needed to do something different in my binding.gyp file, but the solution (or, at least, a solution) turned out to be something I could do in my package.json:
"scripts": {
"preinstall": "npm i node-addon-api",
I have followed many tutorials, but as of yet, I did not manage to make PrimeNG's Editor module to show up! (Other modules like Toast or buttons are working fine, it's only Editor that is not working).
So here is what I did:
Import module in app.module.ts
import { EditorModule } from 'primeng/editor';
Installed packages
npm install quill --save
npm install #types/quill --save
Updated angular-cli.json
"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ]
"scripts": [ "../node_modules/quill/dist/quill.js" ]
Inserted in HTML in 2 different ways
<p-editor [(ngModel)]="text" [style]="{'height':'320px'} ngDefaultControl"></p-editor>
<form style="text-align: center; margin: 0 auto; width: auto" [formGroup]="avisoForm" (ngSubmit)="atualizarCargo()">
...
<p-editor formControlName="msgAviso" [style]="{'height':'320px'}" ngDefaultControl></p-editor>
</form>
Reference them in TS file
this.avisoForm = new FormGroup({
msgAviso: new FormControl,
titAviso: new FormControl
})
text: string;
Yet it does not show anything to the end-user, even though the p-editor tag is shown there:
End-User Screen
I think it could be a CSS problem, but I have checked on the CSS files, but I could barely retrieve a tag because it does not show anything in the page. (I have searched the one from PrimeNG original website, it does a tag but it's not in the CSS either).
I have searched on many sources, yet I haven't found any answer to solve that problem, can someone help me out? Thanks!
Sources:
https://github.com/primefaces/primeng/issues/807
PrimeNg Error: Quill is not defined
http://embed.plnkr.co/8vzhESEWbUseFcSqttH5/
Just now I created a project for PrimeNg Editor
Created new angular project with latest Version 6
npm install primeng --save latest > 6.0.0
npm install quill --save
Edit angular.json. Update it carefully If Your angular.json and node_module are at same level of tree. The Edit like below I edited like this :
"styles": [
"src/styles.scss",
"node_modules/quill/dist/quill.core.css",
"node_modules/quill/dist/quill.snow.css"
],
"scripts": [
"node_modules/quill/dist/quill.js"
]
Import it in your module: import {EditorModule} from 'primeng/editor';
imports: [
HttpModule,
FormsModule,
BrowserModule,
ButtonModule,
TableModule,
EditorModule
],
Add html in any of the template <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor>
<p>Value: {{text1||'empty'}}</p>
And in component file give some value to text1: string
text2: string;
Github repo for reference Git
Resources of quill needs to be added to your application. Example setup with CLI is as follows;
npm install quill --save
Add Quill to scripts in angular.json
"scripts": [... "node_modules/quill/dist/quill.js"],
Add Quill css to styles in angular.json
"styles": [ ... "node_modules/quill/dist/quill.core.css",
"node_modules/quill/dist/quill.snow.css"],
I have checked this solution multiple times with new angular 7 and existing projects, it works like charm :)
If you followed the steps and you failed to display PrimeNG's Editor as it should, verify that quill.core.css and quill.snow.css exist in the folder "node_modules/quill/dist/"
If it is, try to import those files in your style.scss file like this :
#import url(../node_modules//quill/dist/quill.snow.css);
#import url(../node_modules//quill/dist/quill.core.css);
I'm sure it will work,
I am following a tutorial to make a website using angular on youtube.
I get this error when adding addons in angular.json on 8:17 like this:
Schema validation failed with the following errors:
Data path "" should NOT have additional properties(addons).
Is this because I add "addons" on angular.json, while the tutorial is adding "addon" on angular-cli.json?
There is no angular-cli.json on my directory.
I'm prety sure I am following the tutorial 100%. I think the structure between angular.json and angular-cli.json is the same:
"styles": [
"src/styles.scss",
"../node_modules/font-awesome/scss/font-awesome.scss"
],
"addons": [
"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
],
"scripts": []
addons was removed from the config according to this.
Check the docs on how to include font-awesome:
Using SASS
Create an empty file _variables.scss in src/.
Add the following to _variables.scss:
$fa-font-path : '../node_modules/font-awesome/fonts';
In styles.scss add the following:
#import 'variables';
#import '../node_modules/font-awesome/scss/font-awesome';
How to include third party jQuery library in Angular 2 application?
How to include http://keith-wood.name/calendarspicker.html jQuery library in angular 2 application?
1-In addition to install it through npm , try to include this line in your angular-cli.json file, inside apps->scripts key like this example:
{
"apps": {
"scripts": [
"../node_modules/jquery/dist/jquery.min.js"
]
}
}
2-Add this plugin to your webpack plugins in webpack.config.js (in module.exports):
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
3- Then import it in the component you need to use it, for example:
import * as $ from 'jquery';
To add an external library to an Angular 2 app you download the files and place them in your assets folder (or any folder you may chose to add) angular/src/assets/<your-library> then add the path to the library in your angular-cli.json file. If you upgrade to angular 6 the file is renamed angular.json
Here is an example of one of my angular-cli.json files
"styles": [
"../node_modules/materialize-css/dist/css/materialize.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/jqueryui/jquery-ui.js",
"../node_modules/materialize-css/dist/js/materialize.js",
"./assets/RTCMultiConnection.min.js",
"../node_modules/hammerjs/hammer.js",
"./assets/popup.js"
],
It may, however be easier to add an "angular ready" alternative like angular-bootstrap-calendar
I have a problem with adding a script to Angular 2 with ng cli outside of the node_modules folder. The script doesn't exist ( or at least I didn't find it ) in the npm registries and it's just a single file I wish to load but cannot:
This is in angular-cli.json :
"scripts": [
"assets/one-signal-sdk.js"
],
This throws a syntax error, saying:
"Unexpected token ? in JSON at position 0"
But, if I manually add the package to node_modules and load it like this:
"scripts": [
"../node_modules/one-signal/one-signal-sdk.js"
],
It's working perfectly fine. Of course, I cannot just add it manually and leave it there because no one will be able to download it via npm install.
Is there a way to add a custom script to the build? Thanks.
This should work fine
"scripts": [
"assets/one-signal-sdk.js"
],
Try to put in this file something simple like document.write("test");. If that works, the problem is specific to the content of one-signal-sdk.js.