I already work on an Angular 2 project and so far GMap and Chartjs works.
But now i have the problem that if i include an Accordeon it doesn't get formatted properly.
I included primeng and primeui via
npm install primeng --save
npm install primeui --save
and also font-awesome via
npm install font-awesome --save
this is my angular-cli.json
"styles": [
"styles.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeui/primeui-ng-all.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/primeui/primeui-ng-all.min.js"
],
and this is the resulting output so far.
resulting output
It would be nice if anyone could bring up some suggestions :-)
I found a solution by my self after a hard research ;-)
The solution is to import the .css files in the global styles.css and not in angular-cli.json
This is my new styles.css-file
/* You can add global styles to this file, and also import other style files */
#import url('../node_modules/primeng/resources/themes/omega/theme.css');
#import url('../node_modules/primeng/resources/primeng.min.css');
#import url('../node_modules/font-awesome/css/font-awesome.min.css');
And this is my new output
So maybe, if someone has the same fault this will help.
Related
I've started a simple playground project where I only have installed bootstrap (with npm install bootstrap), and the scss compiler package (with node install nose-sass).
I only need the reboot.scss code at the moment.
I would like to import it in my custom scss file and then start writing my bespoke scss code.
My scss file is in /src/scss/style.scss.
And I'm trying to import the bootstrap reboot file, which is /node_modules/bootstrap/scss/bootstrap-reboot.scss.
In my /src/scss/style.scss I wrote:
#import "../../node_modules/bootstrap/scss/bootstrap-reboot";
I need the reboot style from bootstrap. Is there a better way to do it?
Yep, you are correct.
Check this out: this is the documentation on how to do exactly what you mention.
https://getbootstrap.com/docs/4.0/getting-started/theming/#importing
I have the following structure for a web component:
-moduleA
-node_modules
-my-sass-package-a
-node_modules
-my-sass-package-b
_my-partial.scss
package.json
_my-partial.scss
package.json
styles.scss
package.json
In styles.scss I import a SCSS asset from my-sass-package-a:
#import 'my-sass-package-a/my-partial';
In my-sass-package-a/my-partial I import my-sass-package-b:
#import 'my-sass-package-b/my-partial';
sass-loader throws the following error (bur the error is really coming from the blackbox that is node-sass)
SassError: File to import not found or unreadable:
my-sass-package-b/my-partial
The following SOs do not help and are not specifically addressing my context/case:
https://stackoverflow.com/a/35018624/1258525 (this one does not work because they are hard coding the nested depth package, I cannot hard code "my-sass-package-b" into my includePaths
Importing Sass through npm (this one is not working with SASS npm packages but relative SASS assets)
This is issue is one of depth resolution in a nested dependencies.
Is there a way to hook into node-sass resolution and provide hints to look in nested node_module at each resolution root context?
Is there a way to change node-sass options to recursively look for SASS packages in nested node_modules without harding coding my-sass-package-b into my includePaths, again this is not an option for me. (I do not see a node-sass option that help my scenario)
I am trying to import some types from #types/webgl2 in my project.
I have followed every bit of advice mentioned here:
TypeScript typings give me "index.d.ts is not a module"
Added this to the top: import 'webgl2';
I have made sure "modeResolution" is "true" in tsconfig.json
I added a line "types":["webgl2"] to my tsconfig.json
Added "#types/webgl2": "0.0.4" to both devDependencies and dependencies in package.json.
Did an npm install in my project folder:
npm WARN package.json webgl#0.0.1 No README data
npm WARN package.json Dependency '#types/webgl2' exists in both dependencies and devDependencies, using '#types/webgl2#0.0.4' from dependencies
I can easily see webgl2 in node_modules/#types and I can also see the declaration for all errored symbols under:
declare var WebGl2RenderingContext {
and I still get these errors:
(multiple lines)
Cannot find name 'WebGl2RenderingContext'. Did you mean 'WebGL2RenderingContext'?
Corresoonding to:
const format = WebGl2RenderingContext.RED;
Resolved by fixing spelling mistakes.
In your tsconfig set the typeRoot:
{
"typeRoots": ["node_modules/#types"]
}
For NG9'ers, try, deleting your package-lock.json file, then:
npm i crypto
For me, I had an issue where types was specified in tsconfig so some types weren't automatically added to the global scope.
So the package in question was #types/dom-webcodecs and I added this to tsconfig like this
{
"compilerOptions": {
"types": [
"dom-webcodecs",
...
]
}
}
and after that I could access the types.
This is different than typeRoots which another answer talks about. You can explore the difference here if need be.
I am trying to add material desing to jhipster generated gateway. Although it seems it is working I am getting this warning on console;
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Could not find HammerJS. Certain Angular Material components may not work correctly.
Below lines are added to package.json dependencies
"#angular/material": "^2.0.0-beta.7",
"hammerjs": "^2.0.8",
Below lines are added to global.scss
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700');
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
Just note that if I comment out indigo-pink.css line UI becomes uglier so I conclude that this css is imported successfully when not commented.
Jhipster version is 4.5.6
What can be the reason for the warning
Edit 1: this solves the hammerjs warning https://stackoverflow.com/a/41322757/795168 , but still theme warning and problem on UI is continues
Adding angular material to monolothic jhipster project worked for me by deleting hammerjs if it is installed
npm uninstall hammerjs --save
and verify that is deleted in package.json file
Install the #angular/material library and add the dependency to package.json
npm install --save #angular/material
Import the Angular Material NgModule into your app module...
import { MaterialModule } from '#angular/material';
#NgModule({
imports: [
...
MaterialModule
],
...
})
Now that the project is set up, it must be configured to include the CSS for a theme. Angular Material ships with some prebuilt theming, which is located in node_modules/#angular/material/prebuilt-themes/.
To add an angular CSS theme and material icons to your app
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
#import '~https://fonts.googleapis.com/icon?family=Material+Icons';
please check with the link Install Angular Material
I have three installed in:
node_modules/three
I have Collada loader installed in:
node_modules/three-collada-loader
The typings seem to already include typings also for the Collada loader:
node_modules/#types/three/three-colladaLoader.d.ts
I import THREE like this and it works:
import * as THREE from 'three';
The problem is that when I'm trying to use Collada loader I get:
WARNING in ./src/app/renderer.directive.ts
23:26-45 "export 'ColladaLoader' (imported as 'THREE') was not found in 'three'
webpack: Compiled with warnings.
This is the output of ng serve command.
I instantiated the loader like this:
private loader: THREE.ColladaLoader = new THREE.ColladaLoader();
How should I use/import the loader as it's in the same THREE namespace in the typings, but it's a different npm module?
EDIT:
As workaround I can use the loader without typings like this:
var loader = require('three-collada-loader')(THREE);
have the same problem and unfortunately I don't have a solution which preserves Typescript type support.
I however use the following workaround which allows me to develop with angular2, threejs and the threejs helper modules which are located in the example folder of threejs.
First of install threejs over npm like you did.
npm install three --save
You dont need to install the three-collada-loader because its downloaded as part of the example folder of the threejs library.
Then I add the scripts I need to the angular-cli.json file in the script declaration.
...
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"assets/styles/main.scss",
"styles.css"
],
"scripts": [
"../node_modules/three/build/three.js",
"../node_modules/three/examples/js/loaders/STLLoader.js",
"../node_modules/three/examples/js/controls/TrackballControls.js"
],
...
I can reference threejs here directly from the npm module folder. Be sure that you import the threejs main library at first and then addon modules.
In my case I added STLLoader.js and TrackballControlls.js. Your Loader should be located at:
../node_modules/three/examples/js/loaders/ColladaLoader.js
Webpack will load Threejs and its modules and add them into the global namespace.
In order to silence your IDE and the Typescript compiler you can
declare THREE as any in the file in which you use threejs.
import { EventEmitter } from '#angular/core';
declare var THREE : any;
export class RenderService {
...
You may have to restart your dev server with "ng serve", to enable webpack to include your added scripts.
I hope this helps, and that somebody finds a way to use the example modules of Threejs with full typescript support.