37177

templateUrl is not working after minification

Question:

I have a website that i built with yeoman angular-fullstack. I am trying to minify the project and for the most part it works. The only issue I have is I have a popup dialog that isnt working. I have narrowed the problem down to the templateUrl command when calling on the material dialog.

controller:

function openLoginDialog(ev) { $mdDialog.show({ controller: 'loginCtrl', templateUrl: '../../Dialogs/loginDialog/loginDialog.html', targetEvent: ev, locals: { createAccount: false, charterID: null }, clickOutsideToClose: true }); }

The application is also using grunt. I belive the problem is the templateUrl's path no longer exists due to the minification. I can not however, figure out how to get around this issue and have been banging my head on a wall. I have attempted to use templateCache, but there is no way to inject all the html into the cache. I would have to copy and paste it into a javascript file and that is not maintainable. I attempted to use the script tags like so:

<script type="text/ng-template" id="loginDialogId.tpl"> <!---- HTML CONTENT ----> </script>

and then call the file byt templateCahce.get('loginDialogId'); but that did not work. I have a feeling I have to do something in the grunt file with ngTemplate but I have no idea how to do it and I cannot find any documentation that makes sense. Any help would be greatly appreciated!

Here is the grunt file:

// Generated on 2016-06-17 using generator-angular-fullstack 3.7.5 'use strict'; module.exports = function(grunt) { var localConfig; try { localConfig = require('./server/config/local.env'); } catch(e) { localConfig = {}; } // Load grunt tasks automatically, when needed require('jit-grunt')(grunt, { express: 'grunt-express-server', useminPrepare: 'grunt-usemin', ngtemplates: 'grunt-angular-templates', cdnify: 'grunt-google-cdn', protractor: 'grunt-protractor-runner', buildcontrol: 'grunt-build-control', istanbul_check_coverage: 'grunt-mocha-istanbul', ngconstant: 'grunt-ng-constant' }); // Time how long tasks take. Can help when optimizing build times require('time-grunt')(grunt); // Define the configuration for all the tasks grunt.initConfig({ // Project settings pkg: grunt.file.readJSON('package.json'), yeoman: { // configurable paths client: require('./bower.json').appPath || 'client', server: 'server', dist: 'dist' }, express: { options: { port: process.env.PORT || 9000 }, dev: { options: { script: '<%= yeoman.server %>', debug: true } }, prod: { options: { script: '<%= yeoman.dist %>/<%= yeoman.server %>' } } }, open: { server: { url: 'http://localhost:<%= express.options.port %>' } }, watch: { babel: { files: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/!(*.spec|*.mock).js'], tasks: ['newer:babel:client'] }, ngconstant: { files: ['<%= yeoman.server %>/config/environment/shared.js'], tasks: ['ngconstant'] }, injectJS: { files: [ '<%= yeoman.client %>/{app,components,Dialogs,services}/**/!(*.spec|*.mock).js', '!<%= yeoman.client %>/app/app.js' ], tasks: ['injector:scripts'] }, injectCss: { files: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/*.css'], tasks: ['injector:css'] }, mochaTest: { files: ['<%= yeoman.server %>/**/*.{spec,integration}.js'], tasks: ['env:test', 'mochaTest'] }, jsTest: { files: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/*.{spec,mock}.js'], tasks: ['newer:jshint:all', 'wiredep:test', 'karma'] }, gruntfile: { files: ['Gruntfile.js'] }, livereload: { files: [ '{.tmp,<%= yeoman.client %>}/{app,components,Dialogs,services}/**/*.{css,html}', '{.tmp,<%= yeoman.client %>}/{app,components,Dialogs,services}/**/!(*.spec|*.mock).js', '<%= yeoman.client %>/assets/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}' ], options: { livereload: true } }, express: { files: ['<%= yeoman.server %>/**/*.{js,json}'], tasks: ['express:dev', 'wait'], options: { livereload: true, spawn: false //Without this option specified express won't be reloaded } }, bower: { files: ['bower.json'], tasks: ['wiredep'] } }, // Make sure code styles are up to par and there are no obvious mistakes jshint: { options: { jshintrc: '<%= yeoman.client %>/.jshintrc', reporter: require('jshint-stylish') }, server: { options: { jshintrc: '<%= yeoman.server %>/.jshintrc' }, src: ['<%= yeoman.server %>/**/!(*.spec|*.integration).js'] }, serverTest: { options: { jshintrc: '<%= yeoman.server %>/.jshintrc-spec' }, src: ['<%= yeoman.server %>/**/*.{spec,integration}.js'] }, all: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/!(*.spec|*.mock|app.constant).js'], test: { src: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/*.{spec,mock}.js'] } }, jscs: { options: { config: ".jscsrc" }, main: { files: { src: [ '<%= yeoman.client %>/app/**/*.js', '<%= yeoman.server %>/**/*.js' ] } } }, // Empties folders to start fresh clean: { dist: { files: [{ dot: true, src: [ '.tmp', '<%= yeoman.dist %>/!(.git*|.openshift|Procfile)**' ] }] }, server: '.tmp' }, // Add vendor prefixed styles postcss: { options: { map: true, processors: [ require('autoprefixer')({browsers: ['last 2 version']}) ] }, dist: { files: [{ expand: true, cwd: '.tmp/', src: '{,*/}*.css', dest: '.tmp/' }] } }, // Debugging with node inspector 'node-inspector': { custom: { options: { 'web-host': 'localhost' } } }, // Use nodemon to run server in debug mode with an initial breakpoint nodemon: { debug: { script: '<%= yeoman.server %>', options: { nodeArgs: ['--debug-brk'], env: { PORT: process.env.PORT || 9000 }, callback: function(nodemon) { nodemon.on('log', function(event) { console.log(event.colour); }); // opens browser on initial server start nodemon.on('config:update', function() { setTimeout(function() { require('open')('http://localhost:8080/debug?port=5858'); }, 500); }); } } } }, // Automatically inject Bower components into the app and karma.conf.js wiredep: { options: { exclude: [ /bootstrap.js/, '/json3/', '/es5-shim/' ] }, client: { src: '<%= yeoman.client %>/index.html', ignorePath: '<%= yeoman.client %>/' }, test: { src: './karma.conf.js', devDependencies: true } }, // Renames files for browser caching purposes filerev: { dist: { src: [ '<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.{js,css}', '<%= yeoman.dist %>/<%= yeoman.client %>/assets/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' ] } }, // Reads HTML for usemin blocks to enable smart builds that automatically // concat, minify and revision files. Creates configurations in memory so // additional tasks can operate on them useminPrepare: { html: ['<%= yeoman.client %>/index.html'], options: { dest: '<%= yeoman.dist %>/<%= yeoman.client %>' } }, // Performs rewrites based on rev and the useminPrepare configuration usemin: { html: ['<%= yeoman.dist %>/<%= yeoman.client %>/{,!(bower_components)/**/}*.html'], css: ['<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.css'], js: ['<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.js'], options: { assetsDirs: [ '<%= yeoman.dist %>/<%= yeoman.client %>', '<%= yeoman.dist %>/<%= yeoman.client %>/assets' ], // This is so we update image references in our ng-templates patterns: { css: [ [/(assets\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the CSS to reference our revved images'] ], js: [ [/(assets\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images'] ] } } }, // The following *-min tasks produce minified files in the dist folder imagemin: { dist: { files: [{ expand: true, cwd: '<%= yeoman.client %>/assets', src: '{,*/}*.{png,jpg,jpeg,gif,svg}', dest: '<%= yeoman.dist %>/<%= yeoman.client %>/assets' }] } }, // Allow the use of non-minsafe AngularJS files. Automatically makes it // minsafe compatible so Uglify does not destroy the ng references ngAnnotate: { dist: { files: [{ expand: true, cwd: '.tmp/concat', src: '**/*.js', dest: '.tmp/concat' }] } }, // Dynamically generate angular constant `appConfig` from // `server/config/environment/shared.js` ngconstant: { options: { name: 'fndParyBoatsApp.constants', dest: '<%= yeoman.client %>/app/app.constant.js', deps: [], wrap: true, configPath: '<%= yeoman.server %>/config/environment/shared' }, app: { constants: function() { return { appConfig: require('./' + grunt.config.get('ngconstant.options.configPath')) }; } } }, // Package all the html partials into a single javascript payload ngtemplates: { options: { // This should be the name of your apps angular module module: 'fndParyBoatsApp', htmlmin: { collapseBooleanAttributes: true, collapseWhitespace: true, removeAttributeQuotes: true, removeEmptyAttributes: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true }, usemin: 'app/app.js' }, main: { cwd: '<%= yeoman.client %>', src: ['{app,components,Dialogs,services}/**/*.html'], dest: '.tmp/templates.js' }, tmp: { cwd: '.tmp', src: ['{app,components,Dialogs,services}/**/*.html'], dest: '.tmp/tmp-templates.js' } }, // Replace Google CDN references cdnify: { dist: { html: ['<%= yeoman.dist %>/<%= yeoman.client %>/*.html'] } }, // Copies remaining files to places other tasks can use copy: { dist: { files: [{ expand: true, dot: true, cwd: '<%= yeoman.client %>', dest: '<%= yeoman.dist %>/<%= yeoman.client %>', src: [ '*.{ico,png,txt}', '.htaccess', 'bower_components/**/*', 'assets/images/{,*/}*.{webp}', 'assets/icons/**/*', 'index.html' ] }, { expand: true, cwd: '.tmp/images', dest: '<%= yeoman.dist %>/<%= yeoman.client %>/assets', src: ['generated/*'] }, { expand: true, dest: '<%= yeoman.dist %>', src: [ 'package.json', '<%= yeoman.server %>/**/*', '!<%= yeoman.server %>/config/local.env.sample.js' ] }] }, styles: { expand: true, cwd: '<%= yeoman.client %>', dest: '.tmp/', src: ['{app,components,Dialogs,services}/**/*.css'] } }, buildcontrol: { options: { dir: '<%= yeoman.dist %>', commit: true, push: true, connectCommits: false, message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%' }, heroku: { options: { remote: 'heroku', branch: 'master' } }, openshift: { options: { remote: 'openshift', branch: 'master' } } }, // Run some tasks in parallel to speed up the build process concurrent: { pre: [ 'ngconstant' ], server: [ 'newer:babel:client' ], test: [ 'newer:babel:client' ], debug: { tasks: [ 'nodemon', 'node-inspector' ], options: { logConcurrentOutput: true } }, dist: [ 'newer:babel:client', 'imagemin' ] }, // Test settings karma: { unit: { configFile: 'karma.conf.js', singleRun: true } }, mochaTest: { options: { reporter: 'spec', require: 'mocha.conf.js', timeout: 5000 // set default mocha spec timeout }, unit: { src: ['<%= yeoman.server %>/**/*.spec.js'] }, integration: { src: ['<%= yeoman.server %>/**/*.integration.js'] } }, mocha_istanbul: { unit: { options: { excludes: ['**/*.{spec,mock,integration}.js'], reporter: 'spec', require: ['mocha.conf.js'], mask: '**/*.spec.js', coverageFolder: 'coverage/server/unit' }, src: '<%= yeoman.server %>' }, integration: { options: { excludes: ['**/*.{spec,mock,integration}.js'], reporter: 'spec', require: ['mocha.conf.js'], mask: '**/*.integration.js', coverageFolder: 'coverage/server/integration' }, src: '<%= yeoman.server %>' } }, istanbul_check_coverage: { default: { options: { coverageFolder: 'coverage/**', check: { lines: 80, statements: 80, branches: 80, functions: 80 } } } }, protractor: { options: { configFile: 'protractor.conf.js' }, chrome: { options: { args: { browser: 'chrome' } } } }, env: { test: { NODE_ENV: 'test' }, prod: { NODE_ENV: 'production' }, all: localConfig }, // Compiles ES6 to JavaScript using Babel babel: { options: { sourceMap: true }, client: { files: [{ expand: true, cwd: '<%= yeoman.client %>', src: ['{app,components,Dialogs,services}/**/!(*.spec).js'], dest: '.tmp' }] }, server: { options: { plugins: [ 'transform-class-properties', 'transform-runtime' ] }, files: [{ expand: true, cwd: '<%= yeoman.server %>', src: [ '**/*.js', '!config/local.env.sample.js' ], dest: '<%= yeoman.dist %>/<%= yeoman.server %>' }] } }, injector: { options: {}, // Inject application script files into index.html (doesn't include bower) scripts: { options: { transform: function(filePath) { var yoClient = grunt.config.get('yeoman.client'); filePath = filePath.replace('/' + yoClient + '/', ''); filePath = filePath.replace('/.tmp/', ''); return '<script src="' + filePath + '"></script>'; }, sort: function(a, b) { var module = /\.module\.(js|ts)$/; var aMod = module.test(a); var bMod = module.test(b); // inject *.module.js first return (aMod === bMod) ? 0 : (aMod ? -1 : 1); }, starttag: '<!-- injector:js -->', endtag: '<!-- endinjector -->' }, files: { '<%= yeoman.client %>/index.html': [ [ '<%= yeoman.client %>/{services,app,components,Dialogs}/**/!(*.spec|*.mock).js', '!{.tmp,<%= yeoman.client %>}/app/app.{js,ts}' ] ] } }, // Inject component css into index.html css: { options: { transform: function(filePath) { var yoClient = grunt.config.get('yeoman.client'); filePath = filePath.replace('/' + yoClient + '/', ''); filePath = filePath.replace('/.tmp/', ''); return '<link rel="stylesheet" href="' + filePath + '">'; }, starttag: '<!-- injector:css -->', endtag: '<!-- endinjector -->' }, files: { '<%= yeoman.client %>/index.html': [ '<%= yeoman.client %>/{app,components,Dialogs,services}/**/*.css' ] } } } }); // Used for delaying livereload until after server has restarted grunt.registerTask('wait', function() { grunt.log.ok('Waiting for server reload...'); var done = this.async(); setTimeout(function() { grunt.log.writeln('Done waiting!'); done(); }, 1500); }); grunt.registerTask('express-keepalive', 'Keep grunt running', function() { this.async(); }); grunt.registerTask('serve', function(target) { if(target === 'dist') { return grunt.task.run(['build', 'env:all', 'env:prod', 'express:prod', 'wait', 'open', 'express-keepalive']); } if(target === 'debug') { return grunt.task.run([ 'clean:server', 'env:all', 'concurrent:pre', 'concurrent:server', 'injector', 'wiredep:client', 'postcss', 'concurrent:debug' ]); } grunt.task.run([ 'clean:server', 'env:all', 'concurrent:pre', 'concurrent:server', 'injector', 'wiredep:client', 'postcss', 'express:dev', 'wait', 'open', 'watch' ]); }); grunt.registerTask('server', function() { grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); grunt.task.run(['serve']); }); grunt.registerTask('test', function(target, option) { if(target === 'server') { return grunt.task.run([ 'env:all', 'env:test', 'mochaTest:unit', 'mochaTest:integration' ]); } else if(target === 'client') { return grunt.task.run([ 'clean:server', 'env:all', 'concurrent:pre', 'concurrent:test', 'injector', 'postcss', 'wiredep:test', 'karma' ]); } else if(target === 'e2e') { if(option === 'prod') { return grunt.task.run([ 'build', 'env:all', 'env:prod', 'express:prod', 'protractor' ]); } else { return grunt.task.run([ 'clean:server', 'env:all', 'env:test', 'concurrent:pre', 'concurrent:test', 'injector', 'wiredep:client', 'postcss', 'express:dev', 'protractor' ]); } } else if(target === 'coverage') { if(option === 'unit') { return grunt.task.run([ 'env:all', 'env:test', 'mocha_istanbul:unit' ]); } else if(option === 'integration') { return grunt.task.run([ 'env:all', 'env:test', 'mocha_istanbul:integration' ]); } else if(option === 'check') { return grunt.task.run([ 'istanbul_check_coverage' ]); } else { return grunt.task.run([ 'env:all', 'env:test', 'mocha_istanbul', 'istanbul_check_coverage' ]); } } else { grunt.task.run([ 'test:server', 'test:client' ]); } }); grunt.registerTask('build', [ 'clean:dist', 'concurrent:pre', 'concurrent:dist', 'injector', 'wiredep:client', 'useminPrepare', 'postcss', 'ngtemplates', 'concat', 'ngAnnotate', 'copy:dist', 'babel:server', 'cdnify', 'cssmin', 'uglify', 'filerev', 'usemin' ]); grunt.registerTask('default', [ 'newer:jshint', 'test', 'build' ]); };

Answer1:

Have you tried openLoginDialog.$inject = ['ev', '$mdDialog']?

More info here: <a href="https://github.com/angular/material/issues/5888" rel="nofollow">https://github.com/angular/material/issues/5888</a>

Also, in general you'll want to follow best practices: <a href="https://stackoverflow.com/questions/18782324/angularjs-minify-best-practice" rel="nofollow">Angularjs minify best practice</a>

Answer2:

I was able to solve the problem. When the application got minified, all html and js files were pushed into one file. So all directories are now at the same level. So my path was ../../Dialogs/loginDialog/loginDialog.html when it should have been just ../../Dialogs/loginDialog/loginDialog.html

Recommend

  • C# TimeZone Calculation Problem
  • Copying attributes in Javascript
  • Special tensor contraction in Python
  • Sort version strings on bash
  • reactive updates in shiny app selectInput and radioButtons - ggvis
  • How to have a website splash screen (web app)
  • Symfony2 redirect to https route fails (uses wrong port)
  • Rails 3.2 from SQLite locally to Postgres on Heroku
  • Emit new line in Inno Setup preprocessor
  • How to make SASS put relative paths in its output
  • Checking a play current mode makes an error occur
  • XBee Linux Serial Port on Rasberry Pi
  • node.js POST request fails
  • CORS with socket.io
  • Prevent Tomcat from caching request during starup
  • perl, mysql - fasting way to upload a csv file into mysql?
  • Spring Cloud Microservice Architecture Confusion
  • Access Android Market through SSH tunnel
  • Sort List of Strings By Version
  • How can I sort a a table with VBA with given text condition?
  • Installing iPhone App to iPhone
  • Transactional Create with Validation in ServiceStack Redis Client
  • How to run “Deployd” on port 80 instead of port 5000 in webserver.
  • Make VS2015 use angular-cli ng at build time in a .NET project
  • Can I check if a recipient has an automatic reply before I send an email?
  • Handling un-mapped Rest path
  • Installing Hadoop, Java Exception about illegal characters at index 7?
  • Getting last autonumber in access
  • Deleting and Updating values from a cusrsor adapter
  • PHP - How to update data to MySQL when click a radio button
  • script to move all files from one location to another location
  • Modifying destination and filename of gulp-svg-sprite
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Arrays break string types in Julia
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Understanding cpu registers
  • -fvisibility=hidden not passed by compiler for Debug builds
  • How do I configure my settings file to work with unit tests?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How do I use LINQ to get all the Items that have a particular SubItem?