Develop Reference

PrimeNg Editor is not showing up - Angular

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,

Angular 6 : Scripts not loading correctly from angular.json

I have not found yet the solution of this in the internet.
Angular brought this similar Github Issue , but can't find any solution there.
I have added my script files to angular.json such as (in both build & test scope):
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [
"src/assets/plugins/jquery/jquery-1.11.3.min.js",
"src/assets/plugins/jquery-ui-1.11.4.custom/jquery-ui.min.js",
"src/assets/plugins/bootstrap/js/bootstrap.min.js",
"src/assets/plugins/owl-carousel/owl.carousel.min.js",
"src/assets/plugins/bootstrap-select/js/bootstrap-select.min.js",
"src/assets/js/jquery.subscribe-better.js",
"src/assets/js/moment-with-locales.min.js",
"src/assets/plugins/countdown/jquery.plugin.min.js",
"src/assets/plugins/countdown/jquery.countdown.min.js",
"src/assets/js/theme.js"
]
I am getting the css styles but some scripts are not working correctly.
Any solution?

After a couple of hours of trial-and-error, I found out that I was putting the script paths under the json key of
/projects/project-name/architect/test/options/scripts
instead of (if not both)
/projects/project-name/architect/build/options/scripts
P.S.: It may also apply to the "styles.css not working" type of questions.

how to include jquery library in angular 2 application

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

Can´t add Bootstrap 4 in Angular 6

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"
]

Angular Cli Webpack, How to add or bundle external js files?

I am not sure how to include JS files (vendors) after switching Angular Cli from SystemJs to Webpack.
For example
Option A
I have some js files that were installed via npm. Adding script tags to the head tag like this does not work. Nor does it seem like the best way.
<head>
<script src="node_modules/some_package/somejs.js">
</head>
//With systemJs I could do this
<head>
<script src="vendor/some_package/somejs.js">
</head>
Option B
Include these js files as part of the webpack bundle. This seems like the way it probably should be done. However I am not sure how to do this as all of the webpack code seems to be hidden behind the angular-cli-webpack node package. I was thinking maybe there is another webpack config that we might have access to. But I am not sure as I didn't see one when creating a new angular-cli-webpack project.
More Info:
The js files I am trying to include need to be included before the Angular project. For example jQuery and a third party js lib that isn't really setup for module loading or typescript.
References
https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md
https://github.com/angular/angular-cli/tree/webpack

Last tested using angular-cli 11.x.x with Angular 11.x.x
This can be accomplished using scripts:[] in angular.json.
{
"project": {
"version": "1.0.0",
"name": "my-project"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false
}
}
Note: As the documentation suggests in the global library installation: if you change the value of your styles (or scripts!) property, then:
Restart ng serve if you're running it,
..to see the scripts executed in a **globalcontext via the scripts.bundle.js file.
Note: As discussed in the comments below. JS libs that support UMD modules via es6 imports such as jQuery can also be imported into your typescript files using the es6 import syntax. For example: import $ from 'jquery';.

There is a subtle difference to using scripts:[] then to adding something to the <head> with <script>. Scripts from scripts:[] get added to the scripts.bundle.js that gets always loaded in the body tag and will thus be loaded AFTER scripts in <head>. Thus if script loading order matters (i.e. you need to load a global polyfill), then your only option is to manually copy scripts to a folder (e.g. with a npm script) and add this folder as an asset to .angular-cli.json.
So if you really depend on something being loaded before angular itself (Option A), then you need to copy it manually to a folder that will be included in the angular build and then you can load it manually with a <script> in <head>.
Thus, for achieving option a you have to:
create a vendor folder in src/
add this folder as an asset to .angular-cli.json:
"assets": [
"assets",
"favicon.ico",
"vendor"
]
copy your vendor script node_modules/some_package/somejs.js to vendor
load it manually in index.html:
<head>
<script src="vendor/some_package/somejs.js">
</head>
However most of the time you only need this approach for packages, that need to be available globally, before everything else (i.e. certain polyfills). Kris' answer holds true for Option B and you get the benefit of the webpack build (Minification, Hashes, ...).
However if your scripts need not be globally available and if they are module-ready you can import them in src/polyfills.ts or even better import them only when you need them in your specific components.
Making scripts globally available via scripts:[] or via manually loading them brings it own set of problems and should really only be used, when it is absolutely necessary.

You need to open file .angular-cli.json file and need to search for
"scripts:" or if you want to add external css you need to find the word "styles": in the same file.
as an example shown below you will see how the bootstrap Js(bootstrap.min.js) and bootstrap CSS(bootstrap.min.css) includes in .angular-cli.json:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
For sure if you have your own js file you can add your file path here in .angular-cli.json at the same place(in "scripts":[]).

You might want to have a look at this page:
https://github.com/angular/angular-cli#global-library-installation
It show the basics of how to include .js and .css files
Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.

I havn't used angular-cli before but I'm currently working with an Angular/Webpack build. In order to provide my application with jQuery and other vendors I use webpack's plugin, ProvidePlugin(). This will typically sit in your webpack.config.js: Here's an example for jquery, lodash and moment libraries. Here's a link to the documentation (which is vague at best)
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash',
moment: 'moment',
})
]
Incredibly, it actually allows you to use it right away, providing all other webpack setup has been done correctly and have been installed with npm.