'simple-notifications' is not a known element

We’re using https://github.com/mgechev/angular-seed release 2.0.0 and uses Angular2 2.0.0.

After setting it up I receive the error:

'simple-notifications' is not a known element:
1. If 'simple-notifications' is an Angular component, then verify that it is part of this module.
2. If 'simple-notifications' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<simple-notifications></simple-notifications>
...

The app.module.ts contains:

import { SimpleNotificationsModule } from 'angular2-notifications';
import { SelectSiteModule } from './select-site/select-site.module';
...

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    SimpleNotificationsModule,
    AboutModule,
    SelectSiteModule
    ...
  ],
  declarations: [
    AppComponent,
  ],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [ AppComponent ],
})

export class AppModule { }

The select-site.component.ts contains:

import { NotificationsService } from 'angular2-notifications';

@Component({
  moduleId: module.id,
  selector: 'sd-select-site',
  templateUrl: 'select-site.component.html',
})
export class SelectSiteComponent implements OnInit {
    ...
   # NotificationsService imported and used but that doesn't seem to be my problem here
}
# And nothing about the SimpleNotificationsComponent as it isn't used in this file

The select-site.component.html contains at the top of the file (and it also contains much much more):

<simple-notifications></simple-notifications>

I can only think that I need to import the SimpleNotificationsComponent but nowhere makes sense - it isn’t used in the select-site.component.ts, and it can’t be declared in the app.module.ts as it is declared in the SimpleNotificationsModule.

Is there a problem with this component or our application?

I followed the error message and tried implementing CUSTOM_ELEMENTS_SCHEMA as per http://stackoverflow.com/a/39517874/1019307. That made no difference.

---

More information

• I use IntelliJ and its Intellisense tells me the import paths are correct

• I commented out the markup and just left the service call (below) and it succeeds (in that it doesn’t error). So it is something particular about the component and selctor.

  import { NotificationsService } from ‘angular2-notifications’; …

  @Component({ moduleId: module.id, selector: ‘sd-select-site’, templateUrl: ‘select-site.component.html’, }) export class SelectSiteComponent implements OnInit { constructor(…, private notificationsService: NotificationsService) { }

  ngOnInit() {
      ...
      this.notificationsService.success('Notification', 'Body of that');
  }
  
  ...
  

[flauc]

Hi @oehm-smith,

If you want to use the library in a separate module from your app.module.ts you need to set up a shared module that exports SimpleNotificationsModule and then import the shared module in to your select-site.module.ts.

As far as i can see that’s the only thing you are missing. There is a nice example on how to do this here:

https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

[miraj92]

Not working with latest version as well. Seems as a blocker as the older version needs beta 12 version while angular uses 5.0.3 stable version.