Angular 6創建Web組件

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"
}

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

關於這個問題有什么建議嗎？

提前致謝

Answer 1

問題解決了。 這是一個路由問題

Angular 6創建Web組件

問題描述

1 個解決方案

解決方案1
0 已采納 2018-05-30 09:30:11

Angular 6創建Web組件

問題描述

1 個解決方案

解決方案1 0 已采納 2018-05-30 09:30:11

解決方案1
0 已采納 2018-05-30 09:30:11