Angular 6 创建网络组件

Question

我有以下问题。我有一个使用 Angular 构建的应用程序 6. 我想创建一个包含此应用程序的 Web 组件，并能够将其用作不同 Web 应用程序的一部分。我遵循了本教程，并根据需要对其进行了修改： https://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/

结果是屏幕上没有呈现任何内容，现在浏览器中存在错误。在浏览器源文件上，我可以确认包含我的 Web 组件的 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"
}

在应用程序中-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: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>

关于这个问题有什么建议吗？

提前致谢

Answer 1

问题已解决。这是一个路由问题

Angular 6 创建网络组件

Angular 6 create web component

javascript

web-component

typescript

angular