Hello, I'm facing a challenge with my Angular 6 application. I need to create a web component that can be integrated into another web application. I followed a tutorial and customized it according to my requirements which you can check out here:
However, when I try to render the component, nothing shows up on the screen and there are no errors in the browser console. Upon checking the source files in the browser, I can see that the JS file containing my web component has been loaded successfully.
Here's a snippet of what I have:
In app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
//various modules imported here
],
providers: [
//different services added here
],
entryComponents: [AppComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const myApp = createCustomElement(AppComponent, { injector });
customElements.define('app-component', myApp);
}
ngDoBootstrap(){ }
}
In package.json
[...]
"scripts": {
[..]
"build:elements": "ng build --prod --output-hashing none && node app-element.js"
}
In 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/');
})()
After running 'npm run build:elements' to build the element, I copy the generated files to a different application and include the necessary links in the index.html file.
This is how my index.html looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./app-component.js"></script>
</head>
<body>
<app-component></app-component>
</body>
</html>
If anyone has any suggestions or insights on how to solve this issue, I would greatly appreciate it. Thank you in advance!