代码：

Question

我试图创建一个NgModuleRef<AppModule>以便将某些组件呈现为非HTML格式。

我能够创建一个PlatformRef对象，但是当我在该对象上调用bootstrapModule(AppModule)时出现错误：

“错误：未提供ResourceLoader实现。无法读取url“ app.component.html”“

可能我应该在ResourceLoader以外的地方添加extraProviders的DI注册，但是我不知道确切的位置...

代码：

import { ResourceLoader } from '@angular/compiler';
import { Compiler, CompilerFactory, Injectable, StaticProvider, Type } from '@angular/core';
import { platformDynamicServer } from '@angular/platform-server';
import { AppComponent } from './app/app.component';
import { AppModule } from './app/app.module';

export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}

async function generate<M>(moduleType: Type<M>) {
  try {
    const extraProviders: StaticProvider[] = [
      { provide: ResourceLoader, useClass: ResourceLoaderImpl, deps: [] },
      { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] },
    ];
    const platformRef = platformDynamicServer(extraProviders);
    const moduleRef = await platformRef.bootstrapModule(moduleType);   // <<< BREAKS HERE

    const appComponent = moduleRef.injector.get(AppComponent);

    console.info(appComponent.title.toString());
  } catch (error) {
    throw new Error(error.toString());
  }
}

generate(AppModule)
  .then(message => console.info({ message }))
  .catch(error => console.error({ error }));

将ResourceLoaderImpl类代码复制到@angular/platform-browser-dynamic（src\resource_loader\resource_loader_impl.ts）的字母中：

@Injectable()
export class ResourceLoaderImpl extends ResourceLoader {
  get(url: string): Promise<string> {
    let resolve: (result: any) => void;
    let reject: (error: any) => void;
    const promise = new Promise<string>((res, rej) => {
      resolve = res;
      reject = rej;
    });
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'text';

    xhr.onload = function() {
      // responseText is the old-school way of retrieving response (supported by IE8 & 9)
      // response/responseType properties were introduced in ResourceLoader Level2 spec (supported
      // by IE10)
      const response = xhr.response || xhr.responseText;

      // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
      let status = xhr.status === 1223 ? 204 : xhr.status;

      // fix status code when it is 0 (0 status is undocumented).
      // Occurs when accessing file resources or on Android 4.1 stock browser
      // while retrieving files from application cache.
      if (status === 0) {
        status = response ? 200 : 0;
      }

      if (200 <= status && status <= 300) {
        resolve(response);
      } else {
        reject(`Failed to load ${url}`);
      }
    };

    xhr.onerror = function() { reject(`Failed to load ${url}`); };

    xhr.send();
    return promise;
  }
}

Answer 1

ResourceLoader是CompilerOptions的一部分，因此您应该提供它们。

可以通过platformRef.bootstrapModule作为第二个CompilerOptions参数来完成：

platformRef.bootstrapModule(moduleType, { 
  providers: [
    {
      provide: ResourceLoader, 
      useClass: ResourceLoaderImpl, deps: []
    }
  ]
});

或者您可以尝试提供COMPILER_OPTIONS令牌作为多提供者（此处是源代码的an example）：

const extraProviders: StaticProvider[] = [
  {
    provide: COMPILER_OPTIONS,
    useValue: {providers: [{provide: ResourceLoader, useClass: ResourceLoaderImpl, deps: []}]},
    multi: true
  },
  { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] },
];

PlatformRef.bootstrapModule（...）引发错误，提示“未提供ResourceLoader实现。”

代码：

1 个答案: