thelgevold / angular-samples Goto Github PK

Not matter what IDE i use, i get compiler errors? What IDE are you using and how do i start the typescript compiler using tsc? Cannot find angular2/core

Can you possibly tell me why typescript won't transpile anything in the lazy-load folder? I assumed the tsd just went through each folder and transpiled the files. But it would appear that it's using the app.ts file to find each dependency and transpile them, which is why it's ignoring the lazy-load folder.

@thelgevold
Thanks for the great resource.

I can't get the demo site to render with Chrome Version 47.0.2526.111 m, which I presume should have all the capabilities to run this site.

Things work fine when opening on Firefox 43.0.4

Here's a screenshot of the developer console on attempting to reload (Shift F5) the demo site.

Any ideas what might be going wrong here?

Many thanks.

Firstly, I'd like to say thanks, this is a very useful repository of examples.

In the contact-list example, you're using one-way data binding. I'd be interested to know what your approach would be to reset the name and phone input fields, for example after adding a contact.

Would you please give some Angular2 example for lazy loading? Many Thanks!

Here is an example of the user case:

I would like to dynamically create an angular module on the page:

If I get {module-type: "p"} from backend, the module would be a customized "p" element with some specific control functions p-functions;

If I get {module-type: "input"} from backend, the module would be a customized "input" element with some specific control functions input-functions.

I figured out that I could implement this in angular1.x by modifying compiler. However I did not know how to implement it in Angular2.

app.ts(10,20): error TS2305: Module '"/home/savages/wsp/angular-2-samples.3_20/node_modules/angular2/core"' has no exported member 'View'.

I am using angular2 version beta11.

Just starting to learn angular2

Hello, when i call http post, so in my servr not recieve $_POST data, i thing, i missing systax.
that my code:
var creds = "identity=1&password=1";
return this.http.post(this.getUrl(action), creds,{
headers: headers
});

how can i fix it?

Once again - thanks for great code! As an experienced Java person, but a TypeScript newbie (and much to the derision of my colleague) I'm trying to Java-ize my TypeScript. At the very least, I'm trying to fully exploit static typing (more derision). With that in mind. Consider below a rearrangement to your sorting code (and with a tiny enhancement).

Your examples are just the best.

insertion-sort.ts (components)

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
import {Insertion, ValList, ListItem} from '../../algorithms/insertion-sort';

@Component({
    selector: 'insertion-sort',
    properties: ['list: list']
})

@View({
    templateUrl: './components/insertion-sort/insertion-sort.html',
    directives: [CORE_DIRECTIVES]
})

export class InsertionSort {

    list:ValList;

    constructor(){
        this.list = new ValList();
        this.randomize();
    }

    sortList(){
        Insertion.sort(this.list)
    }

    randomize() {
         this.list.items.length = 0;

        for (let ia = 0; ia < 15; ++ia) {
             this.list.items.push(new ListItem(Math.floor(Math.random() * 100) - 50));
        }
    }
}

insertion-sort.ts (algorithms)

export class ValList{
    items: Array<ListItem> = [];

    setCurrent(item){
        this.clearAll();
        item.current = true;
    }

    clearAll(){
        this.items.forEach(i => i.current = false);
    }
}

export class ListItem {
    val: Number;
    current: Boolean;

    constructor(val) {
        this.val = val;
        this.current = false;
    }

    getClass(){
        if(this.current){
            return 'current-item';
        }
        return null;
    }
}

export class Insertion{

    static sort(input : ValList) {

        for(let j = 1; j < input.items.length; j++){

            (function(j){
                setTimeout(() => {
                    let key = input.items[j].val;

                    let i = j - 1;

                    while(i >= 0 && input.items[i].val > key){
                        input.items[i + 1].val = input.items[i].val;
                        i = i - 1;
                    }

                    input.items[i + 1].val = key;
                    input.setCurrent(input.items[i + 1]);

                },1000 * j);
            })(j);
        }
    }
}

insert-sort.html

<table class="sort">
    <tr>
        <td *ng-for="#item of list.items" [ng-class]="item.getClass()">
            <span>{{item.val}}</span>
        </td>
    </tr>
</table>
<div style="margin-top: 10px;">
    <button (click)="sortList()">Sort list</button>
    <button (click)="randomize()">Randomize</button>
</div>

According to your comments, i should be able to run this demo by downloading the project but this doesn't work. Its appears bower_component is missing..how do i generate this bower directory?

https://github.com/thelgevold/angular-2-samples/blob/master/unit-test-scenarios/event-emitter/event-emitter-spec.ts

I was using the example you have on testing an EventEmitter and I discovered that my test was passing because the test runner could not find an expectation. Try changing the expect inside the subscription to be something you know will fail (like expect false to equal true) and your test might still come back that it passed.

Maybe I just have something setup incorrectly so I'm sorry if I'm wrong about this but I just wanted to give you a warning.

Chrome and Edge

Am I missing something obvious here? Your package.json file seems to be missing some key dependencies- - as angular2, etc. No NPM scripts. The tsc command that you suggest does not run. I have no idea how to compile and run your demo.

Bower component: May i know how to link bower component in angular2 app 1. bower install bootstrap 2. index.html

<script src="bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

I am getting 404 issue

Hi,
I was trying to run the project on my local jenkins
It failed in the build stage
error below:
[0m�[91mERROR: /root/.cache/bazel/_bazel_root/7d8fdfd7c15a233be456f2a7a7f5337a/external/local_jdk/BUILD.bazel:155:1: @local_jdk//:jdk-lib: invalid label 'lib/ssl/certs/NetLock_Arany_=Class_Gold=_F��tan��s��tv��ny.pem' in element 4490 of attribute 'srcs' in 'filegroup' rule: invalid target name 'lib/ssl/certs/NetLock_Arany_=Class_Gold=_F��tan��s��tv��ny.pem': target names may not contain non-printable characters: '\x91' �[0m�[91mERROR: /root/.cache/bazel/_bazel_root/7d8fdfd7c15a233be456f2a7a7f5337a/external/local_jdk/BUILD.bazel:39:1: Target '@local_jdk//:windows' contains an error and its package is in error and referenced by '@local_jdk//:java' �[0m�[91mERROR: /root/.cache/bazel/_bazel_root/7d8fdfd7c15a233be456f2a7a7f5337a/external/bazel_tools/tools/jdk/BUILD:72:1: Target '@local_jdk//:java' contains an error and its package is in error and referenced by '@bazel_tools//tools/jdk:java' �[0m�[91mERROR: Analysis of target '//src/apps/backend:backend' failed; build aborted: Analysis failed �[0m�[91mINFO: Elapsed time: 37.420s INFO: 0 processes. FAILED: Build did NOT complete successfully (12 packages loaded, 1838 targets configured) �[0m�[91mFAILED: Build did NOT complete successfully (12 packages loaded, 1838 targets configured) �[0m�[91merror Command failed with exit code 1. �[0minfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. The command '/bin/sh -c yarn build-all' returned a non-zero code: 1

Please let me know if you need more information
Also please excuse my ignorance if I missed something

Thanks

Hi,
Sorry for my ignorance here
The image is 6.6 gb which is huge.
Because of the size I am unable to push the image to our Nexus repo
So my questions are
Any idea if the size can be reduced?
Where can I deploy the app?

I had compilation errors.
I found problem diagnostics and fixes in the following articles:
http://stackoverflow.com/questions/35890524/events-js154-throw-er-unhandled-error-event
http://stackoverflow.com/questions/34290796/events-js-141-throw-er-unhandled-error-event
And
http://stackoverflow.com/questions/38110233/angular2-build-errors-cannot-find-types
http://stackoverflow.com/questions/35660498/angular-2-cant-find-promise-map-set-and-iterator

Fixed and submitted a pull request.

Please specify how this code is built in a Readme. If you are using Gulp or Grunt, please include the Gulpfile or Gruntfile you use to build the app. Thank you.

http://www.syntaxsuccess.com/angular-2-samples/

Uncaught TypeError: Array.from is not a function

Can you please provide an example for a component hierarchy? Something like:

<component-1 class="component-1">
    <component-2 class="component-2">
         <component-3 class="component-3">
         </component-3>
    </component-2>
</component-1>

NOTES:

• I like to see an example where component-2 maintains a data list that component-3 iterates over and displays its items so that I can see an example of cross-hierarchy data access. E.G.

  Data:
  <script>
      var nameList = [
          {first: 'John', last: 'Doe'},
          {first: 'Jane', last: 'Doe'},
      ];
  </script>

  Component-1 template:
  <div class="name-directory">
      <component-2 content goes here>
  </div>

  Component-2 template:
  <div class="name-list">
      <component-3 content goes here>
  </div>

  Component-3 template:
  <div class="list-item">
      <ul *ng-for="#name in nameListInComponent2">
          <li>{{#name.last}}, {{#name.first}}</li>
     </ul>
  </div>

• I would like for the whole component hierarchy to be re-usable in an app page.

As given this can probably be simplified but the point of the exercise is to see how component insertion works in a hierarchy of components.

I have all this working in our Angular 1 with directives/transclusion but having a hard time migrating it to Angular 2.

In My index.html I have included Canvasjs.min.js as

And in click event of a button a function is called e.g bar()

In function:

bar(){
bar(){
var chart = new CanvasJS.Chart("chartContainer", {

  title:{
    text: "Fruits sold in First Quarter"              
  },
  data: [
    { 


     type: "column",
     dataPoints: [
     { label: "banana", y: 18 },
     { label: "orange", y: 29 },
     { label: "apple", y: 40 },                                    
     { label: "mango", y: 34 },
     { label: "grape", y: 24 }
     ]
   }
   ]
 });

chart.render();

}
}

Now it says CanvasJs is not defined

You need rename angular-2-samples to angular-samples

Please help me to find install specific treeview component via npm install command, instead of all samples?

Hi @thelgevold I really enjoy your demo's!

I can't get the text editor example working...not sure what is expected there?
http://www.syntaxsuccess.com/angular-2-samples/#/demo/text-editor

How do we do for checkbox list?

rxjs caching not clear

java -jar ./closure-compiler/compiler.jar --compilation_level SIMPLE_OPTIMIZAT
IONS --language_in=ES6 --language_out=ES5 --js ./dist/temp.js --js_output_file d
ist/bundle.js

ERROR - Cannot read: ./dist/temp.js

1 error(s), 0 warning(s)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\
node_modules\npm\bin\npm-cli.js" "run" "closure-compiler"
npm ERR! node v7.0.0
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] closure-compiler: java -jar ./closure-compiler/comp iler.jar --compilation_level SIMPLE_OPTIMIZATIONS --language_in=ES6 --language_o ut=ES5 --js ./dist/temp.js --js_output_file dist/bundle.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] closure-compiler script 'java -jar ./c
losure-compiler/compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --language
_in=ES6 --language_out=ES5 --js ./dist/temp.js --js_output_file dist/bundle.js'.

npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-poc package,

npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! java -jar ./closure-compiler/compiler.jar --compilation_level SIMPL
E_OPTIMIZATIONS --language_in=ES6 --language_out=ES5 --js ./dist/temp.js --js_ou
tput_file dist/bundle.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-poc
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-poc
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Dev\WebEvalSamples\Angular\angular-2-samples\npm-debug.log

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\
node_modules\npm\bin\npm-cli.js" "run" "install-application"
npm ERR! node v7.0.0
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] install-application: npm run clean && npm run aot & & npm run rollup && npm run closure-compiler
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install-application script 'npm run cl
ean && npm run aot && npm run rollup && npm run closure-compiler'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-poc package,

npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run clean && npm run aot && npm run rollup && npm run closure-c
ompiler
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-poc
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-poc
npm ERR! There is likely additional logging output above.

In angular-2-samples/unit-test-scenarios/event-emitter/event-emitter-spec.ts folder, can you explain the code there?

My understand about your code would be: you called the function sayHello() in the code manually.

1. why don't you use mouse event function like click(). Of course, I don't know if there is such click function exist.
2. why put child.sayHello(); after child.greeting.subscribe()?
3. Can you explain how the done function work here? Is there any other way to handle asyn problem. I have heard that angular2 make it more easier to deal with the problem.
4. When I looked at your blog: http://www.syntaxsuccess.com/viewarticle/angular-2.0-unit-testing. I still have some questions. Can you recommend me some reference to learn Angular2 an Angular2 unit testing?

In your component Jquery-integration, you use Jquery. But in the app , you import it in the .html.

Couldnt you make it so we dont need to <script src="//jquery.js"> everytime we use this component ?

Place the cursor anywhere in the Virtualized Spreadsheet in Demos. Press tab. The cursor advances to the next cell but returns to the original cell immediately. Similarly with shift-tab.

Hi,
I need to know how to use 'ng-switch on' attribute in angular 2

Thanks
Balaji

Which version of node.js you are using?
I faced a syntax error when executing npm run rollup on node.js v7.2.1. It seems that node.js v7.2.1 still does not work with ES6 'import'. Or did I get anything wrong?
Please help me!

When I clone your repository, ran npm install && bower install and the tsc command from the readme, I get the error from bellow.
I started trying to change the different typing files etc, but couldn't find a working solution.
Any suggestions?

It seems there is some mismatch between the checked in typings folder and the tsd.json.

typings/angular2/router.d.ts(136,70): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(146,43): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(151,29): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(157,19): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(187,54): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(194,51): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(200,56): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(210,59): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(222,54): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(332,51): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(831,87): error TS2304: Cannot find name 'Promise'.
typings/angular2/router.d.ts(916,29): error TS2304: Cannot find name 'Promise'.

Your sample does not throw this, but mine does. Wondering what may be different. Did you ever see this?

EXCEPTION: TypeError: Cannot read property 'annotations' of undefined
angular2.dev.js:21984 EXCEPTION: TypeError: Cannot read property 'annotations' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:21984BrowserDomAdapter.logGroup @ angular2.dev.js:21995ExceptionHandler.call @ angular2.dev.js:4426(anonymous function) @ angular2.dev.js:19685NgZone._notifyOnError @ angular2.dev.js:10746NgZone._createInnerZone.errorHandling.onError @ angular2.dev.js:10654run @ angular2.dev.js:141NgZone._createInnerZone.zone.fork.fork.$run @ angular2.dev.js:10669zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519(anonymous function) @ angular2.dev.js:2067(anonymous function) @ angular2.dev.js:219NgZone._createInnerZone.zone.fork.fork.$scheduleMicrotask.microtask @ angular2.dev.js:10701run @ angular2.dev.js:138NgZone._createInnerZone.zone.fork.fork.$run @ angular2.dev.js:10669zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21984 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:21984ExceptionHandler.call @ angular2.dev.js:4428(anonymous function) @ angular2.dev.js:19685NgZone._notifyOnError @ angular2.dev.js:10746NgZone._createInnerZone.errorHandling.onError @ angular2.dev.js:10654run @ angular2.dev.js:141NgZone._createInnerZone.zone.fork.fork.$run @ angular2.dev.js:10669zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519(anonymous function) @ angular2.dev.js:2067(anonymous function) @ angular2.dev.js:219NgZone._createInnerZone.zone.fork.fork.$scheduleMicrotask.microtask @ angular2.dev.js:10701run @ angular2.dev.js:138NgZone._createInnerZone.zone.fork.fork.$run @ angular2.dev.js:10669zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21984 TypeError: Cannot read property 'annotations' of undefined
    at ReflectionCapabilities.annotations (angular2.dev.js:4775)
    at Reflector.annotations (angular2.dev.js:4572)
    at Object.getCanActivateHook (route_lifecycle_reflector.js:11)
    at router.js:490
    at Zone.run (angular2.dev.js:138)
    at Zone.NgZone._createInnerZone.zone.fork.fork.$run [as run] (angular2.dev.js:10669)
    at zoneBoundFn (angular2.dev.js:111)
    at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1507)
    at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1519)
    at angular2.dev.js:2067

Hi -

First off - amazing and thanks. The application seems to run perfectly. Note that I updated to 1.6.0-beta. So, when I "compiled" (Sep. 7), I get the two hits below.

Thanks.

Steve

tsc --version
message TS6029: Version 1.6.0-beta

tsc --watch -m commonjs -t es5 --emitDecoratorMetadata --experimentalDecorators app.ts
app.ts(10,2): error TS2345: Argument of type 'typeof MyDemoApp' is not assignable to parameter of type 'Type'.
app.ts(14,2): error TS2345: Argument of type 'typeof MyDemoApp' is not assignable to parameter of type 'Type'.

Today I was checking your examples and for a few seconds I got a blank page, that was weird. Nothing in the console, but when I changed to network tab I saw that it took ~15secs to load (mostly because of loading of every RxJS operator). I think that using a bundler like Webpack (the only I have experience with so far) will save you a lot of that. You can get a huge bundle, but with minification/uglfication you can get a ~500kb file.

I'm not sure what's the best option here to be honest, but I think it would be nice from you to consider it.