I am writing a chrome extension that should define different custom elements. I want to use standalone angular components for that. But if I bootstrap them in contentPage.js, I always got an EvalError from Chrome Browser.
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' 'wasm-unsafe-eval'".
I thought with aot compiling (which is default in angular 14) JIT compilation should not be a problem anymore. So I don't understand why angular JitEvaluator is called here anyway.
package.json
{
"postinstall": "ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points",
"private": true,
"dependencies": {
"@angular/animations": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/elements": "^14.1.0",
"@angular/forms": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",
"ngx-build-plus": "^14.0.0-beta.0",
"rxjs": "^7.5.6",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.0.0",
"@angular/cli": "^14.0.0",
"@angular/compiler-cli": "^14.0.0",
"@angular/language-service": "^14.0.0",
"@types/chrome": "0.0.141",
"@types/node": "^12.12.32",
"awesome-typescript-loader": "^5.2.1",
"bestzip": "^2.1.7",
"npm-run-all": "^4.1.5",
"rimraf": "^2.7.1",
"ts-loader": "^9.2.6",
"ts-node": "~10.3.0",
"typescript": "~4.7.3",
"webpack-cli": "^4.9.0"
}
candidate.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-candidate-button',
standalone: true,
imports: [CommonModule],
templateUrl: './candidate.component.html',
styleUrls: ['./candidate.component.scss']
})
export class CandidateComponent implements OnInit {
public buttonText = '';
constructor() { }
ngOnInit(): void { }
@Input() id = "openButton"
@Input() class = "";
@Input() style = "";
@Input()
set text(name: string) {
this.buttonText = name.toUpperCase();
}
get name(): string {
return this.buttonText;
}
}
app.module.ts
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CandidateComponent } from './components/candidate/candidate.component';
@NgModule({
declarations: [AppComponent, CandidateComponent],
imports: [BrowserModule, AppRoutingModule],
entryComponents: [CandidateComponent],
providers: []
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const el = createCustomElement(CandidateComponent, {
injector: this.injector
});
customElements.define("app-candidate-button", el);
}
}
contentPage.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from '../../angular/src/app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
