Angular Web 組件不顯示任何內容

Question

我有以下問題。 我需要一些可跨不同 UI 框架重用的東西，或者只是簡單的 html/css/js。 我發現我可以在 Angular 框架中創建一個 web 組件，所以我做了測試應用程序。 一切似乎都很好，但是當我打開 index.html 時，它包含加載.js文件並用我的應用程序標記的腳本，瀏覽器中沒有任何內容。 有人知道我哪里有問題嗎？

tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

我的應用組件：

@Component({
  selector: 'my-comp',
  template: `
    <p>custom-web-comp works!</p>
    <p>Data:</p>
    <p *ngFor="let data of webService.getData()">
      {{data.name}} | {{data.value}}
    </p>
`
})
export class AppComponent {

  constructor(public webService: WebCompService) { }
}

我的應用模塊：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [],
  entryComponents: [
    AppComponent
  ]
})
export class AppModule implements DoBootstrap {

  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(AppComponent, {
      injector: this.injector
    });
    customElements.define('my-comp', el);
  }
}

在 package.json 我有這個腳本：

"build:elements": "ng build --output-hashing none && node build-elements.js"

構建元素.js：

const fs = require('fs-extra');
const concat = require('concat');

(async function build() {
  const files = [
    './dist/ng-element-demo/runtime-es5.js',
    './dist/ng-element-demo/runtime-es2015.js',
    './dist/ng-element-demo/polyfills-es5.js',
    './dist/ng-element-demo/polyfills-es2015.js',
    './dist/ng-element-demo/scripts.js',
    './dist/ng-element-demo/main-es5.js',
    './dist/ng-element-demo/main-es2015.js'
  ];

  await fs.ensureDir('elements');
  await concat(files, 'elements/ng-element-demo.js');
})();

然后我在 index.html 中嘗試這個：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testing the News Web Component</title>
  </head>
  <body>
    <p>Hello</p>
    <my-comp></my-comp>
      
    <script src="./ng-element-demo.js"></script>
  </body>
</html>

但是即使成功加載了 ng-element.demo.js（可以在開發工具中看到），瀏覽器也只會呈現“Hello”。

感謝您的任何幫助

Answer 1

我認為您需要做的是將文件放在資產文件夾中。 您可以在那里創建一個 js 文件夾並在其中添加 ng-element-demo.js。 然后在您的 angular.json 文件中，您需要將其添加到腳本下。

So you will have something like this
 "scripts": [
              "src/assets/js/ng-element-demo.js"
            ]

Angular Web 組件不顯示任何內容

問題描述

1 個解決方案

解決方案1
0 2020-11-24 14:15:09

Angular Web 組件不顯示任何內容

問題描述

1 個解決方案

解決方案1 0 2020-11-24 14:15:09

解決方案1
0 2020-11-24 14:15:09