Как убедиться, что сторонний модуль узла не требует файла из-за конфликта Mime - PullRequest
0 голосов
/ 25 июня 2019

Как заставить пакет 'tdweb' (https://github.com/tdlib/td/tree/master/example/web/tdweb) работать в angular-cli. Я импортировал пакет и использовал его частично, и он частично работает. Однако возникает следующая ошибка:

Firefox:

Die Ressource von "http://localhost:4200/5bf22bc6b3c8aab8a6e3.worker.js" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff).
-eng: The Resource of 'link' was blocked due to a MIME-Type-Conflict...

Chrome:

tdweb.js:231 GET http://localhost:4200/5bf22bc6b3c8aab8a6e3.worker.js 404 (Not Found)
module.exports  @   tdweb.js:231
TdClient    @   tdweb.js:2219
push../src/app/services/tdinterface.service.ts.TdinterfaceService.createClient  @   tdinterface.service.ts:18
push../src/app/app.component.ts.AppComponent.ngOnInit   @   app.component.ts:19
checkAndUpdateDirectiveInline   @   core.js:22099
checkAndUpdateNodeInline    @   core.js:23363
checkAndUpdateNode  @   core.js:23325
debugCheckAndUpdateNode @   core.js:23959
debugCheckDirectivesFn  @   core.js:23919
(anonymous) @   AppComponent_Host.ngfactory.js? [sm]:1
debugUpdateDirectives   @   core.js:23911
checkAndUpdateView  @   core.js:23307
callWithDebugContext    @   core.js:24177
debugCheckAndUpdateView @   core.js:23879
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges  @   core.js:21688
(anonymous) @   core.js:18119
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @   core.js:18119
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent   @   core.js:18153
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap    @   core.js:18095
(anonymous) @   core.js:17808
push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap  @   core.js:17808
(anonymous) @   core.js:17776
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke    @   zone.js:391
onInvoke    @   core.js:17299
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke    @   zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run   @   zone.js:150
(anonymous) @   zone.js:889
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask    @   zone.js:423
onInvokeTask    @   core.js:17290
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask    @   zone.js:422
Promise.then (async)        
scheduleMicroTask   @   zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask  @   zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask  @   zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @   zone.js:258
scheduleResolveOrReject @   zone.js:879
ZoneAwarePromise.then   @   zone.js:1012
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @   core.js:17803
./src/main.ts   @   main.ts:11
__webpack_require__ @   bootstrap:78
0   @   main.ts:12
__webpack_require__ @   bootstrap:78
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.js:1

в строке module.exports @ tdweb.js:231 Я нашел следующий код:

module.exports = function() {
  return new Worker(__webpack_require__.p + "5bf22bc6b3c8aab8a6e3.worker.js");
};

У меня есть tdweb importet, подобный этому:

import TdClient from 'tdweb';

@Injectable({
  providedIn: 'root'
})
export class TdinterfaceService {
  constructor() {
  }
  createClient(options: { appid: string, apikey: string }) {
   let client = new TdClient({});
}

Таким образом, согласно сообщению об ошибке, я обнаружил, что что-то в угловом формате, которое имеет дело с такими «требует», добавляет к запросу неверный тип контента, поэтому браузер блокирует запрос:

HTTP/1.1 404 Not Found
X-Powered-By: Express
Access-Control-Allow-Origin: *
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 169
Date: Tue, 25 Jun 2019 09:58:30 GMT
Connection: keep-alive 

Как видите, требуется файл js, angular отправляет запрос на получение файла на локальный хост, и из-за типа содержимого text / html браузер блокирует его. Обратите внимание, что эта ошибка вызвана только конструктором TdClient.. Не имеет значения, какие опции я предоставляю.

Я также прочитал это https://github.com/angular/angular-cli/issues/10325, и решение там не работает для меня (<base href="/">, поскольку оно уже реализовано, как необходимо).

Итак, мой вопрос:Я сделал что-то не так?Проблема исходит от углового или из пакета «tdweb»?

РЕДАКТИРОВАТЬ: я взломал грязный обходной путь, где я добавил route.getter на моем сервере узлов, который обслуживает угловое приложение, поэтому сервер предоставляет файл js, необходимый для tdweb.Просто чтобы успокоить мои нервы.
выглядит так:

router.get('/5bf22bc6b3c8aab8a6e3.worker.js', (req, res, next)=> {
  res.sendFile('./public/javascripts/5bf22bc6b3c8aab8a6e3.worker.js' , {root: '__dirname'});
});

Однако это не жизнеспособное долгосрочное решение, поскольку оно обходит обычное управление пакетами angular.

EDIT2: хак не работает полностью, так как он открывает кроличью нору необходимых файлов для предоставления.

...