Я попытался использовать следующие два компонента масштабирования / прокрутки для моего проекта 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 /