I'm looking into creating an app with typescript and angular 1.6.0. But everywhere I look is using webpack, babel, grunt, gulp, there is no single consensus on which is the best way to proceed with an app like this.
Anyone got any hints?
Thank you.
Do you have a specific need for using angular 1.6.0? As opposed to creating an angular2 project?
You can get more information here: Angular-cli
Angular cli currently includes webpack and you will not need to use gulp or grunt at all. In addition to the angular cli bundling your app together it allows easy build for Ahead of Time Compilation and tree shaking. Having these two features is nice for when you are ready to deploy your application to a production server you can bundle the application into a small package and serve a small amount of JS files.
Using the angular cli also helps you to code with best practices within an angular2 application. You generate new components/directives/pipes with a simple ng generate [component] [name] command.
I would strongly suggest reading through the angular quickstart for ts guide located here: Angular-Quickstart
Also, if you do not want to generate your own projects using the angular-cli. There are various templates online that you can start your application with.
Good luck!
If you are planning to start from scratch, then why not Angular2 ?
My suggestion is Typescript2 + Angular2 with webpack. As stated by #Andy Angular-cli is good to go.
Related
I'm building my first semi-major MERN app with Redux, without a tutorial. It's really challenging, but a ton of fun.
The project I am building is, essentially, a simple re-engineering of Zillow's API (they have a few, I'm after the more basic of the property search results).
I am using the zillow npm module and want to add what appears to be a pretty popular autocomplete Search plug-in.
My big challenge this week has been diving into the build tools. I read thru the webpack docs over the last couple days, then felt solid enough to try building out my Search functionality, which will return results and a map eventually.
It should be noted, I'm using a scaffolding tool developed by a guy who publishes a lot of good React tutorials (from which I basically learned ReactJS -- it's called turbo360). Right now, I am using webpack 4. I just did a fresh git commit: https://github.com/ScorpIan555/real-estate-app/blob/master/webpack.config.js
I have, so far, read a bit of the Babel docs. I piped in .js extentions to the .jsx test for the babel-loader, thinking perhaps that would get it?
What I'm a bit confused by is that it seems to be tripping over a file written in ES5 (from the geocoder npm module I am trying to use). So, I'm wondering if I should be configuring my babel-loader to not try to transpile ES5 modules or what.
This is the module I am trying to utilize, it looks fairly popular and has a recent commit. I also looked at its webpack.config.js file and tried to apply that to mine...
https://github.com/abec/react-autosuggest-geocoder/blob/master/webpack.config.js
I am closing this as I received assistance on a Slack channel. This plugin uses experimental code which I do not wish to use on my app. I will use another plug-in. I was looking for help with my webpack.config and am reliably told it is fine. Thanks to all who viewed this question!
I have an older project that we want to add some more functionality to. It's a fairly big project so rewriting it is out of the question. I've been reading and following the Angular ngUpgrade guide to make the transition to be able to write Angular 2+ code and run it with my AngularJS application.
However, there are some things that I'm missing and I'm quite confused on what I need to do.
My team created the initial project using Grunt and Bower, looks like through a Yeoman generator. I've been following along in the PhoneCat Upgrade Tutorial and I'm at the part where it says to "Install Angular into the project, along with the SystemJS module loader."
At this point I've looked into SystemJS a bit and what we have with our Bower/Grunt setup but am fairly confused.
So my question is, do I need to change my AngularJS application to use SystemJS before continuing with the Angular Upgrade, or can Grunt and SystemJS work together in some way?
I'm quite confused about what learn does. Is it something like Webpack's code splitting? Should I have one Webpack configuration for each learn module or shouln't I use them together?
I'm trying to create modular react app. Any other resource would be great too!
Thank you.
lerna - A tool for managing JavaScript projects with multiple packages. To solve these (and many other) problems, some projects will organize their codebases into multi-package repositories (sometimes called monorepos)
see https://github.com/lerna/lerna
webpack - Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand.
There are diferrent. And what dose create modular react app mean? modular develop (es6/commonjs/amd) or dynamic modular loading?
In WebStorm, can I run Angular and Node in the same project? Is there a project template for this?
I also notice node modules are not checked in with code by WebStorm into repository (TFS) in my tests. Is this normal? Trying to figure out best practices.
May be this helps you. This is the project in which i have used 'AngularJS' as frontend and node server as backend. github project
bunch of seeds you can find by googling "Mean Seed". I personally prefer Yeoman - https://github.com/angular-fullstack/generator-angular-fullstack, but you can choose what fit your need better. Just make sure it's updated and popular, some use quite exotic libraries.
I have an angular application. I have it set by scafolding using Yeoman and its generator-angular app. I am testing it using grunt serve.
I have few basic questions -
Is this a node application?
Since this application is going to be run in two environments (like pre-production and production), is there a way in my angular app I get the details of which environment it is run?
Let me try to explain
No this is a framework developed by Google team
There are many ways and tools to do that like gulp , grunt, webpack and yes there are many ways to set the environment and to get the environment
Try to look at any angular-seed and tutorial with tools like gulp, grunt and webpack.