C:/........../node_modules/ng-lazyload-image/ng-lazyload-image.d.ts์ ScrollHooks์ ๋ํ ๋ชจ๋ ๋งค๊ฐ๋ณ์๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค. ์ค๋ฅ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค. (?). ์ด๊ฒ์ ng build --prod๋ฅผ ์ํํ ๋๋ง ๋ฐ์ํ์ง๋ง ng build์์๋ ์ ์๋ํฉ๋๋ค. ๋๋ ์ฑ๊ณตํ์ง ๋ชปํ npm install ng-lazyload-image --save-prod๋ฅผ ์๋ํ์ต๋๋ค.
๋น๋ ๋ช
๋ น์์ --prod
๋ฅผ ์ฌ์ฉํ๋ ๋์์๋ ์ด๋ฐ ์ข
๋ฅ์ ๋ฌธ์ ์ ์ง๋ฉดํ์ต๋๋ค.
์ด๋ค ๋ฒ์ ์ Angular๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๊น?
์ ์ฒด ์ค๋ฅ ๋ฉ์์ง๋ฅผ ๋ฃ์ ์ ์์ต๋๊น?
๊ฐ๋ 8.3
C:.........../node_modules/ng-lazyload-image/ng-lazyload-image.d.ts:(?)์ ScrollHooks์ ๋ํ ๋ชจ๋ ๋งค๊ฐ๋ณ์๋ฅผ ํด๊ฒฐํ ์ ์์ ์ค๋ฅ.
ScrollHook์ ์ฌ์ฉํ๊ณ ์์ต๋๊น? ๋๋ ์ค์ ์ด ์ด๋ป๊ฒ ์๊ฒผ์ต๋๊น?
๋ค์๊ณผ ๊ฐ์ด ๋ณด์ด๋์?
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } from 'ng-lazyload-image';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, LazyLoadImageModule],
providers: [{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks }],
bootstrap: [AppComponent],
})
export class MyAppModule {}
์, ๊ฐ์ ธ์ค๊ธฐ๋ App Module ํด๋์ค์ ๊ฒ๊ณผ ์ ํํ ๊ฐ์ต๋๋ค.
@tjoskar ๋๋ ๋๊ฐ์ด ๊ตฌํํ์ต๋๋ค. ๋๋ ๋ํ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์
์ด๊ฒ์ ๋๋ฒ๊น ํ๋ ค๋ฉด Angular 8.3 ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด์ผ ํฉ๋๋ค. ์ฝ๋๋ฅผ ๊ณต์ ํ๊ฑฐ๋ ์ค๋ฅ๋ฅผ ์ฌํํ ์ ์๋ ์์ ์ ์ฅ์๋ฅผ ๋ง๋ค ์ ์์ต๋๊น? ์๋๋ฉด package.json ํ์ผ์ ์ฃผ์ธ์.
{
"์ด๋ฆ": "๊ฐ์ธ ์น์ฌ์ดํธ",
"๋ฒ์ ": "0.0.0",
"์คํฌ๋ฆฝํธ": {
"~์": "~์",
"์์": "์๋ธ ์ค",
"๋น๋": "๋น๋ ์ค",
"ํ
์คํธ": "ํ
์คํธ ์ค",
"๋ณดํธ๋ผ๊ธฐ": "๋ณดํธ๋ผ๊ธฐ",
"e2e": "e2e์"
},
"๋น๊ณต๊ฐ": ์ฌ์ค,
"์ข
์์ฑ": {
"@angular/animations": "~ 8.2.14",
"@angular/common": "~ 8.2.14",
"@๊ฐ๋/์ปดํ์ผ๋ฌ": "~ 8.2.14",
"@angular/core": "~ 8.2.14",
"@angular/forms": "~ 8.2.14",
"@angular/platform-browser": "~ 8.2.14",
"@angular/platform-browser-dynamic": "~ 8.2.14",
"@angular/router": "~ 8.2.14",
"๋ถํธ์คํธ๋ฉ": "^4.4.1",
"ํ๋ฒ๊ฑฐ": "^1.1.3",
"jquery": "^3.5.1",
"์๊ฐ": "^2.24.0",
"lazyload-image": "^9.0.0",
"rxjs": "~ 6.4.0",
"tslib": "^1.10.0",
"zone.js": "~ 0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.24",
"@angular/cli": "~ 8.3.23",
"@angular/compiler-cli": "~ 8.2.14",
"@angular/language-service": "~ 8.2.14",
"@types/jasmine": "~ 3.3.8",
"@types/jasminewd2": "~ 2.0.3",
"@์ ํ/๋
ธ๋": "~ 8.9.4",
"codelyzer": "^5.0.0",
"์ฌ์ค๋ฏผ ์ฝ์ด": "~ 3.4.0",
"jasmine-spec-reporter": "~ 4.2.1",
"์นด๋ฅด๋ง": "~ 4.1.0",
"์นด๋ฅด๋ง ํฌ๋กฌ ์คํ๊ธฐ": "~ 2.2.0",
"karma-coverage-istanbul-reporter": "~ 2.0.1",
"์นด๋ฅด๋ง ์ฌ์ค๋ฏผ": "~ 2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"๊ฐ๋๊ธฐ": "~ 5.4.0",
"ts-๋
ธ๋": "~ 7.0.0",
"tslint": "~ 5.15.0",
"typescript": "~ 3.5.3"
}
}
๋๋ ๋ํ์ด ๋์ผํ ์ค๋ฅ์ ์ง๋ฉดํ๊ณ ์์ต๋๋ค. ์์ ์ฃผ์๊ณผ ๋์ผํ ๋งค๊ฐ๋ณ์์ ๋๋ค.
Angular 8์ ๋ฒ๊ทธ์์ ํ์ธํ ์ ์์ต๋๋ค(Angular 10์์๋ ์ฌํํ ์ ์์).
์๋ง๋ ์ด ๋ผ์ธ ๋๋ฌธ์ผ ๊ฒ์ ๋๋ค: https://github.com/tjoskar/ng-lazyload-image/blob/78512a9b8d2dae86e0719feb11ff810485948aab/src/scroll-hooks/hooks.ts#L11
ํ์ฌ๋ก์๋ ์๋ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.
```
'@angular/platform-browser'์์ { BrowserModule } ๊ฐ์ ธ์ค๊ธฐ;
'@angular/core'์์ { NgModule } ๊ฐ์ ธ์ค๊ธฐ;
'ng-lazyload-image'์์ { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } ๊ฐ์ ธ์ค๊ธฐ;
'./app.component'์์ { AppComponent } ๊ฐ์ ธ์ค๊ธฐ;
// ์์ฑ์ ์ธ์๊ฐ ์๋ ์ฌ์ฉ์ ์ ์ ํด๋์ค ์์ฑ
๋ด๋ณด๋ด๊ธฐ ํด๋์ค MyScrollHooks ํ์ฅ ScrollHooks {
์์ฑ์() {
๊ฐ๋
์()
}
}
@NgModule({
์ ์ธ: [AppComponent],
๊ฐ์ ธ์ค๊ธฐ: [BrowserModule, LazyLoadImageModule],
์ ๊ณต์: [{ ์ ๊ณต: LAZYLOAD_IMAGE_HOOKS, useClass: MyScrollHooks }],
๋ถํธ์คํธ๋ฉ: [AppComponent],
})
๋ด๋ณด๋ด๊ธฐ ํด๋์ค AppModule {}
```
์ฐธ์กฐ ๊ฐ๋ ์ฑ์ https://github.com/tjoskar/ng-lazyload-image-bugs/blob/master/476-cant-resolve-all-parameters-for-ScrollHooks/src/app/app ์์ ์ฐพ์ ์ ์์ต๋๋ค
๊ฐ์ฌ ํด์! ํด๊ฒฐํ์ต๋๋ค! ๋ด ์ต๊ทค๋ฌ ๋ฒ์ ์ด ์ผ๋ง๋ ๋ค์ณ์ ธ ์๋์ง ๋ชฐ๋์ต๋๋ค. ๊ทธ๋์ ์ต์ ๋ฒ์ ์ผ๋ก ์ ๋ฐ์ดํธ ํ์ต๋๋ค.
[email protected]
์ ์์ ์ฌํญ์ด ํฌํจ๋์ด ์์ผ๋ฏ๋ก ์ถ๊ฐ๋ก ๋น ํด๋์ค๋ฅผ ๋ง๋ค ํ์๊ฐ ์์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
Angular 8์ ๋ฒ๊ทธ์์ ํ์ธํ ์ ์์ต๋๋ค(Angular 10์์๋ ์ฌํํ ์ ์์).
์๋ง๋ ์ด ๋ผ์ธ ๋๋ฌธ์ผ ๊ฒ์ ๋๋ค: https://github.com/tjoskar/ng-lazyload-image/blob/78512a9b8d2dae86e0719feb11ff810485948aab/src/scroll-hooks/hooks.ts#L11
ํ์ฌ๋ก์๋ ์๋ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.
```
'@angular/platform-browser'์์ { BrowserModule } ๊ฐ์ ธ์ค๊ธฐ;
'@angular/core'์์ { NgModule } ๊ฐ์ ธ์ค๊ธฐ;
'ng-lazyload-image'์์ { LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS, ScrollHooks } ๊ฐ์ ธ์ค๊ธฐ;
'./app.component'์์ { AppComponent } ๊ฐ์ ธ์ค๊ธฐ;
// ์์ฑ์ ์ธ์๊ฐ ์๋ ์ฌ์ฉ์ ์ ์ ํด๋์ค ์์ฑ
๋ด๋ณด๋ด๊ธฐ ํด๋์ค MyScrollHooks ํ์ฅ ScrollHooks {
์์ฑ์() {
๊ฐ๋ ์()
}
}
@NgModule({
์ ์ธ: [AppComponent],
๊ฐ์ ธ์ค๊ธฐ: [BrowserModule, LazyLoadImageModule],
์ ๊ณต์: [{ ์ ๊ณต: LAZYLOAD_IMAGE_HOOKS, useClass: MyScrollHooks }],
๋ถํธ์คํธ๋ฉ: [AppComponent],
})
๋ด๋ณด๋ด๊ธฐ ํด๋์ค AppModule {}
```