b091 / ts-skeleton Goto Github PK

Hello, Thank you for great starting point of NG+ TS.

I am trying to test controller, but I have no access to inject function in beforEach construction inside spec file. Could you please create sample test for internal functions of controller?

It used to work prior to the recent updates, but as of now every time I try to run the task I get an error like so :

[10:30:21] 'test:unit' errored after 3.69 s
[10:30:21] 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/..../test-ts-skeleton/ts-skeleton/node_modules/gulp/node_modules/orchestrator/index.js:264:8)
    at /Users/..../test-ts-skeleton/ts-skeleton/node_modules/gulp/node_modules/orchestrator/index.js:275:23
    at finish (/Users/...../test-ts-skeleton/ts-skeleton/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
    at cb (/Users/...../test-ts-skeleton/ts-skeleton/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
    at removeAllListeners (/Users/..../test-ts-skeleton/ts-skeleton/node_modules/karma/lib/server.js:332:7)
    at Server.<anonymous> (/Users/...../test-ts-skeleton/ts-skeleton/node_modules/karma/lib/server.js:343:9)
    at Server.g (events.js:199:16)
    at Server.emit (events.js:129:20)
    at net.js:1409:10
    at process._tickCallback (node.js:355:11)

Process finished with exit code 1

Any clue as to why? :squirrel:

We took the last seed of the project and tried to run

gulp build

Unfortunately this leads us to:

Build Failed [Error: ENOENT: no such file or directory, open '/Users/xample/Documents/Icflix/SmartTV/TEST/ts-skeleton/src/index']

The workaround was to remove the line 10 on the jspm.conf.js

  paths: {
    "github:*": "vendor/jspm_packages/github/*",
    "npm:*": "vendor/jspm_packages/npm/*",
    "app": "src/index" // <- remove this line
  },

…and to hardcode the module main file into build-dist.js

var mainfile = "src/index.js"
return builder.buildStatic(mainfile, outFile, buildConfig);

I tried to take older seeds, npm install, jspm install but the problem persisted. Another coworker faced the same issue. Here below are the globals:

mbp:src example$ gulp --version
[17:51:17] CLI version 3.9.1
[17:51:17] Local version 3.9.1

mbp:src example$ tsc --version
message TS6029: Version 1.7.5

mbp:src example$ tsd --version
>> tsd 0.6.5

mbp:src example$ jspm --version
0.16.27

What is the purpose of this ?

    //For non-angular apps (line 12)
    global.ignoreSynchronization = function () {
      return browser.ignoreSynchronization = true;
    };

i.e. you assign something and return it the same way. Shouldn't it be one of those ?

      return browser.ignoreSynchronization;

or

      return browser.ignoreSynchronization === true;

Having problem to access the isolated scope in my directive.
I want to replace:

'Big title here';
'Small title here';

with the isolated scope values.

I have tried most of the things but can't get the inserted value:
<page-header data-title="Server" data-small-title="dashboard"></page-header>

Here is the rest of the code:

page-header.html

<div class="page-header">
    <h1>
        {{title}} <small data-ng-if="smallTitle.length">{{smallTitle}}</small>
    </h1>
</div>

PageHeader.ts

import {directive} from '../../decorators/directive';

export interface IPageHeaderScope extends ng.IScope {
    title: string;
    smallTitle: string;
}

@directive()
export class PageHeader implements ng.IDirective {
    templateUrl: string = 'src/shared/directives/view/page-header.html';
    restrict: string = 'E';
    scope: Object = {
        title: '@title',
        smallTitle: '@smallTitle'
    };

    public link: Function = (scope: IPageHeaderScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: ng.INgModelController): void => {
        scope.title = 'Big title here';
        scope.smallTitle = 'Small title here';
    };

    // @ngInject
    constructor() {
    }
}

Just a thought, i think this project should be more future proof if we implemented decorators?

Se this script for reference:
Decorators.js

Update

Found this: https://github.com/ngUpgraders/ng-forward

Just passing by, notifying that tsd is now deprecated in favour of typings.

Is it possible to build a self-executing bundle that I can include with a script tag without having to include system.js, just like jspm.bundleSFX?
I've tried setting "format" in config to "system", which gives me:

[Error: ENOENT: no such file or directory, open '/Users/danny/web/ts-skeleton/node_modules/jspm/node_modules/systemjs-builder/templates/sfx-system.js'

I also tried "esm" as format but then the browser console gives me:
Uncaught ReferenceError: define is not defined.

In both cases I replaced System.import('./src/index'); with <script src="src/index.js"></script>

Apparently this does not work so I was hoping you could help me with this.
Thanks for an awesome project!

I'd like to use Webstorm or VS Code to run your example. However, I can't quite figure out how to modify the configuration to run your "gulp serve" task.

Do you have an example you can share? (VS Code preferred ...)

Or even Visual Studio Community with the node.js tools installed ...

while typing

gulp task

Gulp will compile the files and run the unit and e2e tests.

gulp.task('test', ['compile', 'test:unit', 'test:e2e']);

While the e2e is served and tested correctly, here is what I get from the unit testing:

[15:27:31] Starting 'compile:test'...
[15:27:31] Finished 'clean:src' after 2.48 s
[15:27:31] Starting 'compile:src'...
WARNING - pattern /Users/me/ts-skeleton/test/e2e/initialization.spec.js did not match any files.
[launcher] Process exited with error code 1
…

I need to manually run the following:

gulp compile
gulp test:unit

I've found one possible related issues: angular/protractor#2551
But the version included is "protractor": "~3.0.0" so…

any idea / workaround ?

This issue is addressed to ts-skeleton users as much as to @b091 who created this future proof TypeScript stack skeleton.
The problem, we currently noticed is that we have very similar tech stack in our four projects written in TypeScript, but we have to maintain it in every project separately.

Problem: maintaining the tech-stack

Let's look into problems with ts-skeleton itself:

• one day the build task stopped working due to silent update of systems-builder
• another day, one of the tools we use, became deprecated

Now each of us need to correct configuration of their project. What a waste of time! Every time when the tslint, typedoc, jspm, sytemjs or whatever else configuration API changes, we need to make changes in all our projects.

Do our projects really need as much individual configurations? What are main differences between them, that force specific configuration?

Solution: convention

The problem is present also in other technologies. We bumped into the problem in JS world very late. For a long time, the fact that there is no built-in module manager in JavaScript, was not a problem. Now we build more and more complex front-end applications and the tools like webpack and systemjs appeared. Maybe it's time to move a bit forward and create a tool which will handle not only building (systemjs), dependency management (jspm) but also:

• documentation
• reporting
• releases
• and distribution?

Sounds familiar? It's what Maven does for Java projects.

... Maven is about the application of patterns in order to achieve an infrastructure which displays the characteristics of visibility, reusability, maintainability, and comprehensibility.

(Philosophy of Maven)
Maven follows "convention over configuration" principle, which allow it's users to get a new project or module started in seconds.

Convention: project structure

One of the major things which make our gulp tasks different between our projects is directory structure. To not invent the wheel again, I suggest to follow the maven project structure while it make sense for us:

project root
 |- package.json // containing project-specific options for our tool
 |- node_modules
 |- src
 |  |- main
 |  |  |- typescript
 |  |  |  |- Main.ts
 |  |  |  `- tslint.json
 |  |  |- images
 |  |  `- less // or sass or simply css
 |  `- test
 |     |- typescript
 |     `- resources
 |- target // or dist, maybe?
 |- vendor
 |  |- jspm_packages
 |  `- typings
 |- index.html // root file for app projects
 `-README.md

However it's only proposal (to be discussed). Project structure is one of the things that must be thoroughly discussed, as it's really hard to change in the future. We should find an appropriate place for generated docs, reports, distribution files, e2e tests (or maybe e2e tests should be placed in a separate project? – to be discussed).

Convention: shared tools

Of course the idea of the tool is not to implement building, dependencies management etc. itself. To avoid tons of configuration for each project, we need to select one tool for each task. So, here are my proposals (already used in ts-skeleton):

Building (package management)

tool: Systemjs
Configuration of systemjs is a part of JSPM configuration (see below)
We should provide two types of projects:

• library, which build contains index.js and index.js.map
• application, which build contains index.html and directories with images and other resources

Dependency management

tool: JSPM
List of dependencies as well as configuration of non-standard registries, may be provided in custom section of package.json. From options provided in this section we could generate jspm config and dependencies list (invisible in root package.json file). Location of jspm_packages as well as most options jspm.conf.js could be forced by the convention (to be discussed).

Documentation

tool: Typedoc

Tests

tool: Karma
Other tests frameworks (and karma plugins) could be specified by the user. Maybe main part of the karma.conf.js should also be forced by the convention (to be discussed)?

Reports

• test coverage tool: Istanbul until we get better tool for test coverage calculation
• code quality: TSLint, ESLint

Develoment server

tool: browser-sync

Distribution

tool: ?
We should support distribution via:

• npm (with support for private packages)
• git
• Maven artifactory (maybe as a plugin – to be discussed)

Assumtions:

• most of the projects no longer need to have karma, gulp and other tools in dependencies - we guarantee that all tools have latest versions and work together
• project setup is simple and follows best practices
• we are able to easily work with multiple projects at the same time

I have problems using internal modules across multiple files.
It seems to be very similar to the one described here:
http://stackoverflow.com/questions/31041311/typescript-internal-module-across-multiple-files-in-nodejs

Basically I tried to reproduce the example here:
http://www.typescriptlang.org/Handbook#modules-splitting-across-files

But it seems that:

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />

Is only useful for the editor, once the code compiled, looking at the .js file nothing was actually imported and I get an "Uncaught (in promise) Error: Validation is not defined(…)" at runtime.

My first idea is jspm is not supporting those dependencies as TSC is using the -out argument

Any idea / suggestion / solution ?