Angular import works great in one module, but does not work in another one

Viewed 7015

I got an angular4 & Universal application with a app.module and a app.browser.module/app.server.module.

App.Module has all app configuration and bootstrap. app.browser.module call modules that are used in the browser, to avoid breaking the universal build.

Link for the project repo on Github

When I import an external lib (ng2-semantic-ui) into app.browser.module, the app does does not recognize ng2-semantic-ui directives, but when I import it into 'app.module' it does.

This is my modules structure:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SuiModule } from 'ng2-semantic-ui';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({appId: 'app.id'}),
    SuiModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.browser.module.ts

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';   
import { SuiModule } from 'ng2-semantic-ui';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    AppModule,
    SuiModule,
  ],
  bootstrap: [AppComponent]
})
export class AppBrowserModule {}

When I import SuiModule inside app.module the app recognize its directives, but when I take it out to app.browser.module, it doesn't. Why?

The Error

compiler.es5.js:1690 Uncaught Error: Template parse errors:
'sui-sidebar' is not a known element:
1. If 'sui-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'sui-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

P.S. BrowserAnimationsModule are recognized in the app when I import them inside app.browser.module.

2 Answers
Related