RouterLink in Angular 5 not show real path on DevTooLs

I want to know is this bug or specification that i can’t find.
In Angular 5, when I use routerLink like this


All works fine and I can route to URL /account/order/5aaaa0c6fd204609b3bd2577/messages in my component.
But if I open Chrome DevTools (I try it in Firefox DevTools too) I see line like this:


I tried to use different assigns for routerLink, but for all of that I got cutting real href (I put creating url string in component.ts and put only string variable in routerLink and other methods like [routerLink] creation). For first time it looks like ng-reflect-router-link have not so much length.
But I try use simple string in href and in DevTools I see normal link like this:

Anybody know, why I getting cutting real href? Maybe exist specialization or documentation for this behaviour or this looks like a bug and i need create issue on GitHub angular repo?

Component cannot subscribe to data source

I have this component listening for messages from a service. Note that every console.log() statement shown below is hit at least once, everything gets logged.

Here is the component:

import {Component, OnInit, Inject} from '@angular/core';
import {ChromeDataService} from '../../../../shared/services/events';


@Component({
  providers: [ChromeDataService],
  selector: 'app-events-list',
  templateUrl: './events-list.component.html',
  styleUrls: ['./events-list.component.scss']
})

export class EventsListComponent implements OnInit {

  isShowEventsList = false;
  events = [];

  constructor(private data: ChromeDataService) {
       console.log('events list component is constructed.');
  }

  ngOnInit() {
    console.log('events list component ngOnInit called.');
    this.data.currentMessage.subscribe(message => {
      console.log('adding message to array: ', message);
      this.events.push(message);
    })
  }

  showEventsList() {
    this.isShowEventsList = true;
  }

  hideEventsList() {
    this.isShowEventsList = false;
  }

}

here is the data source (an Angular service):

///

import {Injectable, Component, Inject} from '@angular/core';
import {ReplaySubject} from "rxjs/ReplaySubject";

@Injectable()
export class ChromeDataService {

  private messageSource = new ReplaySubject();
  public currentMessage = this.messageSource.asObservable();
  private isListening: boolean = false;
  private listener: any;

  constructor() {

    const self = this;
    this.listener = function (msg, sender, sendResponse) {
      const parsed = JSON.parse(msg);
      console.log('extension received a message:', parsed);
      self.changeMessage(parsed);
    };
  }

  changeMessage(message: Object) {
    this.messageSource.next(message);
  }

  stopListening() {
    this.isListening = false;
    chrome.runtime.onMessage.removeListener(this.listener);
  }

  startListening() {
    this.isListening = true;
    chrome.runtime.onMessage.addListener(this.listener);
  }


}

does anyone know why when changeMessage() is called, that the subscribe() callback does not get invoked?

One big hint is that when I use new BehaviorSubject('initial'); instead of new Subject() – then initial does arrive and ‘adding message to array’ is logged.

content script is not showing up in Chrome Dev Tools

I have this setting in my manifest.json:

  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": [],
      "js": ["content-script.js"]
    }
  ],

here is the code in the content-script.js file:

console.log('this is the content script.');

chrome.browserAction.onClicked.addListener(function(tab) {

  console.log('the following tab was clicked:', tab);

  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red"'
  });
});

if I click on the popup button and open the Chrome extension, and click “inspect” and open Dev Tools, I don’t see any content scripts listed:

enter image description here

However, now it gets really weird, because Chrome says that it can’t find the manifest.json file:

enter image description here

However, it’s clear that it could find my background.js script, which is declared in my manifest.json file:

enter image description here

As you can see, the options page, and background page are recognized. So it seems like Chrome does recognize/detect the manifest file.

Anybody have an idea of what might be wrong? How can I get my content-scripts to be loaded?

Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed

I get this error when reloading my Chrome Extension:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".


    at new Function ()
    at evalExpression (compiler.js:33919)
    at jitStatements (compiler.js:33937)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._interpretOrJit (compiler.js:34520)
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34448)
    at compiler.js:34347
    at Set.forEach ()
    at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
    at compiler.js:34217
    at Object.then (compiler.js:474)

I have this in my manifest.json:

 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

is there any other setting I can use to avoid that error?