I am using Yeoman and the cg-angular generator to scaffold an angular app. This was initially working fine, but I recently upgraded angular-bootstrap from 0.10 to 0.11 to get hold of a new feature regarding modal sizes. After doing this I noticed that I get the following errors in the developer console on Chrome.
GET http://localhost:9001/fonts/glyphicons-halflings-regular.woff angular-ui-router.js:3702
GET http://localhost:9001/fonts/glyphicons-halflings-regular.ttf :9001/fonts/glyphicons-halflings-regular.ttf:1
I am using version 3.1.1 of bootstrap.
If I upgrade bootstrap to the latest which is 3.3.4. Then I get some different errors:
GET http://fonts/glyphicons-halflings-regular.woff2 net::ERR_NAME_NOT_RESOLVED angular-animate.js:442
GET http://fonts/glyphicons-halflings-regular.woff net::ERR_NAME_NOT_RESOLVED fonts/glyphicons-halflings-regular.woff:1
GET http://fonts/glyphicons-halflings-regular.ttf net::ERR_NAME_NOT_RESOLVED fonts/glyphicons-halflings-regular.ttf:1
I should say that I am seeing these errors when running locally with grunt serve
Also, if I upgrade boostrap, but keep angular-bootstrap at 0.10 then I don't have these problems.
I also, have the following my Gruntfile.js:
copy: {
main: {
files: [
{src: ['bower_components/font-awesome/fonts/**'], dest: 'dist/', filter: 'isFile', expand: true},
{src: ['bower_components/bootstrap/fonts/**'], dest: 'dist/', filter: 'isFile', expand: true}
]
}
}
Although, like I said I am seeing these missing glyphicons when running locally, so this grunt task shouldn't be coming in to play.
I've grepped through the angular-bootstrap code and what is confusing is that there doesn't seem to be any direct references to the glyphicon fonts in their code, so it's a bit odd how upgrading this module could cause these errors.
Has anyone else had any issues with glyphicons when upgrading angular-bootstrap?
The less compilation happens in the browser when you're running the site with grunt serve so the default path for the fonts (../fonts/) is not relative to the bootstrap less files. To fix it just override the font path (in app.less by default)
#icon-font-path: "bower_components/bootstrap/fonts/";
Maybe something in angular-bootstrap started using glyphicons in 0.11 that's why you see this after upgrade.
Related
I use Exposify to keep a angular external while using Browserify to run a build:
expose config:
{
expose: {
angular: "angular",
jquery: "jQuery",
mathjax: "MathJax"
}
};
With the previous versions of angular-ui-router, I could require them and not have this issue. With all 1.x.x versions I start seeing WARNING: Tried to load angular more than once. in the browser console.
And if I inspect the JS bundle, Angular.JS source has been included, and therefore is running twice. Am I doing something very wrong, are angular-ui-router doing something wrong, is Exposify failing, or is this behaviour expected and I need to change my approach?
I have built an angular website working perfectly fine in chrome, but it is failing in IE because of ES6
I am running angular using cdn with a node server which is only used for serving the webpage, no code is there other than listening to port.
I want to add babel into that, but all the examples I am finding are for server code or using gulp or webpack. Is there any way to directly integrate babel for my purpose or I definitely need to have webpack\gulp configured.
Included the directory structure of the code, all the files are getting linked in index.html
Since babel changes your javascript I don't think you can include it in your html page you need to have it in a grunt or such pipeline so the javascript is transformed and then the transformed javascript is served:
gulp.task('build', [], function () {
return gulp.src('./app/index.html')
.pipe(preprocess({context: production_config.context}))
.pipe(babel({ presets: ['env'] }))
.pipe(gulp.dest('./build');
});
Then serve "build" instead of "app"
Maybe there's a more dynamic way
THE PROBLEM
I am trying to integrate yfiles for HTML into an Angular 2 application that uses the Angular CLI. I am using the latest version of Angular 2 and the latest BETA release of the CLI.
I have installed the types using npm install --save #types/yfiles.
I have placed the required yfiles folders in my project and have updated angular-cli.json to include the required sytles and scripts:
"styles": [
"../lib/yfiles.css"
],
"scripts": [
"../lib/license.js",
"../lib/yfiles/view-component.js",
"../lib/yfiles/view-layout-bridge.js",
"../lib/yfiles/layout-hierarchic.js",
"../lib/yfiles/layout-tree.js",
"../lib/yfiles/router-polyline.js",
"../lib/yfiles/router-other.js"
],
I have confirmed that a build includes these scripts in the bundled scripts output after running ng build.
When trying to reference yfiles the autocomplete works in the IDE (latest Webstorm):
graphComponent: yfiles.view.GraphComponent;
constructor(private element: ElementRef,
injector: Injector,
resolver: ComponentFactoryResolver) { }
ngAfterViewInit() {
let containerDiv:HTMLDivElement =
this.element.nativeElement.getElementsByClassName('graph-control-container')
[0];
this.graphComponent = new yfiles.view.GraphComponent(containerDiv);
}
The project compiles and runs when ng serve is issued BUT when I navigate to a route that activates the component that is trying to use yfiles, an error is thrown and reported in the console:
error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./BrowseVisualisationsComponent class BrowseVisualisationsComponent - inline template:0:0 caused by: Cannot read property 'GraphComponent' of undefined
I have tried importing the yfiles modules - for example:
import 'yfile/view-component'
This just prevents ng serve from building the application:
ERROR in ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts
Module not found: Error: Can't resolve 'yfiles/view-component' in '/home/VMdev/Documents/iotahoe_client/src/app/shared/table-relationship-visualisation'
# ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts 12:0-31
# ./src/app/app.module.ts
# ./src/main.ts
# multi main
Any assistance appreciated.
The scripts provided in the app.scripts array will just be loaded as if they would have been referenced with regular <script> tags - no module resolving will take place at all.
However, the yFiles modules you provided in the scripts array are "meta modules" that would load the actual implementation files using AMD/CommonJS-style define/require statements.
Therefore, in order to load the yFiles functionality with angular-cli, you will have to provide the actual implementation files directly:
"scripts": [
"./assets/yfiles/license.js",
"./assets/yfiles/lib/yfiles/impl/lang.js",
"./assets/yfiles/lib/yfiles/impl/graph-core.js",
"./assets/yfiles/lib/yfiles/impl/core-lib.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-core.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-default.js",
"./assets/yfiles/lib/yfiles/impl/algorithms.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-template.js",
"./assets/yfiles/lib/yfiles/impl/graph-styles-other.js",
"./assets/yfiles/lib/yfiles/impl/graph-binding.js",
"./assets/yfiles/lib/yfiles/impl/layout-core.js",
"./assets/yfiles/lib/yfiles/impl/graph-layout-bridge.js",
"./assets/yfiles/lib/yfiles/impl/layout-polyline.js",
"./assets/yfiles/lib/yfiles/impl/layout-router.js",
"./assets/yfiles/lib/yfiles/impl/layout-tree.js",
"./assets/yfiles/lib/yfiles/impl/layout-hierarchic.js"
],
It's unfortunate that the modules can't be resolved automatically with this approach even though the yFiles modules adhere to the UMD pattern, but I don't see a better option to make this work with angular-cli right now.
To generate the list of the yFiles implementation modules in the correct order, you can use our yeoman generator with the "script-tags" option:
https://www.npmjs.com/package/generator-yfiles-app
I have the correct versions of Compass and Sass installed on my machine and have had no issues creating sourcemaps with other projects, i.e my base set-up works.
My problem is very specific: it's with the 'yo-angular' grunt install.
I have amended the Gruntfile.js as follows (by adding the sourcemap: true flag) :
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sourcemap: true,
sassDir: '<%= yeoman.app %>/styles',
And i have changed the debug flag to false:
},
server: {
options: {
debugInfo: false
}
}
},
This works fine, throws no errors in 'grunt serve', and on inspecting the generated main.css file the references generated by the sourcemap main.css are entirely accurate.
But, oddly, the elements panel of Chrome Dev Tools refers to completely different line numbers.
The way that yo angular process builds is presumably the issue, and I notice that the files/folder structure (e.g. the _sass files are all empty) that the host is looking at are different to my dev files so maybe it's just impossible to map to them?
Quick PS: I know that many have struggled to get sass sourcemaps working at all, because of issues with Compass and so on, but just to reiterate I am not asking for help in getting a basic set-up established - I have managed that. The specific problem that I have is making the 'yo angular' stack to work with sourcemaps. I imagine that others have had the same problem. I have searched all over this and other sites to no avail and posted issues on github without a result.
Please Help and thanks in anticipation!
I'm using Yeoman 1.0 and the latest version of the Backbone generator and everything I've written is working in development, however when I $ grunt build the resulting /dist is throwing the error:
Uncaught ReferenceError: Backbone is not defined
Unfortunately, since the js has been minified, trying to debug is almost pointless. Is there a way to "build" without the minification? I've tried playing around with settings in the gruntfile but can't seem to find the right options for the right task.
Can you share your GruntFile.js to check the configurations?
By the way, you can omit the minification, don't use uglify or whatever task you have been running so, give it a try to grunt-contrib-copy task which copies the files to designated folder (prod/dist).
https://github.com/gruntjs/grunt-contrib-copy
// Configuration goes here
grunt.initConfig({
// Configure the copy task to move files from the development to production folders
copy: {
target: {
files: {
'prod/': ['dev/**']
}
}
},
});