Sup_File/src/app/app.module.ts

import { ToastModule } from './typescripts/pro/alerts/toast/toast.module';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { MDBBootstrapModule } from './typescripts/free';
import { MDBBootstrapModulePro } from './typescripts/pro/index';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';
import { MDBSpinningPreloader } from './typescripts/pro/index';

import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { BookComponent } from './book/book.component';

import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './main/main.component';


import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';

// import { DropzoneModule } from 'dropzone';
// import {SingleMediaPlayer} from './single-media-player';

import { DropzoneModule } from 'ngx-dropzone-wrapper';
import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
import { HomeComponent } from './home/home.component';
import { DownloadLinkComponent } from './download-link/download-link.component';


const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
    // Change this to your upload POST address:
    url: 'https://httpbin.org/post',
    //acceptedFiles: 'image/*',
    createImageThumbnails: true
};

const appRoutes: Routes = [
    {
        path: 'home',
        component: HomeComponent,
        data: { title: 'home' }
    },
    {
        path: 'main/:id',
        component: MainComponent,
        data: { title: 'Main' }
    },
    {
        path: 'books',
        component: BookComponent,
        data: { title: 'Book List' }
    },
    {
        path: 'login',
        component: LoginComponent,
        data: { title: 'Login' }
    },
    {
        path: 'signup',
        component: SignupComponent,
        data: { title: 'Sign Up' }
    },
    {
        path: 'download/:id',
        component: DownloadLinkComponent ,
        data: { title: 'download' }
    },
    { path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    }
];

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        SignupComponent,
        MainComponent,
        BookComponent,
        DownloadLinkComponent
    ],
    imports: [
        BrowserModule,
        DropzoneModule,
        VgCoreModule,
        VgControlsModule,
        VgOverlayPlayModule,
        VgBufferingModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpModule,
        HttpClientModule,
        RouterModule.forRoot(
            appRoutes,
            { enableTracing: false } // <-- debugging purposes only
        ),
        ToastModule.forRoot(),
        MDBBootstrapModule.forRoot(),
        MDBBootstrapModulePro.forRoot(),
        AgmCoreModule.forRoot({
            // https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
            apiKey: 'Your_api_key'
        })
    ],
    providers: [
        MDBSpinningPreloader,
        {
            provide: DROPZONE_CONFIG,
            useValue: DEFAULT_DROPZONE_CONFIG
        }],
    bootstrap: [AppComponent],
    schemas:      [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }