Angular 6 创建 Web 组件答案

【问题标题】：Angular 6 create web componentAngular 6 创建 Web 组件
【发布时间】：2018-05-25 13:06:05
【问题描述】：

我有以下问题。我有一个使用 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"
}

在 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: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>

对这个问题有什么建议吗？

提前致谢

【问题讨论】：

标签： javascript angular typescript web-component

【解决方案1】：

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

【讨论】：