时间戳

首页 > 解决方案 > 如何测试部署在云上的 Angular SPA

angular - 如何测试部署在云上的 Angular SPA

问题描述

我正在尝试通过将多个 Angular 应用程序组合在一起来使用 Angular 中的单页应用程序创建一个应用程序。我在 IBM 云上部署了一个应用程序，并希望从我本地运行的容器应用程序中对其进行测试。我无法这样做，在控制台中出现错误：

CORS 策略已阻止从源“http://localhost:4200”访问“https://srt-onenet.dal1a.ciocloud.nonprod.intranet.ibm.com/main.js”处的脚本：没有“访问权限” -Control-Allow-Origin' 标头存在于请求的资源上。

我认为 main.js 文件在我部署时没有生成。有人可以帮忙吗，我对此很陌生，角度 SPA 的资源并不多。

    Docker File
    # ----- BUILD -----
# Base image used for build node js apps
FROM node:12.2.0-alpine AS build
# Set our working directory
WORKDIR /app
# Copy package manifest (we do this in order to cache dependencies)
COPY ./package.json .
# Install dependencies
RUN npm i
RUN npm install -g @angular/cli@8.3.26
# Copy our application files
COPY . .
# Build a static version of our angular app
RUN ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path
# ----- SERVE -----
# We'll use an nginx base to host our built static assets 
FROM nginx

# Copy our minimal custom configuration
#COPY nginx.conf /etc/nginx/nginx.conf

# Copy our static assets from our build container
COPY --from=build /app/dist/app1 /usr/share/nginx/html

# support running as arbitrary user which belogs to the root group
RUN chmod g+rwx /var/cache/nginx /var/run /var/log/nginx

# 80 is a priviliged port
# users are not allowed to listen on priviliged ports
RUN sed -i.bak 's/listen\(.*\)80;/listen 8080;/' /etc/nginx/conf.d/default.conf

EXPOSE 8080

# remove the user directive
# comment user directive as master process is run as user in OpenShift anyhow
RUN sed -i.bak 's/^user/#user/' /etc/nginx/nginx.conf

#EXPOSE 8081
CMD ["nginx", "-g", "daemon off;"] 

Index.html of container app

<html>

<head>
  <meta http-equiv="Content-Security-Policy"
    content="default-src *  data: blob: 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline';">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Container application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="importmap-type" content="systemjs-importmap">
  <script type="systemjs-importmap">
      {
        "imports": {
          "app1": "https://srt-onenet.dal1a.ciocloud.nonprod.intranet.ibm.com/main.js"
          "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js",
          "single-spa-layout": "https://unpkg.com/single-spa-layout@1.0.0-beta.2/dist/system/single-spa-layout.min.js"
        }
      }
    </script>
  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/5.5.0/system/single-spa.min.js"
    as="script" crossorigin="anonymous" />
  <script src='https://unpkg.com/core-js-bundle@3.1.4/minified.js'></script>
  <script src="https://unpkg.com/zone.js@0.10.3/dist/zone.js"></script>
  <script src="https://unpkg.com/import-map-overrides@1.15.1/dist/import-map-overrides.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/amd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-exports.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-register.min.js"></script>
  <template id="single-spa-layout">
    <single-spa-router>
      <nav class="topnav">
        <application name="nav-bar"></application>
      </nav>
      <div class="main-content">
        <route path="app1">
          <application name="app1"></application>
        </route>
        <route path="app2">
          <application name="app2"></application>
        </route>
        <route path="nsrt-app">
          <application name="nsrt-app"></application>
        </route>
        <route path="sldb-app">
          <application name="sldb-app"></application>
        </route>
      </div>
    </single-spa-router>
  </template>
</head>

<body>
  <script>
    Promise.all([System.import('single-spa'), System.import('single-spa-layout')]).then(([singleSpa, singleSpaLayout]) => {
      const { constructApplications, constructLayoutEngine, constructRoutes } = singleSpaLayout;
      const { registerApplication, start } = singleSpa;

      const routes = constructRoutes(document.querySelector('#single-spa-layout'));
      const applications = constructApplications({
        routes,
        loadApp({ name }) {
          return System.import(name);
        },
      });
      const layoutEngine = constructLayoutEngine({ routes, applications });
      applications.forEach(registerApplication);

      start();
    });
  </script>
  <import-map-overrides-full></import-map-overrides-full>
</body>

</html>

标签： angularsingle-page-application

解决方案

推荐阅读