Wordpress 페이지에 Angular 앱을 삽입하려면 어떻게 해야 합니까?

Wordpress 페이지에 Angular 앱을 삽입하려면 어떻게 해야 합니까?

컴파일 되어 동작하는 Angular 7 앱을 만들었습니다(작은 게임입니다).Wordpress 설치 페이지에 포함시키고 싶습니다.

1. Angular 앱(ng 빌드를 실행한 후 dist 폴더의 내용)의 컴파일 출력을 어디에 저장해야 합니까?
2. 내 Wordpress 페이지(Angular 앱을 내장한HTML)의 HTML 코드는 어떻게 생겼습니까?

iFrame과 연동하여 솔루션을 만들었습니다.

angular.json에서 prod를 설정합니다.

"outputHashing": "none"

그런 다음 "prod" 구성을 사용하여 Angular 7 앱을 만듭니다.

ng build --prod

빌드 출력(통상 $PROJECT_DIR/dist)을 워드프레스 페이지의 "wp-content" 디렉토리 내의 "angular-app" 서브 디렉토리에 복사합니다.

이제 Angular 앱의 index.html을 수정해야 합니다.바꾸다

<base href="/">

로.

<base href="/wp-content/angular-app/">

base href 경로의 trailing /는 반드시 필요합니다.그것 없이는 작동하지 않을 것이다.

워드프레스 설치 대상 페이지에 다음 커스텀HTML 코드를 삽입합니다.

<iframe id="angularFrame" title="My Angular App" frameBorder="0"
    src="http://wordpress-url.com/wp-content/angular-app/index.html" 
    width="600" height="600">
</iframe>

워드프레스 페이지에 각진 앱이 표시됩니다.

언급URL : https://stackoverflow.com/questions/55843283/how-can-i-embed-an-angular-app-into-a-wordpress-page