У меня следующая проблема.У меня есть приложение, созданное с использованием Angular 6. Я хочу создать веб-компонент, который будет содержать это приложение и иметь возможность использовать его как часть другого веб-приложения.Я следовал этому руководству и изменил его в соответствии со своими потребностями: https://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/
В результате ничего не отображается на экране, и в браузере появилась ошибка.В исходных файлах браузера я могу подтвердить, что файл js, содержащий мой веб-компонент, успешно загружен.
Вот что у меня есть:
В app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
//different modules here
],
providers: [
//different services here
],
entryComponents: [AppComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const myApp = createCustomElement(AppComponent, { injector });
customElements.define('app-component', myApp);
}
ngDoBootstrap(){ }
}
В package.json
[...]
"scripts": {
[..]
"build:elements": "ng build --prod --output-hashing none && node app-element.js"
}
В app-element.js
const fs = require('fs-extra');
const concat = require('concat');
(async function build() {
const files = [
'../../target/app/runtime.js',
'../../target/app/polyfills.js',
'../../target/app/scripts.js',
'../../target/app/main.js'
]
await fs.ensureDir('app-element')
await concat(files, 'elements/app-component.js');
await fs.copyFile('../../target/app/styles.css', 'elements/styles.css');
await fs.copy('../../target/app/assets/', 'elements/assets/');
})()
После того, как я собрал элемент, выполнив следующую команду 'npm run build build: elements'.Я копирую файлы в другое приложение и импортирую соответствующие ссылки в index.html.
Вот мой index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./app-component.js"></script>
</head>
<body>
<app-component></app-component>
</body>
</html>
Есть предложения по этой проблеме?
Заранее спасибо