mgechev/angular-seed

🌱 [Deprecated] Extensible, reliable, modular, PWA ready starter project for Angular (2 and beyond) with statically typed build and AoT compilation

No longer under active maintenance

For starting a new project consider Angular CLI. Read more here.

angular-seed's Issues

"serve" without using "build"

Just wanted to ask, why serve.env does call build.app.env and doesn't call build.env? I believe that building whole project on start of server is better solution, no need to enter build.env before serve.env.

Add jshint and editor config

What do you think adding:

• .jshintrc
• .editorconfig
• .jscrc

Move building dependency angular2 from es6 to ts

The Angular2 node_module/sources are delivered in TypeScript as well, why not to use those instead es6?

You could loose the definitions file then.

Cannot find name 'Router'

Hi,

I tried using routes, but its throwing me an error. Here is my code:

import {View, Component} from 'angular2/angular2';
import {Router} from 'angular2/router';
import { Home } from './home';

@Component({
    selector:'app'
})

@View({
    templateUrl: '../templates/home.html'
})

export class App{
    constructor(route:Router){
        console.log("app loaded")
    }
}

The compilation throws me following error:

ts/index.ts(14,20): error TS2304: Cannot find name 'Router'.

Is it something I am doing wrong??

EPERM on `serve.prod` in Windows

In clean.tmp task get:

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: watch EPERM
    at exports._errnoException (util.js:746:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1157:26)

when running serve.prod.

Update for Angular2 alpha 21

Is there any plans to update this to the latest alpha (and TypeScript 1.5 beta)?

Serve the static content with gulp task

Urls use absolute paths, should use relative ones

I have this project deployed at http://.....com/test/

The project doesn't work because the links use absolute paths, not relative ones (It tries pulling files, say "angular.js", from http://...com/angular.js instead of http://.....com/test/angular.js)

I got it to "work" by modifing this line in the gulpfile.js

arguments[0] = filepath.replace('/' + PATH.dest[env].all, '') + v;

with

arguments[0] = filepath.replace('/' + PATH.dest[env].all, './') + v; (Notice the "./")

It created some weird but tolerable side effects, but after updating the project to master, those lines were changed and the fix no longer works!
Any ideas on how to fix this?

Build broken on Windows plateform

join('dist', 'dev') produces dist\dev on Windows whereas dist/dev is meant to be removed see here before injection into index.html.

I think we have to get back to hard coded path inside the PATH config.

Any other ideas ?

Add source maps support for TypeScript

Declare Return Types for Functions

Gulp.test build task: type errors

Hi There,

I am trying to run your seed-test project without any modification. But it's failing in test with below errors:

C:\angular2\angular2-seed-test>gulp test
[09:55:50] Using gulpfile C:\angular2\angular2-seed-test\gulpfile.js
[09:55:50] Starting 'build.test'...
app\components\about\about_spec.ts(16,19): error TS2307: Cannot find module 'ang
ular2/src/dom/dom_adapter'.
app\components\about\about_spec.ts(24,31): error TS2345: Argument of type 'typeo
f TestComponent' is not assignable to parameter of type 'Type'.
  Type 'TestComponent' is not assignable to type 'Type'.
    Property 'apply' is missing in type 'TestComponent'.
app\components\home\home_spec.ts(16,19): error TS2307: Cannot find module 'angul
ar2/src/dom/dom_adapter'.
app\components\home\home_spec.ts(23,30): error TS2345: Argument of type 'typeof
TestComponent' is not assignable to parameter of type 'Type'.
  Type 'TestComponent' is not assignable to type 'Type'.
    Property 'apply' is missing in type 'TestComponent'.
[09:55:55] TypeScript: 4 semantic errors
[09:55:55] TypeScript: emit succeeded (with errors)
[09:55:55] Finished 'build.test' after 5.2 s
[09:55:55] Starting 'karma.start'...
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 44.0.2403 (Windows 8.1 0.0.0)]: Connected on socket PipeNHjYqtNISFs
yASA7 with id 48809517
Chrome 44.0.2403 (Windows 8.1 0.0.0): Executed 1 of 3 SUCCESS (0 secs / 0.008 se
Chrome 44.0.2403 (Windows 8.1 0.0.0): Executed 2 of 3 SUCCESS (0 secs / 0.209 se
Chrome 44.0.2403 (Windows 8.1 0.0.0): Executed 3 of 3 SUCCESS (0 secs / 0.228 se
Chrome 44.0.2403 (Windows 8.1 0.0.0): Executed 3 of 3 SUCCESS (0.239 secs / 0.22
8 secs)
[09:56:21] Finished 'karma.start' after 26 s
[09:56:21] Starting 'test'...
[09:56:21] Finished 'test' after 36 ms

Here are the steps I followed:

1. Downloaded zip version of seed-test project
2. Ran "npm install" command
3. Ran "gulp serve.dev" -> works fine
4. Ran "gulp test" -> failed.

Could you please let me how to solve this error?

Thanks!

Deep linking for development - return 'index.html'

Would it be possible to modify the gulpfile and make the connect npm module to return index.html for page requests? That way you could refresh the browser on route such as `/about'...

Include reference to Http

Since using the http module is quite often case, I'm opening this issue for a discussion on whether you think we should add the module to the seed by default.

Consider using rx.all.js?

Hello.

I'm curious at the difference between using rx.js and rx.all.js in the gulpfile. As a newcomer to Rx, I struggled to figure out the version of rx that I needed in order to use to use .fromCallback. What is the tradeoff between rx.all and rx?

In the end, I swapped in rx.all.js in the gulpfile and ran tsd install rx.async-lite --save and was able to use this feature.

Thanks for this project, just wanted to get this small feedback to you to see what the difference is between these two options.

router will not work in current configuration

Do you know how to get the router to work in this configuration? Perhaps I would want to use the router in about.ts similar to below. This will result in a error similar to below if you declare router in the spec and if you do not declare in spec the test will fail outright. Thanks for the project!

Error
    at NoAnnotationError.BaseException [as constructor] (C:/Dev_NG8649/Personal/mbutterfield/angular2-seed/node_modules/angular2/src/facade/lang.js:23:2)

import {Component, View, NgFor} from 'angular2/angular2';

import {NamesList} from '../../services/NameList';
import {Router, ROUTER_BINDINGS} from 'angular2/router';
@Component({
  selector: 'about'
})
@View({
  templateUrl: './components/about/about.html?v=<%= VERSION %>',
  directives: [NgFor]
})
export class About {
  constructor(public list: NamesList, public _router: Router) {
      this._router = _router;
  }
  addName(newname) {
    this.list.add(newname.value);
    newname.value = '';
  }
}

Unit/E2E Tests?

Is there any plan to add Unit/E2E tests to this? With/without code coverage?

Update to alpha35

Install tds typings in an npm post install script

Don't you think we should remove the tds_typing folder from repo and get the *.d.ts files installed in an mpm post install script (in the same fashion as #59) ?

App directory structure

Which one do you think is better. Grouping things by type or by feature. Here we have all components together and all services together as well. Do you think it would be better to pack them by features?

Refactor gulpfile

The way all the external libraries are gathered doesn't seems like an elegant one.

How to reduce the size of prod lib.js, which is ~1M?

Is this possible or not, and what have caused such a huge size (compared to ~150kb for Angular1)?

Add material style

Two typings folders?

Hey, not sure if this is an issue, assuming you guys probably did this on purpose, but I'm very new to TypeScript and Angular2.

You have ./tsd_typings and ./app/typings . Just guessing, I would think tsd_typings is for TypeScript definitions from http://definitelytyped.org/tsd/ (basically 3rd party definitions)... and ./app/typings is for your app specific TS definitions. But it seems like ./app/typings/systemjs.d.ts is a 3rd party definitions file that should be in /tsd_typings.

Any clarification would be very welcome. I haven't been able to find a good boilerplate or yeoman generator for Angular2, so trying to put one together myself. Though might be a little ambitious.... trying to do a Gulp + jspm (SystemJS) + BrowserSync + WebPack + TypeScript->ES6->(babel)->ES5 + PostCSS (and some useful plugins, PreCSS, cssnext, autoprefixer, etc)... and possibly more. Working in baby steps.... and since this is the best angular2 seed I can find, trying to base part of my boilerplate off of it.

Extending PATH.src in gulpfile to provide more modularity

Hi everyone,

I just wanted to propose a little improvement to the gulpfile. The idea would be to add source file paths to the PATH variable in order to be able to quickly change a project's structure if needed. At the moment almost every gulp.src() uses a plain './app/something' form. The idea would be to replace it by say gulp.src(PATH.src.root+'something'). Like that we might offer better modularity over the structure of the folders to allow source files to be in /src or /client/app, /src/app. All you'd have to do is just to locate the root of your angular2 app source files within the PATH variable.

Undefined is not a function, RouteConfig()

It seems there is a little issue with the Router in the current version. Here is the error :
[Error] TypeError: undefined is not a function (evaluating 'router_1.RouteConfig')
(anonymous function) (about, line 31)

I could find a quick fix though. In the init.ts file we have :

// Dirty workaround in order to load angular2/router properly
System.import('angular2/router').then(m => {
  System.defined['angular2/router'] = { normalizedDeps: [] };
  System.defined['angular2/router'].module = {};
  System.defined['angular2/router'].module.exports = m;
});


System.import('app')
  .catch(e => console.error(e,
    'Report this error at https://github.com/mgechev/angular2-seed/issues'));

The problem seems to be that when we load app and bootstrap it, the router is maybe not loaded yet, therefore I queued the import of the app in the promise returned by the import of the router like this :

// Dirty workaround in order to load angular2/router properly
System.import('angular2/router').then(m => {
  System.defined['angular2/router'] = { normalizedDeps: [] };
  System.defined['angular2/router'].module = {};
  System.defined['angular2/router'].module.exports = m;
  System.import('app')
    .catch(e => console.error(e,
      'Report this error at https://github.com/mgechev/angular2-seed/issues'));
});

Traceur throws "duplication module named rx"

I tried to get the latest running but got stuck on "Loading...". It appears Traceur doesn't like that both angular2.js and router.js have a System.register("rx"

npm install fails on Windows

It looks as the gulp script uses shell commands that does not work under Windows OS. The issue is with the install.typings task the uses Unix style path ./XXX/YYY

Watch not working

Whenever I change the files in app folder, it should have changed the files when I refresh, but I do not see my changes reflected, and also do not see anything happening on terminal thats running the gulp serve.dev

NameService injector returns a new instance each time

Moving the service injector binding to app level should fix the issue.

Useless .js files created inside the app directory

can't refresh page

when i change the router,can't refresh page

Production build is broken

Replace SystemJS with TypeScript to CJS + Browserify

Based on #44

Can't get Http to work

In my service I have following

import {Http} from 'angular2/angular2';

export class TodoList {
  constructor(public http: Http) {
  }
}

And I get following error:

EXCEPTION: Cannot resolve all parameters for TodoList(?). Make sure they all have valid type or annotations.
angular2.dev.js?v=0.0.0:22367 STACKTRACE:
angular2.dev.js?v=0.0.0:22367 Error
    at NoAnnotationError.BaseException (angular2.dev.js?v=0.0.0:7735)
    at new NoAnnotationError (angular2.dev.js?v=0.0.0:9092)
    at _dependenciesFor (angular2.dev.js?v=0.0.0:25801)
    at execute.Binding.resolve (angular2.dev.js?v=0.0.0:25933)
    at _resolveBindings (angular2.dev.js?v=0.0.0:26948)
    at Function.execute.Injector.resolve (angular2.dev.js?v=0.0.0:27609)
    at Function.execute.DirectiveBinding.createFromBinding (angular2.dev.js?v=0.0.0:28206)
    at Function.execute.DirectiveBinding.createFromType (angular2.dev.js?v=0.0.0:28237)
    at execute.Compiler._bindDirective (angular2.dev.js?v=0.0.0:29479)
    at execute.Compiler.compileInHost (angular2.dev.js?v=0.0.0:29495)

Any ideas how to get this work?

Convert to TypeScript

Could you create a branch or upgrade to a scenario where there's a typescript transpiling build step and you can drop the dependency on traceur.

Add sass/less

bootstrap 4

Update to angular2-alpha34

Error in Safari Version 8.0.7 (10600.7.12)

Hi all,

I'm getting the following error in Safari Version 8.0.7 (10600.7.12), everything works fine in FireFox/Chrome latest version:

[Error] TypeError: undefined is not a function (evaluating '$__2.next()')

from@http://localhost:5555/lib/traceur-runtime.js?v=0.0.0:2717:102
values@http://localhost:5555/lib/angular2.js?v=0.0.0:4710:30
_createListOfBindings@http://localhost:5555/lib/angular2.js?v=0.0.0:23646:29
resolve@http://localhost:5555/lib/angular2.js?v=0.0.0:24265:41
resolveAndCreate@http://localhost:5555/lib/angular2.js?v=0.0.0:24269:52
_createAppInjector@http://localhost:5555/lib/angular2.js?v=0.0.0:26476:48
http://localhost:5555/lib/angular2.js?v=0.0.0:26457:43
run@http://localhost:5555/lib/zone.js?v=0.0.0:113:22
http://localhost:5555/lib/angular2.js?v=0.0.0:10596:43
run@http://localhost:5555/lib/angular2.js?v=0.0.0:10563:41
bootstrap@http://localhost:5555/lib/angular2.js?v=0.0.0:26456:13
http://localhost:5555/:37:21
global code@http://localhost:5555/:40:8
appendChild@[native code]
doEval@http://localhost:5555/lib/system.src.js?v=0.0.0:2347:23
__eval@http://localhost:5555/lib/system.src.js?v=0.0.0:2317:13
exec@http://localhost:5555/lib/system.src.js?v=0.0.0:339:11
execute@http://localhost:5555/lib/system.src.js?v=0.0.0:1222:22
linkDynamicModule@http://localhost:5555/lib/system.src.js?v=0.0.0:669:36
link@http://localhost:5555/lib/system.src.js?v=0.0.0:528:28
execute@http://localhost:5555/lib/system.src.js?v=0.0.0:852:15
o@http://localhost:5555/lib/es6-module-loader-sans-promises.js?v=0.0.0:7:7021
p@http://localhost:5555/lib/es6-module-loader-sans-promises.js?v=0.0.0:7:7387
j@http://localhost:5555/lib/es6-module-loader-sans-promises.js?v=0.0.0:7:4933
k@http://localhost:5555/lib/es6-module-loader-sans-promises.js?v=0.0.0:7:5318
http://localhost:5555/lib/es6-module-loader-sans-promises.js?v=0.0.0:7:5509
run@http://localhost:5555/lib/zone.js?v=0.0.0:113:22
zoneBoundFn@http://localhost:5555/lib/zone.js?v=0.0.0:86:22
PromiseResolutionHandlerFunction@[native code]
    logError (angular2.js, line 17329)
    defaultErrorReporter (angular2.js, line 26442)
    _onError (angular2.js, line 10639)
    onError (angular2.js, line 10582)
    run (zone.js, line 116)
    (anonymous function) (angular2.js, line 10596)
    run (angular2.js, line 10563)
    bootstrap (angular2.js, line 26456)
    (anonymous function) (localhost, line 37)
    global code (localhost, line 40)
    appendChild ([native code], line 0)
    doEval (system.src.js, line 2347)
    __eval (system.src.js, line 2317)
    exec (system.src.js, line 339)
    execute (system.src.js, line 1222)
    linkDynamicModule (system.src.js, line 669)
    link (system.src.js, line 528)
    execute (system.src.js, line 852)
    o (es6-module-loader-sans-promises.js, line 7)
    p (es6-module-loader-sans-promises.js, line 7)
    j (es6-module-loader-sans-promises.js, line 7)
    k (es6-module-loader-sans-promises.js, line 7)
    (anonymous function) (es6-module-loader-sans-promises.js, line 7)
    run (zone.js, line 113)
    zoneBoundFn (zone.js, line 86)
    PromiseResolutionHandlerFunction ([native code], line 0)
[Error] TypeError: undefined is not a function (evaluating '$__2.next()')
    (anonymous function) (angular2.js, line 10609)
    run (angular2.js, line 10563)
    bootstrap (angular2.js, line 26456)
    (anonymous function) (localhost, line 37)
    global code (localhost, line 40)
    appendChild ([native code], line 0)
    doEval (system.src.js, line 2347)
    __eval (system.src.js, line 2317)
    exec (system.src.js, line 339)
    execute (system.src.js, line 1222)
    linkDynamicModule (system.src.js, line 669)
    link (system.src.js, line 528)
    execute (system.src.js, line 852)
    o (es6-module-loader-sans-promises.js, line 7)
    p (es6-module-loader-sans-promises.js, line 7)
    j (es6-module-loader-sans-promises.js, line 7)
    k (es6-module-loader-sans-promises.js, line 7)
    (anonymous function) (es6-module-loader-sans-promises.js, line 7)
    run (zone.js, line 113)
    zoneBoundFn (zone.js, line 86)
    PromiseResolutionHandlerFunction ([native code], line 0)
[Error] Error loading "app" at http://localhost:5555/app.js?v=0.0.0
Error evaluating http://localhost:5555/app.js?v=0.0.0
TypeError: undefined is not a function (evaluating '$__2.next()') Report this error at https://github.com/mgechev/angular2-seed/issues
    (anonymous function) (init.js, line 6)
    run (zone.js, line 113)
    zoneBoundFn (zone.js, line 86)
    run (zone.js, line 113)
    zoneBoundFn (zone.js, line 86)

Thanks,

Jean

Update to System.js 0.18.x

error when trying to run on windows 8.1

tried to run the project on windows machine - getting error:
Y:\Projects\angular2-seed>gulp serve.dev
module.js:338
throw err;
^
Error: Cannot find module 'orchestrator'

Issue running 'gulp test' on Mac OS X

Seems to me like the issue might be that angular2/src/dom has moved to angular2/src/core/dom. Any suggestions?

[15:09:32] Using gulpfile ~/angular2-testing-workspace/angular2-seed-master/angular2-seed/gulpfile.js
[15:09:32] Starting 'build.test'...
[15:09:33] Finished 'build.test' after 1.43 s
[15:09:33] Starting 'karma.start'...
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 45.0.2454 (Mac OS X 10.10.4)]: Connected on socket AeqoYSodQAdji5r-oG6W with id 68524546
WARN [web-server]: 404: /base/node_modules/angular2/src/dom/browser_adapter.js
Chrome 45.0.2454 (Mac OS X 10.10.4) ERROR: 'Error: XHR error (404 Not Found) loading http://localhost:9876/base/node_modules/angular2/src/dom/browser_adapter.js
    at error (http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?deda5de3b4d843472833379dc10cf66e0aadf1d1:1028:16)
    at XMLHttpRequest.xhr.onreadystatechange [as _onreadystatechange] (http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?deda5de3b4d843472833379dc10cf66e0aadf1d1:1036:13)
    at Zone.run (http://localhost:9876/base/node_modules/angular2/node_modules/zone.js/dist/zone-microtask.js?9d13d72f0e39872af35679eec834b2bdb30db775:118:17)
    at XMLHttpRequest.zoneBoundFn (http://localhost:9876/base/node_modules/angular2/node_modules/zone.js/dist/zone-microtask.js?9d13d72f0e39872af35679eec834b2bdb30db775:91:19)'

Chrome 45.0.2454 (Mac OS X 10.10.4): Executed 0 of 0 ERROR (0.002 secs / 0 secs)
[15:09:35] 'karma.start' errored after 2.21 s
[15:09:35] Error: 1
    at formatError (/usr/local/lib/node_modules/gulp/bin/gulp.js:169:10)
    at Gulp.<anonymous> (/usr/local/lib/node_modules/gulp/bin/gulp.js:195:15)
    at Gulp.emit (events.js:107:17)
    at Gulp.Orchestrator._emitTaskDone (/Users/jakepartusch/angular2-testing-workspace/angular2-seed-master/angular2-seed/node_modules/gulp/node_modules/orchestrator/index.js:264:8)
    at /Users/jakepartusch/angular2-testing-workspace/angular2-seed-master/angular2-seed/node_modules/gulp/node_modules/orchestrator/index.js:275:23
    at finish (/Users/jakepartusch/angular2-testing-workspace/angular2-seed-master/angular2-seed/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
    at cb (/Users/jakepartusch/angular2-testing-workspace/angular2-seed-master/angular2-seed/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
    at removeAllListeners (/Users/jakepartusch/angular2-testing-workspace/angular2-seed-master/angular2-seed/node_modules/karma/lib/server.js:215:7)
    at Server.<anonymous> (/Users/jakepartusch/angular2-testing-workspace/angular2-seed-master/angular2-seed/node_modules/karma/lib/server.js:226:9)
    at Server.g (events.js:199:16)

Allow live reloading in browser

It would be nice to have auto reloading in browser when files are saved.

Typings : Should we gather them through npm install ?

Do we need to add typings that aren't part of the official packages to fix alpha issues ? If not we could easily install the typings when we install the dependencies as a postinstall script in the package.json.

Remove the second copy of Angular 2 from the bundle

Based on #44

Relative assets path does not work with deep linking

Loding the app from http://domain.com/user/123 make assets loading relative to http://domain.com/user/.
#18 introduced this bug.

Question: http libraries from angular2/angular2 ?

Why not leave the imports in the place most people will be taught to import from?

Shouldn't httpInjectables and Http come from "angular2/http" ?

I think this will confuse people more than help.

Any reason not to use webpack?

build.js.prod does not append version to template url

.html?v=<%= VERSION %> does not update on build prod.

Adding angular2/forms

I am trying to import stuff from angular2/forms inside a component. I have added "forms" analogue to router in the gulpfile, but the typescript compiler still cannot find the angular2/forms module (app\components\home\form.ts(2,78): error TS2307: Cannot find external module 'angular2/forms'.). Is there something specfic in the seed project that I need to change / add?