Как исправить предупреждение «запрос зависимости является выражением» для каждого импортированного компонента Angular, который я пытаюсь использовать? - PullRequest
Новая
       41

Как исправить предупреждение «запрос зависимости является выражением» для каждого импортированного компонента Angular, который я пытаюсь использовать?

0 голосов
/ 08 апреля 2019

Я попытался использовать следующие два компонента масштабирования / прокрутки для моего проекта Angular. https://www.npmjs.com/package/@durwella/zoomable-canvas https://www.npmjs.com/package/ngx-image-zoom + 2 других

Я установил новейшие версии Angular и CLI.

Я использую компоненты, как описано в их описании.

Я всегда получаю такой вывод: 

Date: 2019-04-08T07:25:54.247Z - Hash: 04335a524823021a32f6 - Time: 1429ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 13.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.6 MB [initial] [rendered]

WARNING in ../node_modules/@angular/core/fesm5/core.js 18359:15-36
Critical dependency: the request of a dependency is an expression

WARNING in ../node_modules/@angular/core/fesm5/core.js 18371:15-102
Critical dependency: the request of a dependency is an expression
ℹ ｢wdm｣: Compiled with warnings.

и моя страница просто показывает 

Cannot GET /

Вот что я пробовал

1 До сих пор я узнал, что я должен немного изменить код в следующем файле: webpack.config.js

Но я также прочитал, что этот файл больше не существует в угловом формате. Я пытался найти его, и я нигде не могу его найти.

2 Из этих комментариев по схожим вопросам я попытался найти, где использовалось require().

https://github.com/webpack/webpack/issues/196#issuecomment-463664411 https://github.com/webpack/webpack/issues/196#issuecomment-463688280

, но просто не может найти, где используется require().

3 Я читал в ветке, что предупреждение может появиться в результате того, что путь к module не указан достаточно точно.

Из следующей строки в предупреждении я обнаружил ошибку в core.js 

WARNING in ../node_modules/@angular/core/fesm5/core.js 18359:15-36

return System.import(module)
            .then(function (module) { return module[exportName]; })
            .then(function (type) { return checkNotEmpty(type, module, exportName); })
            .then(function (type) { return _this._compiler.compileModuleAsync(type); });

и в строке 18371 это: 

return System.import(this._config.factoryPathPrefix + module + this._config.factoryPathSuffix)
            .then(function (module) { return module[exportName + factoryClassSuffix]; })
            .then(function (factory) { return checkNotEmpty(factory, module, exportName); });

Я подумал, что вполне вероятно, что предупреждение исходит из-за отсутствия определенного местоположения module

, так как обе строки взяты из NgModuleFactoryLoader, описанного как таковой * NgModuleFactoryLoader that uses SystemJS to load NgModuleFactory меня привели на охоту за NgModuleFactory Но я нигде не могу его найти.

Однако я нашел следующий код в файле core.js, который я рассматриваю, следует ли мне использовать для создания NgModule? 

    /**
     * Creates an instance of an `@NgModule` for the given platform
     * for offline compilation.
     *
     * @usageNotes
     * ### Simple Example
     *
     * ```typescript
     * my_module.ts:
     *
     * @NgModule({
     *   imports: [BrowserModule]
     * })
     * class MyModule {}
     *
     * main.ts:
     * import {MyModuleNgFactory} from './my_module.ngfactory';
     * import {platformBrowser} from '@angular/platform-browser';
     *
     * let moduleRef = platformBrowser().bootstrapModuleFactory(MyModuleNgFactory);
     * ```
     */

Это мой соответствующий код:

Здесь я импортирую компонент в мой файл app.module.ts 

// Import the library
import { NgxImageZoomModule } from 'ngx-image-zoom';

Здесь я включаю его в @NgModule в моем файле app.module.ts 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxImageZoomModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Здесь я добавляю его в мой файл app.component.html 

<ngx-image-zoom
    [thumbImage]="assets/pic.png"
    [fullImage]="assets/pic.png"
    <div _ngcontent-c1="" class="ngxImageZoomContainer" style="width: 650px; height: 401px;"><img _ngcontent-c1="" class="ngxImageZoomThumbnail" height="100%" width="100%" src="assets/pic.png"><div _ngcontent-c1="" class="ngxImageZoomFullContainer" ng-reflect-ng-class="[object Object]" style="top: 0px; left: 0px; width: 650px; height: 401px; border-radius: 0px; display: none;"><img _ngcontent-c1="" class="ngxImageZoomFull" src="assets/pic.png" style="top: -24px; left: -824px; width: 3250px; height: 2005px; display: none;"></div></div>
></ngx-image-zoom>

Что я ожидаю: Я ожидаю, что мой проект не будет показывать никаких предупреждений после компиляции. И я ожидаю, что смогу импортировать компоненты и использовать их в моем HTML-файле. Моя страница просто отображает: 

Cannot GET /
...