node.js - Angular Universal 和 ElementRef/Renderer2.createElement

Question

我已使用此处概述的步骤将 Angular 5 应用程序移植到 Angular Universal:https://angular.io/guide/universal

我正在尝试移植文档和窗口的一些用途。它构建得很好，但现在我遇到了这个运行时错误:

    ERROR { Error: Uncaught (in promise): Error: StaticInjectorError[LayoutDirective -> ElementRef]: 
  StaticInjectorError(Platform: core)[LayoutDirective -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!

我的一项 Karma 测试显示了类似的错误:

Chrome 63.0.3239 (Mac OS X 10.13.2) MyComponent should create FAILED
        Error: StaticInjectorError(DynamicTestModule)[MatIcon -> ElementRef]:
          StaticInjectorError(Platform: core)[MatIcon -> ElementRef]:
            NullInjectorError: No provider for ElementRef!
            at _NullInjector.webpackJsonp.../../../core/esm5/core.js._NullInjector.get Users/project/node_modules/@angular/core/esm5/core.js:994:1)

我相信这是破坏代码的代码(旧版本已注释掉)；

    @Injectable()
    export class MyService {
        @ViewChild('head') headEl: ElementRef;

...
    return Observable.create((observer: Observer<boolean>) => {
                // const node = document.createElement('script');
                const node = this._renderer2.createElement('script');


                node.src = this.url;
                node.type = 'text/javascript';
                node.charset = 'utf-8';

                // document.getElementsByTagName('head')[0].appendChild(node);
                this._renderer2.appendChild(this.headEl, node);

                node.onload = () => {
                    observer.next(true);
                    observer.complete();
                };
            });

编辑:现在我看到此错误:

Failed: _this._renderer2.createElement is not a function
        TypeError: _this._renderer2.createElement is not a function

为什么 renderer2.createElement 不是一个函数？

Answer 1

我找到了解决方案。您实际上无法直接在服务中使用 Renderer2，因此我使用了此处的 RendererFactory2 建议:Renderer cannot be used in Service?

然后我改变了这一行:

this.renderer2.appendChild(this.headEl, node);

对此:

this.renderer2.appendChild(this._document.head, node);