Я создал веб-компонент, используя angular, и сгенерировал element.js, но когда я хочу импортировать простой HTML-код страницы, он выдает мне ошибку:
Uncaught Error: не задан базовый href. Укажите значение токена APP_BASE_HREF или добавьте базовый элемент в документ.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RedComponent } from './red/red.component';
@NgModule({
declarations: [
AppComponent,
RedComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
entryComponents:[RedComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const red = createCustomElement(RedComponent, { injector });
customElements.define('custom-red', red);
}
}
red.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';
@Component({
selector: 'app-red',
templateUrl: './red.component.html',
styleUrls: ['./red.component.css']
})
export class RedComponent implements OnInit {
constructor(private elementRef: ElementRef){
}
ngAfterViewInit(){
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'red';
}
ngOnInit() {
}
}
package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --output-hashing=none",
"concat": "concat -o output.js ./dist/myapp1/runtime-es5.js ./dist/myapp1/polyfills-es5.js ./dist/myapp1/scripts.js ./dist/myapp1/main-es5.js",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Page</title>
<script src="output.js"></script>
</head>
<body>
<custom-red ></custom-red>
</body>
</html>
после поиска решения, которое я запускаю с выводом файла @ http-server, загружается, но появляется ошибка
Модуль fs был загружен, но он не объявляет компоненты "@ NgModule.bootstrap" и метод "ngDoBootstrap". Пожалуйста, определите один из них.