Hi,
I would like to create an exportable angular module. So I created this module :
// index.js
import { NgModule, Component } from '@angular/core';
@Component({
selector: 'module1-component',
template: '<h1>Module 1</h1>'
})
class Module1Component {
constructor() {}
}
@NgModule({
imports: [],
declarations: [Module1Component],
providers: [],
exports: [Module1Component]
})
export class Module1 {}
with this package.json
{
"name": "module1",
"main": "index.js",
"babel": {
"presets": [
"es2015",
"angular2"
]
},
"browserify": {
"transform": [
["babelify"]
]
},
"dependencies": {
"@angular/common": "^4.4.4",
"@angular/compiler": "^4.4.4",
"@angular/core": "^4.4.4"
},
"devDependencies": {
"babel-preset-angular2": "0.0.2",
"babel-preset-es2015": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^14.4.0"
}
}
Next I created another module which will import my first module and I linked module1 with module2 by npm link module1
import 'babel-polyfill';
import 'zone.js/dist/zone';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Module1 } from 'module1';
@Component({
selector: 'module2-component',
template: `
<h1>Module 2</h1>
<module1-component></module1-component>
`
})
class Module2Component {
constructor () {}
}
@NgModule({
imports: [BrowserModule, Module1],
declarations: [Module2Component],
providers: [],
bootstrap: [Module2Component],
})
class Module2 {}
platformBrowserDynamic().bootstrapModule(Module2);
with this package.json
{
"name": "module2",
"version": "0.1.0",
"main": "index.js",
"babel": {
"presets": [
"es2015",
"angular2"
]
},
"dependencies": {
"@angular/common": "^4.4.4",
"@angular/compiler": "^4.4.4",
"@angular/core": "^4.4.4",
"@angular/platform-browser": "^4.4.4",
"@angular/platform-browser-dynamic": "^4.4.4",
"babel-polyfill": "^6.26.0",
"rxjs": "^5.4.3",
"zone.js": "^0.8.18"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-preset-angular2": "0.0.2",
"babel-preset-es2015": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^14.4.0"
}
}
And when I built module2 with browserify src/app.js -o dist/app.js -t [ babelify ]
and I looked the result I had this error :
Unexpected value 'Module1' imported by the module 'Module2'. Please add a @NgModule annotation.
I think the error is due to the transpilation when importing Module1 (it has no more annotation).
Have you any ideas ? Thanks