Creating a custom Angular 4 module with Material and including the MdCommonModule

As an Angular 4 + Material developer, I recently created a custom library that has been presenting me with numerous challenges. One component in particular, the SearchComponent, seemed pretty straightforward at first.

search.component.ts

@Component({
selector: 'cis-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss'],
encapsulation: ViewEncapsulation.None,
host: {
    'class': 'search'
}})
export class CisSearchComponent implements OnChanges {}

module

@NgModule({
imports: [
    CommonModule,
    MdIconModule,
    MdListModule,
    BrowserAnimationsModule,
    HttpModule
],
providers: [SearchService],
declarations: [CisSearchComponent],
exports: [CisSearchComponent]
})
export class CisSearchModule {}

After packaging this module using rollup, I encountered an issue in my main project:

{
    provide: DOCUMENT, useValue: {value: document}
}

The error message displayed was:

TypeError: this._document.createElement is not a function
at MdCommonModule._checkTheme (material.es5.js:191)
at new MdCommonModul

I am currently facing this error and would appreciate any guidance on how to resolve it. All dependencies are installed and up to date.

Answer №1

The resolution can be found below:

constructor(@Optional() @Inject(DOCUMENT) private _document: any) {}

This code should be added to your personalized module. Applicable for Angular version 4.0.0.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to access attributes of an undefined value (current state is undefined)

After completing a small project, I attempted to deploy it on Vercel. The project runs smoothly without any errors on my local machine. However, when I tried to run it on the server, I encountered the following error: "Cannot read properties of undefined ( ...

Tips for sending information to a nested Angular 2 attribute component

As per the instructions found on this blog, in order to create inner components within an SVG using Angular 2, we need to utilize an [attribute] selector: // Within svgmap.component.ts file: component declaration @Component({ selector: '[svgmap]& ...

Breaking down an array into alphabetical sections using React and Typescript

I have a large array of strings containing over 100 words. I have already sorted the array in alphabetical order, but now I need to group or split the array into a hash array called hashMap<String(Alphabet), List<String>>. This will allow me to ...

Avoiding the use of destructuring for undefined values in JavaScript can be achieved by implementing

Upon receiving the response registryReportSettings from the server: this.getRegistrySettings(registry.Id).subscribe((registryReportSettings: { extended: ReportPropertiesRequest }) => { const { objectProperties, reportProperties, textProperties } = reg ...

Unlocking the secrets of achieving full-screen printing with jspdf and html2canvas

Check out the DEMO here Hey! I'm currently working with Angular8 in my project. I've integrated jspdf and html2canvas to convert HTML to PDF. However, I'm facing an issue where only half of the page is being printed instead of the full page ...

Tips for utilizing <Omit> and generic types effectively in TypeScript?

I'm currently working on refining a service layer in an API with TypeScript by utilizing a base Data Transfer Object. To prevent the need for repetitive typing, I have decided to make use of the <Omit> utility. However, this has led to some per ...

Original: Generic for type guard functionRewritten: Universal

I have successfully created a function that filters a list of two types into two separate lists of unique type using hardcoded types: interface TypeA { kind: 'typeA'; } interface TypeB { kind: 'typeB'; } filterMixedList(mixedList$: ...

Angular: Is it possible to inject the Router into a component even if it hasn't been explicitly declared in the providers array?

Imagine we have this particular component: @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor(pri ...

Form control named 'startTime' and 'endTime' do not have a valid value accessor

The app.module file contains the following code: import { TimepickerModule, TimepickerConfig } from 'ngx-bootstrap/timepicker'; import { getTimepickerConfig } from './TimepickerConfig'; imports: [ BsDatepickerModule.forRoot(), Tim ...

Creating a chrome extension with pop-up, settings, and backend functionality utilizing @angular/cli

Is it possible to use Angular CLI to create a chrome extension with a popup, options page, and background process? I currently achieve this using multiple webpack configs for each page but now I am looking to migrate to Angular CLI. Can anyone recommend a ...

Implementing the same concept yet yielding diverse variations?

I'm a bit confused as to why a1 is evaluated as false while a2 is considered to be of type boolean. Can someone explain the reasoning behind this discrepancy? type Includes<T extends readonly any[], U> = U extends T[number] ? true : false; type ...

Tips for handling user click events in Angular 2?

In Angular2, I am facing an issue with two components. When a user clicks a button in component1, a method is triggered that stores data in the shared service to a variable. However, component2's ngOnInit() method initializes this variable to undefine ...

Using *ngFor alters the positioning of components

After implementing a flexbox container class to align my components horizontally, I noticed that when using input properties and a loop, they are displayed stacked vertically instead. <div class="flexbox-container" > <app-card></ ...

The implementation of getStaticPaths was done independently of getStaticProps - TypeScript

I am currently in the process of setting up a new blog using a combination of nextJS, TypeScript, and sanity CMS. The homepage is already set up to display posts perfectly. Next on my list is to display the details of each post when it is clicked, based on ...

Retrieve the value of a child variable within a parent button's action event

Is there a way to access the value of a child variable from a parent button click? child component @Component({ selector: 'app-child-panel', templateUrl: './child-panel.component.html', styleUrls: ['./child-panel.component.sc ...

Issue with Symbol Constructor in Typescript: [ts] The 'new' keyword can only be used with a void function

Just starting out with typescript and experimenting with the ES6 Symbol constructor. How can I address this ts lint problem without resorting to using any? const symbol = new Symbol(path); I'm trying to avoid doing this: const symbo ...

Testing Angular applications using Karma

After utilizing the yo angular 1 generator, it generated a landing page and some tests. However, I am facing an issue when trying to compile the code in VS as I receive an error stating that "module('fountainFooter');" is undefined. /// <refe ...

Obtain the selected portion of text value using Angular 2

In order to create a basic text editor that allows users to make selected text bold, follow these steps: Start by setting up a textarea with the value "Super text". Next, select a portion of this text (such as "Super"). But how can you retrieve the selec ...

Having trouble building my Angular 2 app with Angular-cli beta 14, despite it working perfectly fine with systemjs beforeEach

I have been using VSCode on Windows 10 to work on an app developed in Angular 2 final version, which runs smoothly with systemjs. Recently, I upgraded to angular-cli beta 14 webpack version and followed the steps outlined in the upgrade document here. How ...

Implementing an event listener within a knockoutjs custom directive

I have extensive experience as a knockout user, but I am currently struggling to achieve a specific scenario. For the past few days, I have been trying to create a system within a knockout component that allows observables to translate themselves into diff ...