angular - 类型错误 : Cannot Read Property 'CreateObjectURL' Of Undefined

标签 angular angular-universal aws-amplify server-side-rendering

我们有一个 Angular 应用程序,我正在尝试对我们现有的 Angular 应用程序实现服务器端渲染 (SSR),以实现 SEO 和链接预览:

Angular 版本:8.2.3

我将其转换为 SSR 的步骤:

  1. 使用 Angular CLI 添加 Angular Universal

ng add @nguniversal/express-engine --clientProject {{ 项目名称}}

  1. 构建我正在使用的命令

npm run build:ssr && npm run serve:ssr

  1. 我使用 domino 在 server.ts 中添加的窗口对象和其他 polyfill
import fs from 'fs';
const template = fs.readFileSync(join(DIST_FOLDER, 'index.html')).toString();
import { Blob } from "blob-polyfill";

const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global["branch"] = null;
global["object"] = win.object;
global["HTMLElement"] = win.HTMLElement;
global["navigator"] = win.navigator;
global['Blob'] = Blob;

/** NOTE :: leave this as require() since this file is built Dynamically from webpack */
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

/** Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine) */
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

我试着检查它是否是任何第 3 方包,如果它导致错误,我可以理解它是 aws-aplify-angular,里面有 aws -lex-audio.js 包含导致该错误的行。甚至我也没有使用包含该文件的interactions module。但仍然没有运气。

我试过的解决方案,

如果有帮助,我尝试使用放大模块方法排除interactions模块

    {
        provide: AmplifyService,
        useFactory:  () => {
          return AmplifyModules({
            Auth,
            Storage,
          });
        }
    },
]

有什么办法可以消除这个错误吗?

enter image description here

最佳答案

这里的问题是您正在使用 aws-amplify-angular 并将其导入模块中的某处。

这也将导入交互模块,即使您不需要使用它。只要确保不使用这个模块就可以了。

关于angular - 类型错误 : Cannot Read Property 'CreateObjectURL' Of Undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59098855/

相关文章:

angular - 在组件之间共享 Auth Observable 值,无需多次执行

android - 无法解析符号 CreateTodoInput

javascript - 如何将状态映射回 Vue.js AWS Amplify 身份验证页面中的组件

node.js - 安装 AWS Amplify CLI 时出错

animation - Angular 动画 : Page transition without style `position: absolute` ?

angular - 更改 ngControl.valueAccessor 以动态更改组件

angular - 服务器端不呈现 http 请求 [Angular Universal]

angular - 由于 Firebase 的 IDBIndex 错误,无法提供服务器呈现的应用程序

html - 如何将svg从文件导入 Angular 为5的组件中?

javascript - 带有 javascript 前端的 Django 后端 - 最佳实践