Template parse errors with modals about mdb-angular-ui-kit

[dawidadach]

Dear,

You have imported MDBBootstrapModule, however you didn't add it to imports: [...] section.
Please follow installation guide carefully or check demo app (app.module file).

[danielsogl]

Excuse me but I talked about the unit test not about my app-module. My app is working well :)
As you can see I posted my .spec.ts. If I import the MDBBootstrapModule into my spec files, im receiving a different error message:

/Users/danielsogl/Documents/DHBW Projekt 2017/dhbw-projekt-app/node_modules/angular-bootstrap-md/index.ts:2
    import { ModuleWithProviders, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
    ^^^^^^

    SyntaxError: Unexpected token import

If you want to test you should also import module inside your .specs.ts . Regarding new issue, could you please check with Angular 5.0.2 or 5.0.3, there are few known issues with the newest release.

Please also make sure that you have added mdb to compilation path in ts.config.json, but I assume you did if the application works fine.

[danielsogl]

My dependencies are up to date (Angular 5.0.3). I don't have problems with my unit tests with the mdb-navbar for example and I don't have to import the MDBBootstrapModule into that unit test as you can see in this unit-test spec file.

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreModule } from 'angularfire2/firestore';

import { environment } from '../../../environments/environment';
import { FirebaseAuthService } from '../../services/auth/firebase-auth/firebase-auth.service';
import { NavigationBarComponent } from './navigation-bar.component';

describe('NavigationBarComponent', () => {
  let component: NavigationBarComponent;
  let fixture: ComponentFixture<NavigationBarComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        AngularFireModule.initializeApp(environment.firebase)
      ],
      providers: [
        FirebaseAuthService,
        AngularFireAuth,
        { provide: AngularFirestore, depends: AngularFirestoreModule }
      ],
      declarations: [NavigationBarComponent],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NavigationBarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

And to answer your last question, here is my tsconfig file.

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"]
}

This is my spec file WITH the MDBBootstrapModule with the described error in my comment before.

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreModule } from 'angularfire2/firestore';

import { environment } from '../../../environments/environment';
import { FirebaseAuthService } from '../../services/auth/firebase-auth/firebase-auth.service';
import { LoginPageComponent } from './login-page.component';
import { ModalModule } from 'angular-bootstrap-md/modals/modal.module';
import { ModalDirective } from 'angular-bootstrap-md/modals/modal.directive';

describe('LoginPageComponent', () => {
  let component: LoginPageComponent;
  let fixture: ComponentFixture<LoginPageComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        AngularFireModule.initializeApp(environment.firebase),
        MDBBootstrapModule.forRoot()
      ],
      providers: [
        FirebaseAuthService,
        AngularFireAuth,
        { provide: AngularFirestore, depends: AngularFirestoreModule }
      ],
      declarations: [LoginPageComponent],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginPageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

[danielsogl]

You can check my repository here: https://github.com/danielsogl/dhbw-projekt-2017