Angular 使用角度元素创建的角度Web组件将替代角度Shell项目的应用程序根_Angular_Angular Elements_Native Web Component

Angular 使用角度元素创建的角度Web组件将替代角度Shell项目的应用程序根

angular

Angular 使用角度元素创建的角度Web组件将替代角度Shell项目的应用程序根,angular,angular-elements,native-web-component,Angular,Angular Elements,Native Web Component,我目前正在尝试使用Angular元素来创建web组件。我创建了一个在html页面中工作的web组件： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> </head> <body> <nav-bar title="Test&

我目前正在尝试使用Angular元素来创建web组件。我创建了一个在html页面中工作的web组件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
<nav-bar title="Test"></nav-bar>
<script type="text/javascript"
        src="https://dev-week-web-components.s3.eu-central-1.amazonaws.com/nav-bar.js"></script>
</body>
</html>

web组件的角度项目仅包含以下一个组件：

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'nav-bar',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent implements OnInit {
  @Input() title = 'Web-Component';

  constructor() { }

  ngOnInit(): void {
  }
}

nav-bar.js文件是来自内置Angular应用程序的main.js、polyfill.js runtime.js和vendor.js的具体文件。在教程中，使用了scripts.js文件。我没有这个文件。如果省略vendor.js文件，web组件将无法工作

我做错了什么？

多亏了用户14649759的提示，我才能够解决问题！：）

必须使用网页5。为了实现这一目标，我做了以下更改：

npm install -g yarn@latest
yarn add webpack@latest
yarn add copy-webpack-plugin@latest

添加到package.json：

  "resolutions": {
    "webpack": "^5.31.0"
  },

告诉Angular使用纱线：

ng config cli.packageManager yarn

使用纱线是必要的，因为纱线使用

分辨率

规格

资料来源：

我也有类似的问题，我认为这是一个网页问题，但我不确定。谢谢你的提示！使用Webpack 5可以解决此问题！：）

  "resolutions": {
    "webpack": "^5.31.0"
  },

ng config cli.packageManager yarn