Yes, what you&#39;re looking for is possible and works nicely. It appears as though you have the dependencies right. I think you are missing only the following, which needs to be at the beginning of your top level typescript or JavaScript file. Specifically, these need to be prior to the first line is that loads Angular.

    import &#39;zone.js&#39;;
    import &#39;reflect-metadata&#39;;

(The other answer points to a detailed, but off-site explanation.)



[Robwormald][1] wrote a nicely detailed explanation that covers the issues people might have at this point and time trying to get angular alpha 27 to work with jspm and typescript https://gist.github.com/robwormald/429e01c6d802767441ec


  [1]: https://gist.github.com/robwormald

If this problem occurs in an Angular 4.4+ environment, it can help if you restart ``ng serve``.

I have read a couple of articles about styling the placeholder of an input field using `::-webkit-input-placeholder` in HTML5. It works perfectly, except for one thing.

If I try to increase the font-size to a value higher than 16px, the text gets &quot;cut&quot; at the bottom. This happens regardless of height and padding of the input itself. Does anyone know a way of avoiding this problem, either using pure CSS or javascript?

I have added a screenshot of two inputfields where the placeholders have an font-size of 20px

![enter image description here][1]


  [1]: http://i.stack.imgur.com/8NdnH.png

Jsfiddle: https://jsfiddle.net/bvwdg86x/

Placeholder font-size bigger than 16px

I&#39;m looking at asp.net vnext [engineering guideline](https://github.com/aspnet/Home/wiki/Engineering-guidelines) and have noticed that they recommend to use `NotNull` attribute instead of explicit checking of input argument for null and throwing `ArgumentNullException`. The thing that confused me is that base on this guideline it is just enough to declare this attribute and the checking code will be generated at compile time into the method body. I&#39;ve tried to do this in my test project however the magic didn&#39;t happen i.e. it threw the exception `System.NullReferenceException` instead of `System.ArgumentNullException`. How this is supposed to work? Are they going to use some AOP library to inject the checking code at compile time?

NotNull attribute

I am having the following problem running the below versions of JSPM with Angular2 and SystemJS (Versions: Angular@2.0.0-alpha.27 with JSPM@0.16.0-beta.2 and SystemJS@0.18.0) That once the typescript is compiled (without errors) i get the following error in the browser:

    /jspm_packages/npm/angular2@2.0.0-alpha.27/src/util/decorators.js:70 Uncaught reflect-metadata shim is required when using class decorators

Now when i manually include the file Reflect.js: \jspm_packages\npm\reflect-metadata@0.1.0\Reflect.js that problem goes away but the next problem emerges saying list is undefined within another angular file. 

See the bitbucket src below for the config files (src code) from both system.js and typescript / jspm.io

https://bitbucket.org/schippie/angular-2-jspm-hello-world/src/8af83f2066e5e3e9eede7db495545234f3b0c04a 

What i am wondering is if it&#39;s currently even possible to use jspm together with system.js to retrieve all the angular packages that are needed for angular to function normally. 
Seeing as the config for system.js does state clearly that angular depends on it:

&lt;!-- language: lang-json --&gt;

    &quot;npm:angular2@2.0.0-alpha.27&quot;: {
      &quot;fs&quot;: &quot;github:jspm/nodelibs-fs@0.1.2&quot;,
      &quot;path&quot;: &quot;github:jspm/nodelibs-path@0.1.0&quot;,
      &quot;process&quot;: &quot;github:jspm/nodelibs-process@0.1.1&quot;,
      &quot;reflect-metadata&quot;: &quot;npm:reflect-metadata@0.1.0&quot;,
      &quot;rx&quot;: &quot;npm:rx@2.5.1&quot;,
      &quot;url&quot;: &quot;github:jspm/nodelibs-url@0.1.0&quot;,
      &quot;zone.js&quot;: &quot;npm:zone.js@0.5.1&quot;
    },

But they are not retrieved (looking at the network tab)

Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators

I am having the following problem running the below versions of JSPM with Angular2 and SystemJS (Versions: Angular@2.0.0-alpha.27 with JSPM@0.16.0-beta.2 and SystemJS@0.18.0) That once the typescript is compiled (without errors) i get the following error in the browser:
<pre><code class="hljs language-csharp">/jspm_packages/npm/angular2@2.0.0-alpha.27/src/util/decorators.js:70 Uncaught reflect-metadata shim is required when using class decorators
</code></pre>
Now when i manually include the file Reflect.js: \jspm_packages\npm\reflect-metadata@0.1.0\Reflect.js that problem goes away but the next problem emerges saying list is undefined within another angular file.
See the bitbucket src below for the config files (src code) from both system.js and typescript / jspm.io
<a href="https://bitbucket.org/schippie/angular-2-jspm-hello-world/src/8af83f2066e5e3e9eede7db495545234f3b0c04a" target="_blank" rel="noopener noreferrer">https://bitbucket.org/schippie/angular-2-jspm-hello-world/src/8af83f2066e5e3e9eede7db495545234f3b0c04a</a>
What i am wondering is if it's currently even possible to use jspm together with system.js to retrieve all the angular packages that are needed for angular to function normally.
Seeing as the config for system.js does state clearly that angular depends on it:

<pre><code class="hljs language-perl">"npm:angular2@2.0.0-alpha.27": {
 "fs": "github:jspm/nodelibs-fs@0.1.2",
 "path": "github:jspm/nodelibs-path@0.1.0",
 "process": "github:jspm/nodelibs-process@0.1.1",
 "reflect-metadata": "npm:reflect-metadata@0.1.0",
 "rx": "npm:rx@2.5.1",
 "url": "github:jspm/nodelibs-url@0.1.0",
 "zone.js": "npm:zone.js@0.5.1"
},
</code></pre>
But they are not retrieved (looking at the network tab)

Given a model for a page section which contains multiple fields and would be populated with data such like this:

    {
    	&quot;fields&quot;: [
    		{
    			&quot;id&quot;: 1,
    			&quot;type&quot;: &quot;text&quot;,
    			&quot;caption&quot;: &quot;Name&quot;,
    			&quot;value&quot;: &quot;Bob&quot;
    		},
    		{
    			&quot;id&quot;: 2,
    			&quot;type&quot;: &quot;bool&quot;,
    			&quot;caption&quot;: &quot;Over 24?&quot;,
    			&quot;value&quot;: 0
    		},
    		{
    			&quot;id&quot;: 3,
    			&quot;type&quot;: &quot;options&quot;,
    			&quot;options&quot; : [ &quot;M&quot;, &quot;F&quot;],
    			&quot;caption&quot;: &quot;Gender&quot;,
    			&quot;value&quot;: &quot;M&quot;
    		}
    	]
    }

I would like to have a generic section Component which does not know about the different types of fields that it might wrap, to avoid lots of conditional logic in the section template, and to make new field type views/components added by dropping in a self-contained file rather than having to modify a separate component.

My ideal would be for a Component&#39;s selector to be specific enough that I could accomplish this by selecting an element in the parent Component&#39;s template based on attribute values bound to the model.  For example: (pardon any syntax issues as I coded this in the SO window, main part to pay attention to is the selector on BooleanComponent.ts

SectionComponent.ts

    @Component({
    	selector: &#39;my-app&#39;
    })
    @View({
    	template: `
    		&lt;section&gt;
    			&lt;div *ng-for=&quot;#field of fields&quot;&gt;
    				&lt;field type=&quot;{{field.type}}&quot;&gt;&lt;/field&gt;
    			&lt;/div&gt;	
    		&lt;/section&gt;
    	`,
    	directives: [NgFor]
    })
    class SectionComponent {
    	fields: Array&lt;field&gt;;
    	constructor() {
    		this.fields = // retrieve section fields via service
    	}
    }

FieldComponent.ts:

    // Generic field component used when more specific ones don&#39;t match
    @Component({
    	selector: &#39;field&#39;
    })
    @View({
    	template: `&lt;div&gt;{{caption}}: {{value}}&lt;/div&gt;`
    })
    class FieldComponent {
    	constructor() {}
    }

BooleanComponent.ts:

    // specific field component to use for boolean fields
    @Component({
    	selector: &#39;field[type=bool]&#39;
    })
    @View({
    	template: `&lt;input type=&quot;checkbox&quot; [id]=&quot;id&quot; [checked]=&quot;value==1&quot;&gt;&lt;/input&gt;`
    })
    class BooleanComponent {
    	constructor() {}
    }

... and over time I&#39;d add new components to provide special templates and behaviors for other specific field types, or even fields with certain captions, etc.

This doesn&#39;t work because Component selectors must be a simple element name (in alpha.26 and alpha.27 at least).  My research of the github conversations lead me to believe this restriction was being relaxed, but I can&#39;t determine if what I want to do will actually be supported.

Alternatively, I have seen a DynamicComponentLoader mentioned, though now I can&#39;t find the example that I thought was on the angular.io guide.  Even so, I don&#39;t know how it could be used to dynamically load a component that it doesn&#39;t know the name or matching criteria for.

Is there a way to accomplish my aim of decoupling specialized components from their parent using either a technique similar to what I tried, or some other technique I am unaware of in Angular 2?

**UPDATE 2015-07-06**

http://plnkr.co/edit/fal9OA7ghQS1sRESutGd?p=preview

I thought it best to show the errors I run into more explicitly.  I&#39;ve included a plunk with some sample code, though only the first of these 3 errors will be visible, as each one blocks the other so you can only show off one at a time.  I&#39;ve hard coded to get around #2 and #3 for the moment.

 1. Whether my selector on BooleanComponent is `selector: &#39;field[type=bool]&#39;` or `selector: &#39;[type=bool]&#39;`, I get an error stack from Angular like
&gt;Component &#39;BooleanComponent&#39; can only have an element selector, but had &#39;[type=bool]&#39;
 2. `&lt;field [type]=&quot;field.type&quot;&gt;&lt;/field&gt;` does not bind my field.type value to the type attribute, but gives me this error (Which thankfully shows up now in alpha 28.  In alpha 26 I was previously on, it failed silently).   I can get rid of this error my adding a type property to my FieldComponent and derivative BooleanComponent and wiring it up with the @Component properties collection, but I don&#39;t need it for anything in the components.
&gt;Can&#39;t bind to &#39;type&#39; since it isn&#39;t a know property of the &#39;field&#39; element and there are no matching directives with a corresponding property
 3. I am forced to list FieldComponent and BooleanComponent in the directives list of my SectionComponent View annotation, or they won&#39;t be found and applied.  I read design discussions from the Angular team where they made this conscious decision in favor of explicitness in order to reduce occurrences of collisions with directives in external libraries, but it breaks the whole idea of drop-in components that I&#39;m trying to achieve.

At this point, I&#39;m struggling to see why Angular2 even bothers to have selectors.  The parent component already has to know what child components it will have, where they will go, and what data they need.  The selectors are totally superfluous at the moment, it could just as well be a convention of class name matching.  I&#39;m not seeing the abstraction between the components I&#39;d need to decouple them.

Due to these limitations in the ability of the Angular2 framework, I&#39;m making my own component registration scheme and placing them via DynamicComponentLoader, but I&#39;d still be very curious to see any responses for people who have found a better way to accomplish this.

Dynamic Component selection in Angular2

I have a nested child component like this:

&lt;!-- language-all: lang-html --&gt;

    &lt;app-main&gt;
        &lt;child-component /&gt;
    &lt;/app-main&gt;

My `appMain` component needs to invoke a method on child-component.

How to invoke a method on the child-component?

Call a method of the child component

In Angular 1.x.x you simply ask for the same service and you end up with the same instance, making it possible to share the data in the service.

Now in Angular 2 I have a component that has a reference to my service. I can read and modify the data in the service, which is good. When I try to inject the same service in another component, it seems as if I get a new instance.

What am I doing wrong? Is it the pattern itself that is wrong (using a service to share data) or do I need to mark the service as a singleton (within one instance of the app) or something?

I&#39;m on `2.0.0-alpha.27/`  btw

I inject a service through `appInjector` (edit: now `providers`) in the `@Component` annotation and then save a reference in the constructor. It works locally in the component - just not across components (they do not share the same service instance) like I thought they would.

**UPDATE**: As of Angular 2.0.0 we now have @ngModule where you would define the service under the `providers` property on said `@ngModule`. That will ensure the same instance of that service to be passed to each component, service, etc. in that module.
https://angular.io/docs/ts/latest/guide/ngmodule.html#providers

**UPDATE**: A lot has happened to Angular and FE development in general. As @noririco mentioned, you could also use a state management system like NgRx:
https://ngrx.io/



How do I share data between components in Angular 2?

I know how to raise an event with the EventEmitter. I can also attach a method to be called if I have a component like this:

    &lt;component-with-event (myevent)=&quot;mymethod($event)&quot; /&gt;

When I have a component like this, everything works great. I moved some logic into a service and I need to raise an event from inside the Service. What I did was this:

    export class MyService {
      myevent: EventEmitter = new EventEmitter();
    
      someMethodThatWillRaiseEvent() {
        this.myevent.next({data: &#39;fun&#39;});
      }
    }

I have a component that needs to update some value based on this event but i can&#39;t seem to make it work. What I tried was this:

    //Annotations...
    export class MyComponent {
      constructor(myService: MyService) {
        //myService is injected properly and i already use methods/shared data on this.
        myService.myevent.on(... // &#39;on&#39; is not a method &lt;-- not working
        myService.myevent.subscribe(.. // subscribe is not a method &lt;-- not working
      }
    }

How do i make MyComponent subscribe to the event when the service that raises it is not a component?

I&#39;m on On 2.0.0-alpha.28

EDIT: Modified my &quot;working example&quot; to actually work, so focus can be put on the not-working part ;)

Example code:
http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

How to subscribe to an event on a service in Angular2?

I am using Angular 2.0.0-alpha.30 version. When redirect to a different route, then refresh the browser , its showing Cannot GET /route.

Can you help me with figuring why this error happened.

Angular 2.0 router not working on reloading the browser

I&#39;m trying to learn Typescript. While I don&#39;t think it&#39;s relevant, I&#39;m using VSCode for this demo.

I have a `package.json` that has these pieces in it:

    {
      &quot;devDependencies&quot;: {
        &quot;gulp&quot;: &quot;^3.9.1&quot;,
        &quot;jspm&quot;: &quot;^0.16.33&quot;,
        &quot;typescript&quot;: &quot;^1.8.10&quot;
      },
      &quot;jspm&quot;: {
        &quot;moment&quot;: &quot;npm:moment@^2.12.0&quot;
      }
    }

Then I have a Typescript class `main.js` like this:

    import moment from &#39;moment&#39;;
    export class Main {
    }

My `gulpfile.js` looks like this:

    var gulp = require(&#39;gulp&#39;);
    var typescript = require(&#39;gulp-tsb&#39;);
    var compilerOptions = {
                            &quot;rootDir&quot;: &quot;src/&quot;,
                            &quot;sourceMap&quot;: true,
                            &quot;target&quot;: &quot;es5&quot;,
                            &quot;module&quot;: &quot;amd&quot;,
                            &quot;declaration&quot;: false,
                            &quot;noImplicitAny&quot;: false,
                            &quot;noResolve&quot;: true,
                            &quot;removeComments&quot;: true,
                            &quot;noLib&quot;: false,
                            &quot;emitDecoratorMetadata&quot;: true,
                            &quot;experimentalDecorators&quot;: true
                          };
    var typescriptCompiler = typescript.create(compilerOptions);
    gulp.task(&#39;build&#39;, function() {
      return gulp.src(&#39;/src&#39;)
        .pipe(typescriptCompiler())
        .pipe(gulp.dest(&#39;/dest&#39;));
    });

When I run gulp build, I get the message: `&quot;../main.ts(1,25): Cannot file module &#39;moment&#39;.&quot;`

If I use `import moment = require(&#39;moment&#39;);` then jspm will work and bring in the module when I run the application, but I&#39;m still receiving the build error.
I also tried:

    npm install typings -g
    typings install moment --ambient --save

Instead of making the problem better though, it got worse. Now I get the above error on build as well as the following: `&quot;../typings/browser/ambient/moment/index.d.ts(9,21): Cannot find namespace &#39;moment&#39;.&quot;`

If I go to the file provided by typings and add at the bottom of the file:

    declare module &quot;moment&quot; { export = moment; }

I can get the second error to go away, but I still need the require statement to get moment to work in my `main.ts` file and am still getting the first build error.

Do I need to create my own `.d.ts` file for moment or is there just some setup piece I&#39;m missing?

How can moment.js be imported with typescript?

I&#39;m making a website using `Angular2` and I&#39;m having what i suppose is an issue. On the first load of my angular page, `SystemJS` is making more than 500 hundred requests to retrieve every `Angular2` file in `angular2/src` directory. In total, the first load downloads more than 4MB and it takes more than 14 seconds to start.

My `index.html` does the following scripts includes:

    &lt;script src=&quot;libs/angular2/bundles/angular2-polyfills.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/systemjs/dist/system.src.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/rxjs/bundles/Rx.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/angular2/bundles/angular2.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/angular2/bundles/http.dev.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/jquery/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/lodash/lodash.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;libs/bootstrap/js/bootstrap.js&quot;&gt;&lt;/script&gt;

And my systemJs initialization code looks like this:

        &lt;script&gt;
          System.config({
            defaultJSExtensions: true,
            paths: {
              &#39;*&#39;: &#39;libs/*&#39;,
              &#39;app/*&#39;: &#39;app/*&#39;
            },
            packageConfigPaths: [&#39;libs/*/package.json&#39;],
            packages: {
              app: {
                format: &#39;register&#39;,
                defaultExtension: &#39;js&#39;
              }
            }
          });
          System.import(&#39;app/main&#39;)
                .then(null, console.error.bind(console));

        &lt;/script&gt;

My public folder has the following structure:

    .
    ├── img
    ├── styles
    ├── app
    ├── libs
    |   └── angular2
    |   └── systemjs
    |   └── rxjs
    |   └── jquery
    |   └── lodash
    |   └── bootstrap
    └── index.html

A couple of screenshots of some of the js files that are being requested:
[![enter image description here][1]][1]



[![enter image description here][2]][2]


  [1]: http://i.stack.imgur.com/Srv3H.png
  [2]: http://i.stack.imgur.com/2osfs.png

Is there a way to avoid all of those requests?

Angular2 too many file requests on load

How do you deploy Angular apps once they reach the production phase?  

All the guides I&#39;ve seen so far (even on [angular.io](https://angular.io/)) are counting on a lite-server for serving and browserSync to reflect changes - but when you finish with development, how can you publish the app?  

Do I import all the compiled `.js` files on the `index.html` page or do I minify them using gulp? Will they work? Do I need SystemJS at all in the production version?


How do you deploy Angular apps?

There&#39;s a quickstarter tutorial over at angular.io which uses typescript &amp; systemjs.
Now that I&#39;ve got that miniapp running, how would I go about creating something deployable? I couldn&#39;t find any info about it whatsoever.

Do I need any extra tools, any additional settings in System.config?

(I know that I could use webpack &amp; create a single bundle.js, but I&#39;d like to use systemjs as it is used in the tutorial)

Could someone share their build process with this setup (Angular 2, TypeScript, systemjs)




How do I actually deploy an Angular 2 + Typescript + systemjs app?

In an Angular app, I have seen that `@Component` has property `moduleId`. What does it mean? 

And when `module.id` is not defined anywhere, the app still works. How can it still work?
  
&lt;!-- language: lang-javascript --&gt;

    @Component({
      moduleId: module.id,
      selector: &#39;ng-app&#39;,
      templateUrl: &#39;app.component.html&#39;,
      styleUrls: [&#39;app.component.css&#39;],
      directives: [AppComponent]
    });

Angular - What is the meanings of module.id in component?

What is the best method to bundle Angular (version 2, 4, 6, ...) for production on a live web server.

Please include the Angular version within answers so we can track better when it moves to later releases.


Content Type	Original Author	Original Content on Stackoverflow
Question	N.Schipper	View Question on Stackoverflow
Solution 1 - Angular	Kyle Cordes	View Answer on Stackoverflow
Solution 2 - Angular	N.Schipper	View Answer on Stackoverflow
Solution 3 - Angular	creep3007	View Answer on Stackoverflow

Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

Solution 2 - Angular

Solution 3 - Angular

NotNull attribute

Placeholder font-size bigger than 16px

Attributions