stukh / generator-angular-webpack-es6

Yeoman generator for Angular projects using Webpack, ES6, SASS with some cool optional features. Feel free to contribute!

generator-angular-webpack-es6

Yeoman generator for AngularJS + Webpack with ES6 and SASS.

• Latest Webpack with Tree Shaking feature enabled
• Babel 6 with ES2017 features included
• Perfectly compatible with angularOcLazyLoad plugin
• SASS as CSS preprocessor
• Angular UI router as default router already included
• Optional installation bootstrap-sass source
• Optional angular modules installation
• All necessary webpack loaders already included (Sass, Images, Fonts, ngAnnotate, ngTemplateCache, etc.)
• Config has options for development and production mode

Use only webpack with npm. No external dependencies like bower, grunt, gulp...

Webpack@2 still in Beta and it may contain some bugs. Please, report them to Webpack developers directly.

Install

Install required tools yo, and webpack:

npm install -g yo webpack

Install generator-angular-webpack-es6:

npm install -g generator-angular-webpack-es6

Directory Layout

├── /e2e/                                 # End to End  test folder
│   └── main.component.spec.js            # End to end test example
├── /config/                              # Build config
│   └── /webpack/                         # Webpack config files
│       ├── /environments/                # Webpack env dependent configs
│       └── global.js                     # Global webpack settings for all envs
├── /dist/                                # The folder for compiled output
├── /node_modules/                        # 3rd-party libraries and utilities
├── /src/                                 # Source folder
│   ├── /app/                             # Application code
│   │   ├── /components/                  # Shared UI components
│   │   │   └── /footer/                  # Footer shared component. Place footer's styles, directives, templates here
│   │   ├── /core/                        # Shared angular services/directives
│   │   │   ├── /directives/              # Shared directives
│   │   │   ├── /services/                # Shared services
│   │   │   └── /core.module.js           # Import of all core components should be here
│   │   ├── /pages/                       # All pages-dependent content should place here
│   │   │   ├── /main/                    # Main page
│   │   │   │   ├── /main.controller.js   # Main page Controller
│   │   │   │   ├── /main.controller.spec.js  # Test file for main page controller
│   │   │   │   ├── /main.html            # Main page template
│   │   │   │   ├── /main.module.js       # Main page module
│   │   │   │   └── /main.route.js        # Main page routes
│   │   │   └── /.../                     # Other pages...
│   │   ├── /index.bootstrap.js           # Entry point. Import internal and external modules and bootstrap (RUN) angular application
│   │   ├── /index.components.js          # Define all your custom components here
│   │   ├── /index.config.js              # Function that will be triggered in Angular's "config" phase
│   │   ├── /index.module.js              # Main application's module
│   │   ├── /index.routes.js              # Describe only "otherwise" and async routes here
│   │   ├── /index.run.js                 # Function that will be triggered in Angular's "run" phase
│   │   ├── /index.vendor.js              # Import all vendors and 3rd party plugins here
│   ├── /assets/                          # Static content
│   │   ├── /images/                      # Images
│   │   ├── /js/                          # Extra libs folder
│   │   └── /styles/                      # Styles folder
│   │       ├── /css/                     # CSS
│   │       └── /sass/                    # SASS
│   ├── favicon.ico                       # Application icon to be displayed in bookmarks
│   └── tpl-index.html                    # Template for html-webpack-plugin that will be transpiled into index.html in /dist
│── .babelrc                              # Babel config with presets and plugins
│── .gitignore                            # List of files to ignore by git
│── karma.conf.js                         # Karma config
│── protractor.conf.js                    # protractor config
│── spec.bundle.js                        # The bundle file for including in karma config
│── package.json                          # The list of project dependencies and NPM scripts
└── webpack.config.js                     # Bundling and optimization settings for Webpack

Run

Create a new directory, and go into:

mkdir my-new-project && cd $_

Run yo angular-webpack-es6, and select desired technologies.

npm start or npm run dev - to start development server on http://localhost:8080.

npm run build - To make production-ready build run after few moments you will see build id dist folder.

Test

Unit testing

The app uses Karma to run the unit tests, which you can find near the test target (*.spec.js files). see example test in the above directory structure. For running these tests run this command in project directory:

npm test

This command will automatically watch for changes that happening in test files and rerun the test suite To disable the above behaviour , please check package.json file

End-to-end testing

The app uses Protractor, an end-to-end test framework designed for AngularJS apps, to the end-to-end tests, which you can find in the e2e folder.

Setup development environment for running end-to-end tests

• First make sure that you did npm install.
• Download the necessary binaries for Selenium Server npm run webdriver-update.
• Open onother command line and run the development server npm start and make sure the running port match the baseUrl port in protractor.conf.js file.
• Finally run npm run test:e2e.

Example tests

• Check the example test for unit tests using jasmin api in

  /src/app/pages/main/main.controller.spec.js
  

  All your unit test files must end with .spec.js

• Check the example test for e2e test in e2e directory.

  /e2e/main.component.spec.js
  

Known bugs:

• Problem: Webpack2 unable to import function with only export default value.

Workaround: Use import * as variable from "package" instead of import variable from "package"

• Problem: Webpack3: ExtractTextPlugin and file-loader do not work with the use syntax. Link to the issue.

Contribute

If you want to contribute:

• Fork repository and clone project to your machine
• Install npm packages and create new feature/fix branch
• Link local project to be able install generator with yo from folder like from global installed package: npm link
• Make PR
• ...
• PROFIT

TODO:

• Add .dockerfile
• Add example testing environment with karma and protractor
• Add more dotfiles
• Add better examples with lazy-loaded modules Added in 0.1.2
• Update to Babel6 Added in 0.2.0

Inspired by generator-gulp-angular project.

generator-angular-webpack-es6's Issues

Use scoped packages

Hello, while running your great generator, I got this message:

WARNING! this npm package "angular-ui-router" has been renamed to "@uirouter/angularjs". Please update your package.json
See https://ui-router.github.io/blog/uirouter-scoped-packages/ for details.

I am not sure if it is an issue with my environment or it could be related with the default generator settings.

Thank you for your time and efforts

[APPRECIATION] Good job!

Hi Alex, just showing some appreciation!
We used your project as the base to migrate now 2 of our open sites at KPN, the biggest telecommunications company in The Netherlands!

Keep on rocking! And if you're interested, take a look at our careers site or drop me a mail ;)

Cheers!

Webpack fails to build bundle because of missing Jquery dependency

I setup the generator globally and then created the project using yo angular-webpack-es6. I chose to install oclazyload module but skipped Jquery. When starting the dev server via npm run dev webpack bundling was stuck at 26% and there were errors of missing module jquery which was supposedly a dependency of oclazyload (because the paths in error message indicate that).

If oclazyloading does indeed require Jquery then it should be installed by default as due to this the project fails to kickoff.

Screenshot of error

I installed jquery using npm install jquery --save and the error went away and bundle was built successfully.

Unable to add logo image in html template file

Hi,

I have used this yeomen generator and am naive to Webpack and trying to use image in /assets/images folder (logo.png).

I see configuration of webpack -

// resolves modules
resolve: {
  extensions: ['.js', '.es6', '.jsx', '.scss', '.css'],
  alias: {
    _appRoot: path.join(_path, 'src', 'app'),
    _images: path.join(_path, 'src', 'app', 'assets', 'images'),
    _stylesheets: path.join(_path, 'src', 'app', 'assets', 'styles'),
    _scripts: path.join(_path, 'src', 'app', 'assets', 'js')
  }
},`

So I have below code in my controller -

const logo = require('../../assets/images/logo.png');

But webpack is unable to find logo.png module. I don't understand alias defined in webpack.config file and how we use it in our source code?

Cannot resolve some ui-router states with the current app structure

I have below states in my app

login (from /pages/login/login.route.js)
app (abstract) (from /components/header/header.route.js)
app.upload(abstract)  (from /pages/upload/upload.route.js)
app.upload.products   (from /pages/upload/products/products.route.js)

And my index.module.js includes the all the page modules

const App = angular.module(
    "CMS", [
         require('angular-ui-router'),
         require('angular-ui-bootstrap'),

         // core
         require("./core/core.module").name,

         // components
         require("./index.components").name,

         // routes
         require("./index.routes").name,

         // pages
         require("./pages/login/login.module").name,
         require("./pages/upload/upload.module").name,
         require("./pages/upload/products/products.module").name
    ]
);

In LoginController I am redirecting to app.upload.products on successful login to api call.

$state.go('app.upload.products');

But I get an error saying

Could not resolve 'app.upload.products' from state 'login'

Why is this state getting resolved? What did I miss?

Heroku problem

I would like to deploy my app on heroku, but getting:
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
Anyone can help with proper configuration?

Need help on generating environment specific api config

Hey, I have been using generator-angular-webpack-es6 for a week now.

I really like how it's structured in a context of separation of concerns.

I have one problem. My api.config.json

{
    "production": {
        "APIConfig": {
            "ProductService": "jjjjjjjjj",
            "CartService": "kkkkkkk"
        }
    },
    "development": {
        "APIConfig": {
            "ProductService": "lllllllll",
            "CartService": "mmmmm"
        }
    }
}

I want webpack to create angular config for the enviornment specific build.

In gulp I had a task for this

gulp.task('configure-environment', configure);
function configure() {
  return gulp.src('conf/app.env.config.json')
    .pipe(gulpNgConfig('MyMD.config', {
      environment: process.env.NODE_ENV || "development"
    }))
    .pipe(gulp.dest(path.join(conf.paths.src)));
}

How do I do this with Webpack?

Need help in doing unit testing

I have created index.test.js

var testsContext = require.context(".", true, /\.spec.js$/);
testsContext.keys().forEach(testsContext);

and configured it in karma.config.js

files: [
    'src/app/index.test.js'
],
preprocessors: {
  'src/app/index.test.js': ['webpack']
},

The sample test that I created

import app from 'src/app/index.module.js';

describe('app', () => {

  describe('MainController', () => {
    let ctrl;

    beforeEach(() => {
      angular.mock.module(app);

      angular.mock.inject(($controller) => {
       ctrl = $controller('MainController', {});
      });
    });

    it('should contain the starter url', () => {
      expect(ctrl.test).toBe('test');
    });
  });
});

But when I run it with

npm run test --verbose

It says

echo 'Error: no test specified'

and when I runt it with

node_modules/karma-cli/bin/karma start karma.conf.js --single-run

It says

Chrome 52.0.2743 (Linux 0.0.0) ERROR
Uncaught SyntaxError: Unexpected token import

How do I go about doing unit testing here? Please help.

Async/Await support

Hi,
thanks for this generator, makes things easy.

But i noticed that i cant use any async -await feature, i thought this would be supported since, ES2017 is supported.

Pls whats the easiest way to add async-await to this?

Doesn't work in Internet explorer 11, 10

Neither development nor dist version is not working in internet explorer.

I managed make it partially work by injecting ng-app to <html> tag, which loads source, but page doesn't render.

It would be better give some introduction about the folder structure, configuration, etc.

Source Map not getting generated and Build stuck at 92% UglifyJSPlugin

We have upgraded to Angular 6 last week. We are not able to see Source Map in Debug Console. Our Build gets stuck at 92% UglifyJSPlugin. Please let me know if anyone else is having this issue. Is this a bug in Angular6? How to fix this issue? I would really appreciate any guidance.

Regards
Anu

How change the developer server from 8080 ??

The application server starts with localhost:8080, this port is currently used by wamp server and need to change it

is there sub generator?

Doesn't work without jQuery

Are there any reasonable reasons to use jQuery together with AngularJS?

[Question] Global scss variables

Great starter, I'm loving it.

Would you let me know is it possible to have let's say _variables.scss file, which will be available from components .scss files?

For example,
_variables.scss contains

$blue:'blue';

which can be imported in footer.scss like a:

a {color:$blue}

Thanks in advance!

Update:
I have switched loader to sass-resources-loader, so my global.js rule looks like this one:
Is that correct?

{
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            'sass-loader',
            {
              loader: 'sass-resources-loader',
              options: {
                // Provide path to the file with resources
                resources: './src/assets/styles/_vars.scss'
              },
            },
          ],
        }

image path

what is the correct path for images?

"Failed to instantiate module ng"

When I create a new project with only default options, when running npm run dev I get the following error in the Chrome console and nothing is displayed.

Uncaught Error: [$injector:modulerr] Failed to instantiate module ng due to:
Error: [$injector:strictdi] function($provide) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.5.8/$injector/strictdi?p0=function(%24provide)
at http://localhost:8080/vendor.js:13298:13
at Function.annotate as $$annotate
at injectionArgs (http://localhost:8080/vendor.js:17909:37)
at Object.invoke (http://localhost:8080/vendor.js:17940:19)
at runInvokeQueue (http://localhost:8080/vendor.js:17841:36)
at http://localhost:8080/vendor.js:17850:12
at forEach (http://localhost:8080/vendor.js:13551:21)
at loadModules (http://localhost:8080/vendor.js:17831:6)
at createInjector (http://localhost:8080/vendor.js:17753:20)
at doBootstrap (http://localhost:8080/vendor.js:14988:21)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=ng&p1=Error%3A%20%5…at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8080%2Fvendor.js%3A14988%3A21)

Working with chrome dev workspaces and editing scss files ?

Hi,

managed to get this working and it seems the sourcemaps are working as I see the scss files in chrome dev tools but I was trying to enable the workspaces feature of chrome dev tools so that i am able to edit in chrome dev tools and its persisted on disk. But no success.

Has anyone managed to get this working ?

I have mapped the directory to the web space but the file never saves or is updated.

Anyone able to help ?

Use node-express as backend in development

Was wondering how would you support using this with a node backend server

[Question] is there sub generator?

hi, i am new web developer.
I am so grateful for the angular generator. thank you.

by any change get sub generator?
for example,
yo angular:component navbar
yo angular:service auth

Where I need to left my images?

I put some images into src/assets/images, did npm run dev and can't got them through /assets/images/image.gif

Not Creating all Files

I am using the genetator but it is not creating all files.

It is not creating the folders related to protractor, karma.conf file end much more
It just create a simple boilerplate

Getting 404 Not Found error for templateUrl on $uibModal

My app is structured like this,

I am calling below function from src.controller.js on ng-click of a button.

vm.updateSourceAndVisibility = function(skus) {
  $log.info("In updateSourceAndVisibility");
  var modal = $uibModal.open({
    animation: true,
    templateUrl: require('./source-selection/source.selection.html'),
    controller: require('./source-selection/source.selection.controller.js'),
    controllerAs: 'sourceSelectCtrl',
    backdrop : 'static',
    size: 'md'
  });
};

But I get 404 Not Found error for http://localhost:8080/src/app/pages/src/selection/selection.html.

How do I show my UI from source.selection.html on the modal?

I have tried using template as well instead of templateUrl.

template: require('./selection/selection.html'),

In this case, modal gets opened with below text,

/src/app/pages/src/selection/selection.html

Need help in adding and using angular-bootstrap-ui in generated boilerplate

I am moving from gulp to webpack. I have followed all the steps to generate the boilerplate using yo.

How do I go about adding a new dependency for the angular and start using it? For e.g. I want to use angualar-bootstrap-ui.

It's not documented anywhere.

Uncaught ReferenceError: exports is not defined

Uncaught ReferenceError: exports is not defined