'simple-notifications' is not a known element

[oehm-smith]

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

[oehm-smith]

Sounds logical. Thanks @flauc I'll try that tomorrow at work.

[oehm-smith]

I got it working by adding to the select-site.module. Once I've happy I'll move out to the Shared module. Thanks for your help - I'm still getting used to NgModules.

I'll update https://github.com/flauc/angular2-notifications/blob/master/docs/toastNotifications.md to suggest this alternative to adding to AppModule.

[flauc]

That's a great idea thanks 👍

I'll leave this issue open and marked as question as well.

[oehm-smith]

Hi Flauc, I'm getting back to this now. However the latest version seems to break my app and #114 's suggestion of reverting to 0.4.3 works. I quickly tried 0.4.60 but 0.4.76 / 77 fails (didn't have any more time to spend on it).

0.4.4 works as does 0.4.41 but nothing after that. Some warnings are coming up about missing dependency versions, which may be the cause. I'll be doing an upgrade to the latest Angular2 soonish.

[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.

[aomegax]

Hi, I have the same error. I'm using angular2 v.4.2.5 and angular2-notifications 0.4.53 (using webjars). How can I solve the problem? Thank you

[flauc]

Hi everyone, sorry was out for a while. Are you importing the library like this:

@NgModule({
    imports: [
        BrowserModule,
        // Animations need to be imported in to your project to use the library
        BrowserAnimationsModule, 
        SimpleNotificationsModule.forRoot()
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

[aomegax]

Hi, I have yet the problem. This is my main.module

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule, 
        SimpleNotificationsModule.forRoot()
    ],
    declarations: [
       MainComponent,
       ProjectsComponent,
       SimpleNotificationsComponent
    ],
    bootstrap: [MainComponent]
})
export class MainModule { }

This is my projects.component

export class ProjectsComponent {
    constructor(private notificationService: NotificationsService) {}

    public create(): void {
        this.notificationService.success("Notification", "Body of that")
    }
}

And this is my projects.html

<button (click)="create()">Create</button>
<simple-notifications></simple-notifications>

And the error is

zone.js:357 Error: Uncaught (in promise): Error: Template parse errors:
'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. ("

How can I solve? What is my error? Thank you

[flauc]

Can you try removing the SimpleNotificationsComponent it's already declared in the SimpleNotificationsModule and it should not be declared twice.

[aomegax]

No, the problem persists.

[saulosom]

Hi. Any updates, @flauc?

[CHBaker]

I'm getting this same error, but it only occured during karma tests, I realized I needed to import it into the test bed like this post suggests