I have an existing application in Angular 1.6.
We are currently using grunt and bower to build the application. Now the requirement came to migrate the existing application to webpack and removing grunt and bower. Anyone can give me the right suggestion, how to approach for the same. I am struggling with entry point, bundle path and the loader I am supposed to put in webpack config. The index.html, which script tags to remove and how to include the bundle file. Any guidance would be appreciated.
Related
So I've been handed an Angular 1.5.6 project that has source files and compiled files but nothing to instruct how to compile the source files. Is there a standard approach I'm missing to do this? There's no buildfile, package.json, angular.json file in the src directory.
Question is quite general.
Not sure about any 3rd party libs may be present and require some additional transformation, but angular app source files probably may be just be joined altogether(maybe after transpiling with Babel) and injected into HTML with <script> right after angular.js itself.
Also if you see something like strange "ngInject"; strings or comments you will probably need ng-annotate module to autogenerate dependencies for modules. It may be run in combination with gulp or Babel.
I want to compile my angular 6 codes and pack them myself.
Can I use Angular 6 without Webpack?
And Does packing .html and .css into a .js WebPack's Job or Angular CLI's Job??
Webpack is a JavaScript module bundler. Angular cli uses it to pack and build the Angular app.
If you want to use Angular cli then you're stuck with Webpack for now.
Otherwise if you create your own architecture to bundle and build your app (which is harder) then you can use other Javascript module bundlers such as Rollup and Browserify
Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporates assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one or more bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
I've searched all over google and checked out the official docs for Webpack but have not had any luck finding a tutorial/guide/plugin to even do this. Has anyone done this before or should I just drop webpack altogether and go for a grunt-maven-war file generator instead?
Well, there is nothing special in building spring-boot with webpack. You can install node globally, you can install it during build...
You just add plugin to pom.xml to run node command i.e. (https://github.com/eirslett/frontend-maven-plugin)
And that actually it. It runs webpack and you get your js, css, fonts, ... files in some folder. Now you proceed like it is usual static assets, pack them into war and enjoy.
So I am working with a couple of different Angular starter kits, but I have yet to find one that automatically puts in the script src, for the vendor resources such as angular formly, bootstrap, etc., in the index.html. I am trying to make it so my dependencies in my module can work.
Anyone know of any good grunt or gulp build that would take care of this?
I believe grunt-wiredep is what you are looking for. It will inject your bower dependencies into your 'index.html'.
however if you are trying to include JS dependencies into a stand-alone angular module meant to be used with different HTML applications, you will need to concatenate those dependencies into a single deployable JS file. This can be easily done with grunt-contrib-uglify.
I made a gulpfile to setup a front-end development working environment.
Here is how it works:
The script grabs Bower packages defined in bower.json and outputs in to the /public folder the main files of every installed package, js and css in their respective production folders (/public/js) (/public/css).
The scripts also starts a watch task on all files, css, js and html files and whenever I save those files on the development folder (/src) their /public counterparts will be updated in real-time.
This way i simply install packages locally with Bower and by running this gulpfile i will have the production files ready in my /public folder, but i need to link them!
As said, the missing part that I want the script to write links to those files in the head of my index.html, based on what packages I decided to install from Bower.
So for example, if I downloaded Bootstrap, I want the script to automatically inject in to the head of my html page the link to Bootstrap css and js files right before the body closing tag (ideally).
Here's my script on github, have a look at the README and at the gulpfile:
I don't know what approach and/or if there's a gulp plugin to use to achieve that, if someone can point me in the right direction i would appreciate very much. Thanks.
For this I currently use gulp-inject, works like a charm!
How about just using
gulp wiredep
Example:
Add Holder.js package to existing Yeoman/Bower/Gulp project.
bower install holderjs --save
This added it to the dependency array. After you need to get it added to your html by using
gulp wiredep
I was looking for this too. And it seems that gulp-processhtml plugin can fit for this task and/ or gulp-replace and/ or gulp-preprocess.