Webpack and Angular2 - Error: No Directive annotation found on 'Component'

[Milad]

Hello,

I am seeing an issue, using Angular2 RC4 with a webpack implementation to bundle the code.  Here is the url to the documentation that I am following:
https://angular.io/docs/ts/latest/guide/webpack.html

Note, I have a component that is defined as follows:

import { Component } from '@angular/core';

@Component({
moduleId: module.id,
selector: 'test1',
template: require('./test1.component.html')
})
export class Test1 {
public message: string = "hello from test1 component inside of App-shell";
}

In the angular app that houses the above component, I am able to import the component, add it to the list of directives, and use its selector in my HTML just fine.

However, I am trying to also share this same component with another Angular 2 app. In the second app, when I try to use the component from the first app above, I reference its transpiled js equivalent file as follows:

var test = require('../../../framework/src/app/test1/test1.component');

Note, after the above line, test does have a reference to the component correctly, and I can see the message property correctly in the console window in chrome dev tools (see below).

However, when I try to add test.Test1 to the list of directives and then use the selector in the HTML of this the second app, I see the following error in the console window:

Uncaught No Directive annotation found on Test1

Note, I did the same exact setup just fine, without using webpack, and by following the SystemJS approach (no bundling). I was able to share the first component from the first angular app with the second angular app using the identical approach mentioned above. However, when I tried to leverage webpack to bundle the code, I ran into the above issue.  Other parts of the application (that don't share the component work fine), thus, I know that the implementation of webpack is correct.

FYI, I am working on a portal like app, which to the user will look and feel like one application, however, it needs to be split into smaller angular2 applications, so that each team can release its respective area/app of the portal without having to deploy the entire portal app.  Additionally, certain components may be shared across apps. 

Hopefully, this makes sense?  Please let me know if  you need further explanation.

Thanks in advance for any input or suggestions that you may have in getting this to work!

[Milad]

A couple of updates on this.

1. Here is the correct url for the webpack documentation, the one I posted originally didn't work

https://angular.io/docs/ts/latest/guide/webpack.html

2. I found that the issue is that in the second app that is trying to use the component from the first app, the component in question has a webpack dependency id for Angular/Core that is different than all other components in the second app.  I am thinking this is related to the fact that the component in question was actually built using a different webpack build (from the first app).  When I manually changed it in app.js of the second app (which is the bundle that webpack generates for application code) to match the others, everything works fine and I am able to share the component from the first app with the second app.  I am wondering if there is a way I can maintain the same dependencies IDs across both webpack builds (for the first app and the second app).  See screenshots below.

Inside app.js (the webpack bundle for application code for the second app), all components have an id of 6 when referring to angular/core.

However, the component that I am trying to use from the first app (inside of the second app), has an id of 633 when referring to angular/core inside the same app.js file of the second app.

Changing 633 to 6 manually makes everything work, but, obviously, I am looking for a programmatic way to tell webpack/Angular to do this.

Any thoughts/suggestions are appreciated.