swimlane/angular1-systemjs-seed

AngularJS 1.x + SystemJS Seed

SystemJS + AngularJS

Seed project for ES6 modules via SystemJS with ES6 syntax using Babel that lazy-load and bundle build with AngularJS.

This project does:

• ES6 Syntax via Babel with source maps
• ES6 Modules via SystemJS
• Karma / Jasmine unit tests with coverage report
• Lazy-loading modules via routes with AngularJS
• Easy watch/browser-sync/lint/test/build setup via Gulp
• LESS CSS Support with source maps and minification
• AngularJS Template Compilation
• AngularJS Annotatation
• Bundle builds via SystemJS Builder
• Cache Busting with SystemJS
• Demonstrates on-demand theme loading

This seed project demonstrates the systemjs-route-bundler build tool.

Note: This project is largely out of date but its still a great starting point for anyone interested. We plan to add a similar demo for Angular2 soon.

Install & Run

0. npm install
1. npm start
2. Browse to http://localhost:9000

Gulp Tasks

• gulp test to run karma tests
• gulp webdriver-standalone and gulp sauce-test to run e2e test
• gulp lint to run jshint
• gulp release to bundle, cache busting, and minify

Credits

angular-systemjs-seed is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

angular1-systemjs-seed's Issues

Facing Strange PATH Error

I am using this seed project and suddenly I am facing this strange error on when running the compiled app:.

I think I have updated the JSPM or systemjs-route-bundler and after that I got this error.

[13:12:46] Error: Invalid glob argument: undefined -- when running gulp serve

I am getting the above error when running gulp serve.
I figured out, that it is related to line 66 in file build.js
return gulp.src(path.less)
i think it should look like this:
return gulp.src(paths.less)

but I am not sure.

gerald

Can't figure out how gulp release or gulp build works and some other issues.

Hi,

So I've spent a good amount of time trying to get familiar with this repo, however i am stuck at trying to build my app. Doing 'gulp-release' outputs a bunch of folder in /dist with no html files. After doing a bit of research I understand that it is overwriting the index.html itself rather than creating a new one in dist.. however there seems to be other issues.

1. For some reason, everytime i run gulp release some comment arrows (<!-- -->) keep adding up near the system.config.js and jspm_packages/system.js:
   
2. this is where the /dist script is pointing, which results in a 404.
   

This is the nicest angular-es6 boilerplate i found so far and was excited to get started with it, but I can't seem to get past this issue. Can anyone point me in the right direction?

Use npm scripts

You might want to simplify the install process by using the npm scripts: npm install could execute the bower install and the jspm install, you just need to add this to your package.json :

"scripts": {
    "postinstall": "bower install && jspm install"
}

You could add other scripts for common gulp tasks as well, take a look at this.
This way you can use the local bower / jspm / gulp from the node_modules folder without the need to install them globally :)

require('babel/external-helpers')

jspm/jspm-cli#633

Luckily I found that issue, I couldn't run this repo until I included require('babel/external-helpers') at the top of app.js

Also btw this repo is incredible

Handle Template Cache w/ ES6

With the new version of gulphtml2js we can define a custom header template, this would allow us to use ES6 better. marklagendijk/gulp-ng-html2js#9

so templates might be like:

export var {templateFileName} = angular.module('....')

then you could use it like:

import {myTemplateFile} from './template.tpl';

Gulp Build not working

I have an older version of the seed project and after updating the systemjs-route-bundler to its latest version and keeping everyother package the same except removing the node-v8-clone package , when I perform gulp build I get the following error:

Classes & Controller as

Need to add classes for controllers and controller as format

Upgrade to Angular 1.5

Module not loading when included in app.js directly

Hi,

I'm having a closer look at your setup and encountered a strange issue. I fear it's something really stupid and I'm just missing something, but anyway 😄

I forked your seed project and added a new module messages, just for playing around. When I reference the module from the dashboard module

...
import messagesModule from 'app/messages/module';
...
export default angular
  .module('dashboard', [
    ...
    messagesModule.name
  ])
  .config(ConfigureModule);

..everything works as expected. I'm able to load the MessageController from within the dashboards.tpl.html and use it just as you would expect. I also see it in the Chrome devtools:

However, when I directly reference the messages module from the app.js file like here:
https://github.com/juristr/angular-systemjs-seed/blob/adding-module/src/app/app.js#L9

..the app breaks. Often it doesn't even load properly and if it does, I don't get any error but the MessageController doesn't seem to be loaded. At least I cannot for instance use it in the index.html as I would expect.

To reproduce it easily, I pushed my adding-module branch up on my GitHub account: https://github.com/juristr/angular-systemjs-seed/tree/adding-module

Any hints? I'm quite sure I am just missing something here...

Installing materialize using jspm on the seed

I am trying to install materialize css library using jspm command on the seed and it doesn't work, I have attached the screenshot

gulp release

What sort of workflow are you planning for gulp release?

When I think of a release, I think of an artifact that is built that can be distributed to my servers. Something like a .tgz, .zip, .jar, .deb, .rpm. Right now, the system doesn't really do that. Can we improve on it?

I'd like to propose that we move the system.config.js and index.html into the src folder. These files are then copied into the dist folder. This allows for a gulp prod (which calls gulp release) to just point at the dist folder as the root of the application to serve things from. It also allows us to test the built application easily.

Thoughts?

Tests aren't working

Hey - awesome demo here. But unfortunately the tests are not working for me. I did the usual npm install & jspm install. Ran gulp tests and I got the following:

WARN [watcher]: Pattern "/Users/samlinnett/Projects/angular-systemjs-seed/bower_components//*.js" does not match any file.
WARN [watcher]: Pattern "/Users/samlinnett/Projects/angular-systemjs-seed/bower_components//*.css" does not match any file.
INFO [karma]: Karma v0.12.35 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [web-server]: 404: /favicon.ico
INFO [Chrome 43.0.2357 (Mac OS X 10.10.3)]: Connected on socket 8pFG6e6CDrcrJgGRLu_q with id 5351774
WARN [web-server]: 404: /base/dist/chai.js
Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 0 of 0 ERROR (0.002 secs / 0 secs)

Upgrade to Angular 2.0

Are there any plans to upgrade this seed project to use Angularjs2.0 instead. Can you refer me to some place where I could find similar implementation using AngularJS2.0

Html files not getting copied

I was trying to run the gulp release command and I have the following html task in the gulp file which is directly taken from the seed project:

gulp.task('html', function () {
return gulp.src(path.templates)
.pipe(cache('html'))
.pipe(plumber())
.pipe(changed(path.output, { extension: '.html' }))
.pipe(htmlMin({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({
template: "import angular from 'angular';\n" +
"export default angular.module('<%= moduleName %>', []).run(['$templateCache', function($templateCache) {\n" +
" $templateCache.put('<%= template.url %>',\n '<%= template.prettyEscapedContent %>');\n" +
"}]);\n"
}))
.pipe(babel(compilerOptions))
.pipe(gulp.dest(path.output))
.pipe(browserSync.reload({ stream: true }));
});

However the task runs fine but I cannot find any html files in the dest folder.

remove jspm_packages

please remove jspm_packages from the repo. it is in the .gitignore

'npm install' error

I get the error when running npm install, how to fix it ?
node - 0.10.30
npm - 2.5.1

npm WARN unmet dependency /Users/Necole/Projects/angularjs-project/angular-systemjs-seed/node_modules/ng-annotate requires source-map@'~0.1.37' but will load
npm WARN unmet dependency /Users/Necole/Projects/angularjs-project/angular-systemjs-seed/node_modules/source-map,
npm WARN unmet dependency which is version 0.3.0
npm WARN unmet dependency /Users/Necole/Projects/angularjs-project/angular-systemjs-seed/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/node_modules/globule requires lodash@'~1.0.1' but will load
npm WARN unmet dependency /Users/Necole/Projects/angularjs-project/angular-systemjs-seed/node_modules/lodash,
npm WARN unmet dependency which is version 3.2.0

extract the builder into its own npm module

The builder code is pretty magically awesome. I can't even fathom how much effort it was to build that. How about extracting that into it's own npm module?

Using ng-include

I have a question, how can I implement ng-include in this seed project. I have a pure html document and would like to integrate or display that document in my application as it is. I have tried using the same approach as we are using for the angular views through import but that does not work. Even I cannot just specify the path of the html document directly in the angular view.

gulp release is broken

clear our all your bower/jspm/npm folders and then do a npm install. this shows a bunch of warnings that didn't appear before. gulp release also errors out.

gulp release

Error: Cannot find module 'wrappy'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/systemjs-test/angular-systemjs-seed/node_modules/gulp/node_modules/orchestrator/node_modules/end-of-stream/node_modules/once/once.js:1:76)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

Can we try to keep master stable and tested please?

Unable to run gulp serve watch

https://github.com/Swimlane/angular-systemjs-seed/blob/master/build/tasks/watch.js#L9

There is no build-dev task in your gulpfile, hence gulp task such as watch or serve will fail.

How can I actually get this up and running?

'gulp serve' error

Does any of you are getting this error when you run gulp serve?

node - 0.10.31
npm - 1.4.23

/Dir/angular-systemjs-seed/node_modules/gulp-less/index.js:68
    }).done(undefined, cb);
       ^
TypeError: Object #<Promise> has no method 'done'
  at DestroyableTransform._transform (/Dir/angular-systemjs-seed/node_modules/gulp-less/index.js:68:8)
  at DestroyableTransform.Transform._read (/Dir/angular-systemjs-seed/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
  at DestroyableTransform.Transform._write (/Dir/angular-systemjs-seed/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
  at doWrite (/Dir/angular-systemjs-seed/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
  at writeOrBuffer (/Dir/angular-systemjs-seed/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
  at DestroyableTransform.Writable.write (/Dir/angular-systemjs-seed/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
  at write (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
  at flow (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
  at DestroyableTransform.pipeOnReadable (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
  at DestroyableTransform.emit (events.js:117:20)
  at emitReadable_ (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
  at emitReadable (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)
  at readableAddChunk (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:187:9)
  at DestroyableTransform.Readable.push (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:149:10)
  at DestroyableTransform.Transform.push (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:145:32)
  at DestroyableTransform.sourceMapInit [as _transform] (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/index.js:121:10)
  at DestroyableTransform.Transform._read (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
  at DestroyableTransform.Transform._write (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
  at doWrite (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
  at writeOrBuffer (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
  at DestroyableTransform.Writable.write (/Dir/angular-systemjs-seed/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
  at write (/Dir/angular-systemjs-seed/node_modules/gulp-changed/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
  at flow (/Dir/angular-systemjs-seed/node_modules/gulp-changed/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
  at DestroyableTransform.pipeOnReadable (/Dir/angular-systemjs-seed/node_modules/gulp-changed/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
  at DestroyableTransform.emit (events.js:117:20)
  at emitReadable_ (/Dir/angular-systemjs-seed/node_modules/gulp-changed/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
  at emitReadable (/Dir/angular-systemjs-seed/node_modules/gulp-changed/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)
  at readableAddChunk (/Dir/angular-systemjs-seed/node_modules/gulp-changed/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:187:9)
  at DestroyableTransform.Readable.push (/Dir/angular-systemjs-seed/node_modules/gulp-changed/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:149:10)
  at DestroyableTransform.Transform.push (/Dir/angular-systemjs-seed/node_modules/gulp-changed/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:145:32)
  at fsOperationFailed (/Dir/angular-systemjs-seed/node_modules/gulp-changed/index.js:17:10)
  at /Dir/angular-systemjs-seed/node_modules/gulp-changed/index.js:30:8
  at Object.oncomplete (fs.js:107:15)

Source Maps get messed up on bundling

Source maps are pointing to the wrong source on a bundle build.

Include SystemJS Loader in Main

In order to reduce downloads, we should include the SystemJS and its deps in the main download file.

gulp-minify-html deprecated

https://www.npmjs.com/package/gulp-minify-html is deprecated, use https://github.com/jonschlinkert/gulp-htmlmin instead

CSS import does not work for bundled modules

If a module imports a CSS file, and that module is bundled during the build process, the CSS file will not be imported.

Example:

src/common/components/select.js

import angular from 'angular';

// does not work when the selectModule is bundled
import 'common/components/select.css!';

export var selectModule = angular.module('common.components.select', []);

after gulp build, that module is bundled and ends up into dist/bundles/2-3.js:

System.register("common/components/select", ["angular", "common/components/select.css!"], true, function(require, exports, module) {
  var global = System.global,
      __define = global.define;
  global.define = undefined;
  "use strict";
  var _interopRequire = function(obj) {
    return obj && (obj["default"] || obj);
  };
  var angular = _interopRequire(require("angular"));
  require("common/components/select.css!");
  var selectModule = exports.selectModule = angular.module("common.components.select", []);
  global.define = __define;
  return module.exports;
});

However, the CSS file is not loaded in the browser.

This works for non-bundled modules.

production config error

Since i reinstalled my node_modules with npm install SITUATION=production gulp run fails with

[20:27:37] 'routeBundler' errored after 18 ms
[20:27:37] TypeError: baseURL should only be configured once and must be configured first.

I tried to use all the versions i used previously but i think one of the modules in gulp helpers node_modules dir is causing this issue. They are not fixed to specific version, just added a ^1.2.3

Any idea what's causing this issue and how it can be solved?

Implement Better Browser Watch

Implement a better browser watch system that doesn't refresh the page w/ just css changes and such.

See @brianfeister example https://github.com/brianfeister/angular-systemjs-seed/blob/master/gulpfile.js for ideas

Implement Protractor Tests

Implement protractor tests with hooks into saucelabs.

See @lookfirst config for ideas: https://github.com/lookfirst/systemjs-seed/blob/master/protractor.conf.js

fix ngAnnotate use

https://github.com/olov/ng-annotate#explicit-annotations-with-nginject

$futureStateProvider.stateFactory('load',($q, $ocLazyLoad, futureState)=>{
  'ngInject';

  return $q((resolve,reject)=>{
    //code here
  });
});

Clear cache on logout

I am facing some issues when I implement logout feature. Currently I am just clearing some session data which I maintain myself and then redirect user to the login state, however I have noticed as I am using socket.io when the socket.io event is fired even when I am logged out still I am able to receive that event because the data persists inside the services even when we have logged out. Is there any recommended way to implement logout feature in the seed?
I think it might be related to templateCache which needs to be cleared when we are logging out?

Bundles which import css files are no longer being built

Happens after upgrading plugin-css to 0.1.3 and systemjs-builder to 0.7.3

Materialize Installation Issue`

I am trying to install the latest version of Mateiralize from NPM https://www.npmjs.com/package/materialize-css . I am able to install it and when I reference the [email protected]/dist/js/materialize file inside my system.config.js I get 404 errors for hammer.js

I am not sure why I am getting these errors.

JSHint Problem

Problem

After npm install on a fresh clone, running npm start throws this error:

> [email protected] start /Users/clutch/Workspace/angular1-systemjs-seed
> gulp watch serve

module.js:341
    throw err;
    ^

Error: Cannot find module 'jshint/src/cli'

Solution

I found this stack overflow question. Following the answer there, I ran npm install --save-dev jshint gulp-jshint and then npm start worked without errors.

These are the resulting changes to the package.json file:

@@ -18,7 +18,7 @@
-    "gulp-jshint": "^2.0.0",
+    "gulp-jshint": "^2.0.1",
@@ -31,6 +31,7 @@
+    "jshint": "^2.9.2",

Other Things I tried

• When I ran the stack overflow answer's npm install, I noticed npm WARN prefer global [email protected] should be installed with -g. So I installed it globally, pulled a fresh clone and npm installed, but I got the same error as before. I confirmed it was installed with npm list -g jshint.
• I also noticed gulp-jshint was already in package.json so I did another fresh clone and ran npm install --save-dev jshint and npm start worked without errors.

Images transmitted as text/html

I was trying to use images in the seed project and had put some images in the assets/images folder and referenced them in my view html page as: src="/assets/images/test.png"
When I view my page in the browser I see a 404 error for the image as well as in the Network Tab for the Chrome I am finding out that its calling images with MIME Type : text/html
I am not sure what the issue is

Directives Not Displaying

I have recently started experiencing a strange issue and I am not sure what is causing the issue but thought I should share it. I have couple of directives implemented in my application and when I load the application those directives are not displayed , I tried putting some console log statements in the link function but those are also not getting called. However when I change anything in those directives, even if it is adding a new line or deleting an empty line , then the gulp reloads and I can see the directives.

I am not sure how to debug or know what is causing this issue.

Bundle Error

When I bundle the application using command: jspm bundle-sfx --minify app/app and then try to use the javascript build.js file I get an error e.import is not a function. I have attached the screenshot.

$locationProvider.html5Mode(true) is broken

Somehow need to convince browserSync that all requests are for index.html?

Refactor project into a more useful seed

Right now, to use this project, you have to clone it and then rip out the parts you don't need. You also have to come up with a good understanding of how all the parts fit together and how the gulpfile interacts with them. Sure, it is pretty small (right now), but it is kind of intimidating for a new user. This project isn't the only one with this issue, all seed projects kind of suck in this same way.

I've been thinking about this a lot. There is other projects like Yeoman, which give you the Rails type experience of being able to 'new' a project with a generator model and create templates for things like controllers, etc. This is great for just starting off, but doesn't solve the issue of when the base project changes, updating your own project, most of that code lives in the gulpfile.

Sorry this is so long winded.

What I was thinking as a first step to providing a better experience would be to extract out all of the gulp tasks that do stuff into functions and put them into their own npm module. This way, the gulpfile just loads a bunch of functions that can be more easily re-used (and therefore updated). The seed gulpfile will then just look like a bunch of method calls that setup the tasks.

Once we have that, I think that building a yeoman experience might be the next step. Then we won't have to rip out all the existing example code as yeoman can generate that for us.

Thoughts?

Error in the release

I am getting following error when deploying the release. Actually I am using NodeWebkit and making a release using this seed project
Potentially unhandled rejection [2] ReferenceError: Error loading "app/login/login" at file:///C:/Users/ADMINI~1/AppData/Local/Temp/nw9104_8193/dist/app/login/login.js
babelHelpers is not defined

Prefetch

Steal this idea: https://github.com/matoilic/angular-lazy-workshop/blob/master/src/components/application/config/states.json#L13

CSS does not refresh

I have almost implemented the seed project , I have just done a small update to the seed project , I added 2 states : main & portfolio. I also added .less files for each of the states.
Now when I have defined the links for both the states in my index.html file and when I load my application by default main state gets loaded and it also loads the .css file for the main state which is good.
when I click on the portfolio state then I am able to navigate to the portfolio page and the corresponding .css for the portfolio gets loaded. I have placed body background color red in the main state and yellow in the portfolio state.
so far everything works as expected. Now the problem comes when I navigate back from the portfolio state to the main state, at that time the .css file for the main state is not loaded and it still has the css of the portfolio state loaded, so my question is how can I load the .css of the main state when I navigate back to the main state form portfolio state.

**In above issue where ever I have mentioned 'loaded' I mean 'applied on the page'

release overwrites index.html

I tend to shy away from modifying files that are under source control during a release. Maybe instead of modifying index.html inline, we copy it into dist and make everything relative to that?

multiple declaration of routes

Right now, there is a routes.json file and in that file, we declare the top level routes. However, these same routes are also declared in say login.js module configuration. It seems a bit DRY. Is there a way to clean this up?

upgrade to babel

when you upgrade to babel, you'll need to change the runtime compiler option in the gulpfile to externalHelpers

jspm inject changes all paths

I'm trying to jspm inject handlebars for example, and it appears to make ALL my npm and github paths point to the remote.
Before:

  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

Then: jspm inject handlebars

After:

  paths: {
    "github:*": "https://github.jspm.io/*",
    "npm:*": "https://npm.jspm.io/*"
  },

HMR Demo

Example setup for: https://github.com/capaj/systemjs-hot-reloader

Move bower components to jspm

Per #1 , we should move bower components to jspm to simplify things.

Newbe experince: Error: Cannot find module '../babel-options'

Hi, i am a newbe in angular, gulp... and used this seed project to learn.
unfortunately I am running in some issues I want to share, so that other newbes are aware.

after performing the:
Install & Run

npm install -g gulp jspm
npm install
gulp watch serve

I get the error: Error: Cannot find module '../babel-options'.

I think the issue is in the build.js file at line 16, where it looks for
var compilerOptions = require('../babel-options');

but it looks like the name of the file is babelOptions.js. So changing babel-options to babelOptions did the trick for me.

CSS Bundling

CSS Bundling doesn't work quite as expected. @marjan-georgiev please provide more details.