CODEWITHSUNDEEP
htmlangulartypescript
Ionut
Ionut

Reputation: 839

ERROR TypeError: Cannot read properties of undefined (reading 'theme')

I want to add steelseries in my angular project. I have createad html-compass component, but I'm getting this error:

core.js:1673 ERROR TypeError: Cannot read properties of undefined (reading 'theme') at ProjectService../app/_services/project.service.ts.ProjectService.getLayoutTheme (project.service.ts:311) at header.component.ts:55 at SafeSubscriber.schedulerFn [as _next] (core.js:3563) at SafeSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:253) at SafeSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:191) at Subscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:129) at Subscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at EventEmitter.push.../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:53) at EventEmitter.push.../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit (core.js:3535) at ProjectService../app/_services/project.service.ts.ProjectService.notifyToLoadHmi (project.service.ts:487)

My html-compass.component.html:

<!DOCTYPE html>
<html>
  <body>
    <div (ngModelChange)="test()">
      <canvas id="myCanvas"></canvas>
    </div>

    <script src="C:\\Virtual\\client\\node_modules\\steelseries\\srcdocs\\index.js"></script>
  </body>
</html>

My html-compass.component.ts:

import { Component, OnInit } from '@angular/core';
import { Compass } from "steelseries";

@Component({
  selector: 'app-html-compass',
  templateUrl: './html-compass.component.html',
  styleUrls: ['./html-compass.component.css']
})
export class HtmlCompassComponent implements OnInit {

  constructor() { }

  static TypeTag = 'svg-ext-html_compass';
  static LabelTag = 'HtmlCompass';
  static prefixB = 'B-HXB_';
  static prefixRect = 'svg_';

  ngOnInit() {
  }

  test() {
    const compass = new Compass(document.querySelector("#myCanvas"), {
      size: 200
    });
  }
}

In projectService I get the error in function getLayoutTheme. The entire project.service.ts file can be seen here.

getLayoutTheme() {
    return this.projectData.hmi.layout.theme;
}

In header.component.ts, one of the files where I get the error, the code is:

import { Component, Inject, ViewChild, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from "rxjs";
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

import { environment } from '../../environments/environment';

import { SetupComponent } from '../editor/setup/setup.component';

import { ProjectService, SaveMode } from '../_services/project.service';
import { ThemeService } from '../_services/theme.service';

import { HelpData } from '../_models/hmi';
import { TutorialComponent } from '../help/tutorial/tutorial.component';
import { TranslateService } from '@ngx-translate/core';

@Component({
    moduleId: module.id,
    selector: 'app-header',
    templateUrl: 'header.component.html',
    styleUrls: ['header.component.css']
})
export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {

    @ViewChild('sidenav')sidenav: any; 
    @ViewChild('tutorial') tutorial: TutorialComponent;
    @ViewChild('fileImportInput') fileImportInput: any;

    darkTheme = true;
    ineditor = false;
    savededitor = false;
    private subscriptionShowHelp: Subscription;
    private subscriptionLoad: Subscription;
    
    constructor(private router: Router,
                public dialog: MatDialog,
                private translateService: TranslateService,
                private themeService: ThemeService,
                private projectService: ProjectService){

        this.router.events.subscribe(()=> {
            this.ineditor = (this.router.url.indexOf('editor') >= 0 ||  this.router.url.indexOf('device') >= 0 ||
            this.router.url.indexOf('users') >= 0 || this.router.url.indexOf('text') >= 0 || this.router.url.indexOf('messages') >= 0|| this.router.url.indexOf('ReportDesigner') >= 0) ? true : false;
            this.savededitor = (this.router.url.indexOf('device') >= 0 || this.router.url.indexOf('users') >= 0 || 
                                this.router.url.indexOf('text') >= 0 || this.router.url.indexOf('messages') >= 0|| this.router.url.indexOf('ReportDesigner') >= 0) ? true : false;
        });
        this.themeService.setTheme(this.projectService.getLayoutTheme());
    }    
    ngOnInit() {
    }    
    ngAfterViewInit() {
        this.subscriptionLoad = this.projectService.onLoadHmi.subscribe(load => {
            let theme = this.projectService.getLayoutTheme(); //AT THIS LINE THE ERROR OCCURS
            this.darkTheme = (theme !== ThemeService.ThemeType.Default);
            this.themeService.setTheme(this.projectService.getLayoutTheme());
        }, error => {
            console.log('Error loadHMI');
        });
    }
    //...the rest of the code

What should I do to solve this error?

The project is run whith the following versions:

Angular CLI: 6.0.8 Node: 14.17.6 OS: win32 x64 Angular: 6.1.10 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

Package Version ----------------------------------------------------------- @angular-devkit/architect 0.6.8 @angular-devkit/build-angular 0.6.8 @angular-devkit/build-optimizer 0.6.8 @angular-devkit/core 0.7.5 @angular-devkit/schematics 0.6.8 @angular/cdk 6.4.7 @angular/cli 6.0.8 @angular/material 6.4.7 @ngtools/webpack 6.0.8 @schematics/angular 0.6.8 @schematics/update 0.6.8 rxjs 6.0.0 typescript 2.7.2 webpack 4.8.3

Upvotes: 0

Views: 3860

Answers (1)

Trouble
Trouble

Reputation: 90

ok, please try like this

getLayoutTheme() {
        return this.projectData?.hmi?.layout?.theme ?  this.projectData?.hmi?.layout?.theme : '';
    }

and same in the setter method

setLayoutTheme(theme: string) {
        this.projectData?.hmi?.layout?.theme = theme;
        this.saveLayout();
    }

Upvotes: 0

Related Questions