为什么我无法读取angular universal中未定义的ngx_cookieconsent_NgcCookieConsentService.init的属性'initialise‘？

Question

CookieConsent和库版本？

- cookieconsent version: 3.1.1
- ngx-cookieconsent version: 2.2.3
- Angular CLI: 10.0.3
- Angular SSR (universal)

我正在运行以下命令：

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

其中：

"serve:ssr": "node dist/compy/server/main.js",

"build:ssr": "ng build --prod && ng run compy:server:production",

失败给出的日志

Node Express server listening on http://localhost:4000

ERROR TypeError: Cannot read property 'initialise' of undefined
    at NgcCookieConsentService.init (C:\Coding\compyFront\dist\compy\server\main.js:1:3482889)
    at new NgcCookieConsentService (C:\Coding\compyFront\dist\compy\server\main.js:1:3482119)
    at Object.NgcCookieConsentService_Factory [as factory] (C:\Coding\compyFront\dist\compy\server\main.js:1:3484065)
    at R3Injector.hydrate (C:\Coding\compyFront\dist\compy\server\main.js:1:2802301)
    at R3Injector.get (C:\Coding\compyFront\dist\compy\server\main.js:1:2799033)
    at NgModuleRef$1.get (C:\Coding\compyFront\dist\compy\server\main.js:1:2977443)
    at Object.get (C:\Coding\compyFront\dist\compy\server\main.js:1:2946537)
    at getOrCreateInjectable (C:\Coding\compyFront\dist\compy\server\main.js:1:2713691)
    at Module.ɵɵdirectiveInject (C:\Coding\compyFront\dist\compy\server\main.js:1:2832947)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (C:\Coding\compyFront\dist\compy\server\main.js:1:1694986)

提到任何其他可能有用的细节

它在普通应用程序中运行得很好，但在通用的angular应用程序中失败了，所以我认为这主要是因为在服务器端模式下运行时试图打开一个窗口或对话框。或者，有可能需要以某种方式将其添加到angular.json配置文件之外的其他位置。

请你需要的任何文件只是告诉我，我只是不能张贴整个项目，因为它是私人的，但我可以交付单个文件没有问题。

Answer 1

对我来说，这个问题是通过将cookieconsent.min.css和cookieconsent.min.js添加到angular.json来修复的

"styles": [
            "./node_modules/cookieconsent/build/cookieconsent.min.css"
          ],
          "scripts": [
            "./node_modules/cookieconsent/build/cookieconsent.min.js"
          ]

Answer 2

NgcCookieConsentService无法在服务器端初始化，因为未定义全局窗口属性。作者在他们的代码中似乎处理了一个Angular Universal case (cookieconsent.service.ts:134)，但这仍然不能在Angular 10上工作。

我的紧急快速解决方案是在server.ts中定义一个空函数"initialize“，该函数正在运行带有"@nguniversal/ Express -engine”中间件的express服务器。也许不是完美的，但它是有效的，是使我的项目在生产中工作的一种变通方法。

...

function setBrowserGlobals(distFolder) {
    const template = readFileSync(join(distFolder, 'index.html')).toString();
    const domino = require('domino');
    const win = domino.createWindow(template);

    global['window'] = win;
    global['document'] = win.document;
    global['Node'] = win.Node;
    global['navigator'] = win.navigator;
    global['Event'] = win.Event;
    global['Event']['prototype'] = win.Event.prototype;
    global['localStorage'] = localStorage;
    global['window']['gtag'] = function () {};
    global['window']['cookieconsent'] = { initialise: function () {
        console.warn('Cookie consent is not working on server side');
    } };
}

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
    const server = express();
    const distFolder = join(process.cwd(), 'dist/browser');
    const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

    setBrowserGlobals(distFolder);

   ...
}

Answer 3

对于得到此错误但不使用通用的人:当您忘记安装CookieConsent (在angular.json样式/脚本中使用适当的文件引用)时，也会显示此错误。