b091 / ts-skeleton Goto Github PK
View Code? Open in Web Editor NEWTypescript Angular Skeleton Application
License: Other
Typescript Angular Skeleton Application
License: Other
Just passing by, notifying that tsd
is now deprecated in favour of typings
.
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 ...
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
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:
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() {
}
}
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?
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 ?
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.
Let's look into problems with ts-skeleton itself:
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?
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:
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.
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).
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):
tool: Systemjs
Configuration of systemjs is a part of JSPM configuration (see below)
We should provide two types of projects:
index.js
and index.js.map
index.html
and directories with images and other resourcestool: 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).
tool: Typedoc
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)?
tool: browser-sync
tool: ?
We should support distribution via:
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;
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!
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 ?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.