I reviewed the relevant answers in this regard, and found them extremely helpful in figuring out the setup for bootstrapping rc5 apps. however, i am still receiving an error, after setting up my files as follows:
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//import { FormsModule } from '@angular/forms'
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routes } from './app.routes';
import { Router } from '@angular/router';
import { Calendar, DataTable, Column, InputMask } from 'primeng/primeng';
import { FooModule } from './+foo/foo.module';
import { BarModule } from './+bar/bar.module';
import { BooModule } from './+boo/boo.module';
@NgModule({
imports: [BrowserModule,
HttpModule,
RouterModule,
FooModule,
BarModule,
BooModule
],
declarations: [AppComponent,Calendar, DataTable, Column, ],
providers: [
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>',
}],
bootstrap: [AppComponent]
})
export class AppModule { }
My components and modules look like this:
import { NgModule } from '@angular/core';
import { CommonModule, NgControl } from '@angular/common';
//import { FormsModule } from '@angular/forms';
import { SomeDirective } from '../../SomeDirective.directive';
import { SomePipe } from '../../SomePipe.pipe';
import { SomeService } from './SomeService.service';
import { ContextMenu, Menu } from 'primeng/primeng';
@NgModule({
imports: [//modules
],
declarations: [//Directives, components and pipes
SomeDirective, SomePipe
],
providers: [//services
NgControl, SomeService
]
})
export class FooModule {}
and
import {RouterModule, Router} from '@angular/router'
import { HttpModule } from '@angular/http';
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FORM_DIRECTIVES, NgControl } from '@angular/common';
import { MenuItem} from 'primeng/primeng';
import { SomeService } from './SomeService.service';
import { someInterface } from './someInterfaces';
@Component({
moduleId: module.id,
selector: '...',
templateUrl: '....html',
styleUrls: ['....component.css'],
})
export class PatientSearchComponent implements OnInit {
stateService: SomeService;
obj: any[] = [];
constructor(private aService: SomeService, private router: Router, aService: SomeService) {
... }
someFunction() {
...
});
}
i followed some answers on git, specifically https://github.com/angular/angular/issues/10805 and https://github.com/angular/angular/issues/10617. i placed my dependencies in the declarations, imports, etc. based on #brandonroberts's comments.
(one part i wasn't sure about, and perhaps this is where the problem is (though both ways i went, i got an error....), was where shared components go. in the imports? of each module which uses them, or of app.module? or does it go in the declarations of app.module??)
i am getting the following error :(,
localhost/:142 Error: TypeError: Cannot read property 'type' of null(…)
it seems like a problem with app.module.ts, but what is it?
Thanks!
EDIT index.html
<body>
<sd-app>Loading...</sd-app>
<script>
// function.name (all IE)
// Remove once https://github.com/angular/angular/issues/6501 is fixed.
/*! @source http://stackoverflow.com/questions/6903762/function-name-not-supported-in-ie*/
if (!Object.hasOwnProperty('name')) {
Object.defineProperty(Function.prototype, 'name', {
get: function() {
var matches = this.toString().match(/^\s*function\s*((?![0-9])[a-zA-Z0-9_$]*)\s*\(/);
var name = matches && matches.length > 1 ? matches[1] : "";
// For better performance only parse once, and then cache the
// result through a new accessor for repeated access.
Object.defineProperty(this, 'name', {value: name});
return name;
}
});
}
</script>
<script>
// Fixes undefined module function in SystemJS bundle
function module() {}
</script>
<!-- shims:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script>
System.config(<%=
JSON.stringify(SYSTEM_CONFIG, null, 2)
%>)
</script>
<% } %>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- libs:js -->
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script>
System.import('<%= BOOTSTRAP_MODULE %>')
.catch(function (e) {
console.error(e,
'Report this error');
});
</script>
<% } %>
</body>
adding the following files: main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
and +Foo/index.ts
export * from './foo.component';
export * from './foo.routes';
