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!
Related
Context: I'm migrating from ngJs to ng10, the application runs normally when I not use the --prod flag
The thing is: when i use --prod flag the routes doesn't load and i am super clueless why not.
The only difference I see printing the "next" attribute on the $routeChangeStart is that the "next" object on --prod mode doesnt have an attribute called "locals"
2nd. weird thing: the $routeChangeStart is triggered when i change the URL on the URL bar as it should be, cus the $routeChangeStart is printed every time i change the URL
3rd. weird thing: for testing purposes i change templateUrl in the config for a template:'<div>Arcade PvP silly text</div>' and it doesnt load either, and as far i see, the controller of any view never triggers.
Pls help.
Angular-CLI 10.0.5
Angular 1.7.6 bootstraped over Angular 10.0.6
Okay, I manage to understand more deeply the reasons of this behavior and manage to make a workaround, gonna documentate it here:
This is an application made in AngularJS (1.7.x) bootstrapped over Angular 10.0.5
Deploying the application with ng serve --configuration=dev makes it work as expected after the normal long process of configure the different index.ts and convert everything from *.js to *.ts
The reason of the issue is located in the angular.json:
{
"projects":{
[project_name]:{
"architect":{
"build":{
"configurations":{
"production":{
...
"optimization":true <------- THIS
}
...
}}}}}}
The optimization flag effectively makes the bundle very lightweight and ng build --prod compiles normally. But as I mention in the question, the problem occurs at runtime: the routes "load" but the HTML never renders for any route configured, therefore ANY of the controllers either runs.
In deep investigation, the optimization flag tells the angular-cli webpack to run the minification over the JS, and by past experience, AngularJS seems to be tricky to receive the minifications/uglify processing all due to the mangle process, my problem is one of the reasons why.
Angular-CLI's Webpack runs TerserPlugin to make the minification and I need to configurate it to avoid using mangle, Angular now allows to use a custom webpack configuration file to add rules, this is achieved like this:
create a new file in the project base folder, let's say named custom-webpack.config.js
Reference this file in the angular.json build:
{
"projects":{
[project_name]:{
"architect":{
"build":{
"builder":"#angular-builders/custom-webpack:browser",
"options":{
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
},
...
}
}}}}}}
In the file, let's do this:
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: true,
terserOptions: {
mangle: false,
ie8:false,
safari10:false
}
}),
],
}
}
And voila! The minification occurs, but not the mangle, the application will reduce it's bundle size as expected (mostly) and the angular-route will work normally.
I wanted to do an Angular graph for my current project in StackMEAN, and I found this solutions:
https://www.npmjs.com/package/grunt-angular-modules-graph
https://www.npmjs.com/package/grunt-angular-architecture-graph
But, I don't understand how it works, and how I can configured it correctly.
Which is the Gruntfile.js? It's the Gruntfile.js that is inside my node_modules/grunt-angular-architecture-graph? Or another?
I'm not sure about how to modificated that file:
grunt.initConfig({
'modules-graph': {
options: {
// Task-specific options go here.
},
your_target: {
files: {
'destination-file.dot': ['src/*.js']
}
},
},
});
What is exactly destination-file.dot? Where is it located? And what is ['src/*.js']? Is it my code source? What happens if I got my source into folders?
In the other hand, I don't know how to run Grunt task, or if they are
automatically done when I do "npm install".
Also, is there solution more easy to do a Angular graph?
First of all I don't know if you're really using MEAN.JS, or another mean stack project. If you're using the latest MEAN.JS I believe it now uses only Gulp instead of Grunt. Eitherway if you see a file named gruntfile.js in your project root directory, then you're good to go.
Since grunt-angular-modules-graph advises to use grunt-angular-architecture-graph instead, I'll give some instructions regarding it.
As stated in grunt-angular-architecture-graph docs, you just have to enable its task in your project's gruntfile.js file with this line:
grunt.loadNpmTasks('grunt-angular-architecture-graph');
Then add the following code block, where you must set the path for all your js files (related with Angular):
angular_architecture_graph: {
diagram: {
files: {
// "PATH/TO/OUTPUT/FILES": ["PATH/TO/YOUR/FILES/*.js"]
"architecture": [
"<%= projectConfig.app %>/<%= projectConfig.project %>/**/*.js"
]
}
}
}
Then you have to register the task:
grunt.registerTask('diagram', ['angular_architecture_graph']);
After this configuration you can use Grunt to run the task by going to your project root directory (where your gruntfile.js is located) and do the following command in the console:
grunt diagram
If everything is set correctly the task should be executed.
For more information regarding Grunt and how to create and register task, I suggest reading the official Grunt documentation.
I've created a Github repo that has all the source code related to this question. I'm able to load build/index.html in the browser after running npm install. However, when I view the sources tab in Chrome, I don't see the source maps associated with the .tsx files.
Here's a screenshot of what I see:
I've added sourceMap: true in my tsconfig.json as well as debug: true and devtool: "source-map" in my webpack.config.json. Any thoughts on what I'm missing here?
EDIT:
This might be a silly question, but do you have to use webpack-dev-server in order to see the sourcemaps?
Your tsconfig.json might be well.
Try in your webpack.config.js either devtool: "inline-source-map" or remove the two options od debug and devtool complete.
In my case I don't need them.
I had to add a filepath for the sourcemap file. Take a look at the output part of this webpack.config.js:
https://github.com/nwinger/reactreduxtodo/blob/master/webpack.config.js
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.
I have "angular-i18n" installed as a bower dependency.
When I run grunt serve or grunt build I have receive warning:
angular-i18n was not injected in your file. Please go take a look in
"/$APP_ROOT/bower_components/angular-i18n" for the file you need, then
manually include it in your file.
How can I remove this message?
Does making grunt insert this file into my index.html remove this warning?
Background
It appears that your Grunt tasks are using wiredep to look at your Bower dependencies and inject the tags for loading their associated files (link for CSS, script for JS, etc) into your HTML.
wiredep does this by looking at the bower.json file on your project to figure out what you need, then looking in the bower.json file of each dependency to figure out what they need, and so on. Having developed a dependency tree, wiredep uses the main property in the bower.json files to determine what files from each needed package should be linked into your HTML.
When a package does not have an appropriate bower configuration (missing bower.json or missing/improper main property), wiredep warns you about that problem so that you know it couldn't automatically add what you need. In other words, it's telling you that not all assets have been added to your built HTML, and that you need to manually intervene to add what's missing.
General solution
Generally, there is nothing you can do in your own code to correct this. Manually linking the file in your HTML (outside of the wiredep marked areas so as to avoid having it overwritten) will ensure your project works. wiredep, however, will always warn you when it runs because the package itself still has the problem. You'd need to open an issue to the owner of the problem package in order to ask them to correct their packaging meta info.
The project you're having issues with
I searched bower for the angular-i18n package and found that the project is hosted at https://github.com/angular/bower-angular-i18n . If you look at angular-i18n's bower.json you can see that it is missing the main property. This is why the warning is being issued.
As it turns out, though, it seems appropriate that this project does not offer a main property. The documentation for angular-i18n shows that you should bower install it, then manually link to the file that is appropriate for your desired locale. It would not be appropriate for this package to list a main file because it provides many files, none of which should be dictated as necessary by the package--it's a developer choice.
A possible solution for this case
If the warning really bothers you, or you do not like the need to manually link to the file, you could fork this package to your own GitHub account and modify the bower.json file to point main to the file you want loaded. Then you would remove angular-i18n as a dependency for your project, and add your fork's repo as a dependency instead.
Caveats:
This may cause issues keeping up to date if you are unfamiliar with maintaining Git repos/forks.
This will only work if angular-i18n is listed as an explicit dependency of your own project and is not being loaded in as a dependency for another project. If another project is loading this package, you'd have to start forking projects all the way down the tree such that you could override the configuration of each.
All in all, in this case it's probably best to manually link to the file you want and ignore the warning.
I'm getting this error message using angular-i18n in a yeoman project. The wiredep grunt task makes this error message. There are 2 solutions:
1. Exclude angular-i18n and include the file manually in the index.html
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
exclude: [
'bower_components/angular-i18n'
]
}
}
index.html
<script src="bower_components/angular-i18n/angular-locale_de-de.js"></script>
or:
2. Override/Set main attribute of bower_components/angular-i18n/bower.json
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
overrides: {
'angular-i18n': {
'main': 'angular-locale_de-de.js'
}
}
}
}
I choose to go with the second option overriding the main attribute. This way in the index.html the angular-i18n library still gets automatically injected by the grunt task.