The super simple Angular quickstarter with ES6 (Babel) instead of TypeScript. Built with gulp, bundled with webpack.
Based on the official Angular QuickStarter.
After cloning or downloading this repo, run the following two commands inside the project folder to get it up and running.
yarn
yarn dev
This will install all packages, transpile ES6 to ES5, Sass to CSS, run a server at localhost:8080 and watch the sources. If you want to additionally minify your project, run yarn prod insted of yarn dev.
You can also use npm to install and run this project. However, since I develop with yarn myself, I cannot guarantee it works as intended.
After we've set up our gulpfile.js, we need to install presets for Babel so it knows what language the source code is written in and what framework we use. We do this by installing babel-preset-env and babel-preset-angular2. When that's done, we need to go ahead and configure babel-preset-env. We do that by specifying a targets and a modules property. In the first one, we tell Babel what web browsers our app should support. The second one prevents Babel from transforming ES6 modules into CommonJS modules, so webpack can do it. All of these rules get written inside the babel.config.js file.
Including Stuff in index.html
Since Angular uses things that are still experimental and bleeding edge, it's just proper manners to include polyfills for older browsers. By name, these are core-js, reflect-metadata, rxjs and zone.js. All of these libraries get concatenated and then minified into bundle.js, which will then be referenced in index.html. Since we use webpack for bundling, our written Angular code gets included to bundle.js as well. So we do not need to worry about referencing our logic inside the HTML files.
What's in package.json?
You've probably wondered where all that minty Angular magic comes from. It originates from npm packages. You see all those @angular/ dependencies? That's it! They then get used in main.js or app.module.js via import statements. Inside package.json, you'll also find the aforementioned polyfills, gulp, Babel and webpack.
Hopefully my starter helped understand the unnecessarily complicated setup process for Angular projects. If you need further assistance or encounter any problems, feel free to open an issue. A list of other Angular + Babel starters can be found here.
- Extend the readme