Angular: Angular2 AOT 컴파일 - "클래스에 대한 모듈을 결정할 수 없습니다(... 사용되지 않는 많은 구성 요소)"

클래스의 모듈을 결정할 수 없습니다.

구성 요소는 모듈의 일부여야 합니다. 의도된 것입니다.
기능 요청이라고 할 수 있습니다.

@DzmitryShylovich 사용 중인 구성 요소가 모듈의 일부가 되어야 한다는 것은 의미가 있습니다. 그러나 컴파일러에 관한 한 이러한 파일은 중요하지 않습니다. 구성 요소를 포함하는 사용되지 않고 참조되지 않은 .ts 파일입니다.

@swimmadude66 tsconfig에서 사용하지 않는 파일을 제외할 수 있습니다.

@DzmitryShylovich 할 수 있지만 배럴 파일은 그것을 복잡하게 만듭니다. 클래스를 배럴 파일로 다시 내보내는 경우 배럴 파일도 무시해야 하므로 해당 배럴에서 필요한 클래스에 문제가 발생할 수 있습니다.

컴파일러가 절대적으로 필요한 것보다 더 많은 컴파일을 시도해야 하는 것은 이상해 보입니다. Tree-shaking은 제쳐두고 컴파일러가 주어진 파일만 처리하거나 주어진 파일에 명시적으로 링크되기를 원할 것으로 예상합니다.

컴파일러가 절대적으로 필요한 것보다 더 많은 컴파일을 시도해야 하는 것은 이상해 보입니다.

이것이 컴파일러가 작동하는 방식입니다 ...

JIT 컴파일이 작동한다는 사실은 컴파일러가 이러한 파일을 필요로 하지 않는다는 꽤 좋은 증거여야 합니다. 해를 끼치 지 않고 제외 될 수있는 파일에 대한 경고 대신 오류가 발생합니다.

컴파일러가 하루 종일 작동하는 방식에 대해 나에게 이야기할 수 있지만 이것은 다소 기본적인 사용 사례에서 실제 문제입니다. 나는 적어도 오류를 억제하고 내 자신의 위험을 감수할 수 있는 방법을 요구할 뿐입니다.

내 동료가 일괄 제외 사용을 차단할 수 있는 모든 배럴 파일을 제거하려고 시도하고 있습니다. 하지만 다른 사용자가 다음에서 동일한 오류를 겪었던 @ngtools/webpack에 대해 내가 원래 연 문제를 살펴보시기 바랍니다. 테스트에서만 참조되는 구성 요소입니다. https://github.com/angular/angular-cli/issues/3636

컴파일러는 내가 컴파일하도록 요청하지 않은 파일을 인식하고 있으며 복구 가능한 상황에 대해 복구할 수 없는 오류를 발생시킵니다. 그대로.

같은 디렉토리에 프로젝트에 포함되지 않은 구성 요소가 있는 이유를 이해할 수 없습니다.
나는 이것이 기능 요청일 수 있다고 생각하지만 현재 이것이 컴파일러가 작동하는 방식이며 "JIT에서 작동한다"고 말하는 것은 AOT에서 작동해야 한다고 생각할 충분한 이유가 되지 않습니다.
내 생각에 당신이 해야 할 일은 기본 앱에서 이러한 파일을 모듈로 분리한 다음 일종의 패키지 관리자를 통해 가져오는 것입니다. 이렇게 하면 문제를 해결하고 디렉터리를 정리하고 모든 측면에서 유지 관리가 더 쉬워집니다.

@Toxicable 사용하지 않는 파일은 라이브러리 스타일의 npm 모듈에 있습니다. 일반적으로 이상적인 사용 사례는 다음과 같습니다.

@project/angular(공유 코드 npm 모듈)에는 기본 앱을 만들고 백엔드 플랫폼과 통신하는 데 필요한 모든 구성 요소, 파이프, 지시문 및 서비스가 있습니다. 우리 파트너는 비슷해 보이지만 다른 홈 페이지를 사용하거나 일부 새로운 구성 요소가 추가된 앱을 원합니다. 그러나 대부분의 다른 페이지는 동일할 것이며 당사 플랫폼에 연결하는 데 필요한 모든 서비스도 동일할 수 있습니다.

재사용 가능한 코드를 최대화하기 위한 우리의 접근 방식은 각 파트너가 모듈을 만들고 npm 모듈에서 새로운 부분과 공유 부분의 조합을 가져오도록 하는 것이었습니다. 내 새 HomeModule 에는 다음과 같은 가져오기가 있을 수 있습니다.

import {
    OverviewComponent,
    ProfileComponent
} from './components/home';

import {
    AuthComponent
} from '@project/angular';

그러면 @project/angular에서 OverviewComponent를 사용하지 않기 때문에 Cannot determine the module for class OverviewComponent 라고 AOT에서 폭발합니다.

말 그대로 @project/angular/components/home/overview/component.ts 를 가리키는 파일이 없기 때문에 컴파일러가 사용되지 않는다는 사실을 전혀 신경 쓰지 않을 것입니다. 그러나 파일이 우리 프로젝트의 node_modules 디렉토리 안에 있기 때문에 컴파일러는 그것을 찾고 불평하고 죽습니다.

JIT는 !== AOT가 작동하고 기본 앱은 AOT와 작동하며 개념 증명 파트너의 변경 사항은 믿을 수 없을 정도로 작습니다. JIT에서 작동하는 모든 것이 AOT에서 작동해야 한다는 의미는 아니지만, 그렇게 해야 한다고 믿을 만한 충분한 이유가 있습니다.

이 현재 동작이 의미가 없는 또 다른 예가 있습니다. 바로 테스트입니다.
예를 들어 some-feature.component.ts 및 some-feature.component.spec.ts 가 있는 기능 디렉토리 some-feature $ 가 있습니다.
이 구성 요소는 콘텐츠 프로젝션을 사용하므로 다음과 같이 보기에서 some-feature 구성 요소를 사용하는 내 some-feature.component.spec.ts 파일 내부 에 테스트 구성 요소를 만들어 해당 기능을 테스트하고 싶습니다.

@Component({
  selector: 'test-app',
  template: `<some-feature><p>projected content</p></some-feature>`
})
export class TestAppComponent {}

그런 다음 테스트 모듈에서 이 구성 요소를 사용합니다 .

  ...
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestAppComponent, SomeFeatureComponent]
    })
  })
  ...

angular-cli를 사용하여 ng build --prod --aot 를 실행할 때까지 모든 것이 유효하고 훌륭합니다.
Cannot determine the module for class TestAppComponent .

AOT가 .spec 파일에 대해 걱정할 필요는 없다고 생각합니다.

일반적인 규칙은 다음과 같습니다. ngc는 tsc가 컴파일하는 모든 것을 컴파일합니다. 그리고 찾은 모든 구성 요소를 컴파일하려고 시도합니다. 그러나 Angular는 관련 모듈 없이 구성 요소를 컴파일할 수 없습니다.

하지만 이 오류를 경고로 변경할 수 있습니다.

또한 테스트용으로만 사용되는 테스트 래퍼 구성 요소가 있으며 여기에 설명된 대로 AOT가 폭발하게 됩니다. AOT가 TestComponent* 등과 같은 와일드카드 표현식을 충족하는 모든 구성 요소를 무시할 수 있다면 좋을 것입니다.

알겠습니다. 여기에 더 많은 정보가 있습니다. 우리의 경우에 대한 해결 방법을 찾은 것 같습니다(testWrapper 사례를 수정하지 않음). 우리의 경우 진짜 문제는 배럴 파일이었던 것 같습니다. 배럴 파일에서 ANYTHING을 가져올 때 배럴에서 다시 방출되는 모든 것의 사슬을 따릅니다. 최상위 수준 PROJECT/components 에서 구성 요소를 가져왔기 때문에 원하는 구성 요소가 아닌 모든 구성 요소를 분석하고 있었습니다. 이것은 여전히 ​​경고로 더 나을 것이지만 컴파일러가 이러한 구성 요소에 관심을 갖는 이유를 조금 더 잘 이해할 수 있습니다.

동일한 오류가 표시됨:

$ ./node_modules/.bin/ng-xi18n
Error: Cannot determine the module for class DividerPanel in C:/msweb/studiotouch/src/comps/dividerpanel/DividerPanel.ts!
Cannot determine the module for class EntryPanel in C:/msweb/studiotouch/src/comps/entry/EntryPanel.ts!
Cannot determine the module for class ForgotPass in C:/msweb/studiotouch/src/comps/entry/ForgotPass.ts!
Cannot determine the module for class Footer in C:/msweb/studiotouch/src/comps/footer/Footer.ts!
Cannot determine the module for class Infobox in C:/msweb/studiotouch/src/comps/infobox/Infobox.ts!
Cannot determine the module for class InputNumeric in C:/msweb/studiotouch/src/comps/inputnumeric/InputNumeric.ts!
Cannot determine the module for class InputString in C:/msweb/studiotouch/src/comps/inputstring/InputString.ts!
Cannot determine the module for class Loading in C:/msweb/studiotouch/src/comps/loading/Loading.ts!
Cannot determine the module for class MapAddress in C:/msweb/studiotouch/src/comps/mapaddress/MapAddress.ts!
Cannot determine the module for class Minitab in C:/msweb/studiotouch/src/comps/minitabs/MiniTab.ts!
Cannot determine the module for class Minitabs in C:/msweb/studiotouch/src/comps/minitabs/MiniTabs.ts!
Cannot determine the module for class ModalDialog in C:/msweb/studiotouch/src/comps/modaldialog/ModalDialog.ts!
Cannot determine the module for class Ng2Highcharts in C:/msweb/studiotouch/src/comps/ng2-highcharts/src/directives/ng2-highcharts.ts!

Cannot determine the module for class Ng2Highstocks in C:/msweb/studiotouch/src/comps/ng2-highcharts/src/directives/ng2-highstocks.ts!

Cannot determine the module for class Ng2Highmaps in C:/msweb/studiotouch/src/comps/ng2-highcharts/src/directives/ng2-highmaps.ts!
Cannot determine the module for class simplelistEditable in C:/msweb/studiotouch/src/comps/simplelist/simplelistEditable.ts!
Cannot determine the module for class simplelist in C:/msweb/studiotouch/src/comps/simplelist/simplelist.ts!
Cannot determine the module for class FilterPipe in C:/msweb/studiotouch/src/pipes/FilterPipe.ts!
Cannot determine the module for class FilterPipeEqual in C:/msweb/studiotouch/src/pipes/FilterPipeNot.ts!
Cannot determine the module for class OrderBy in C:/msweb/studiotouch/src/pipes/OrderBy.ts!
Cannot determine the module for class ReplacePipe in C:/msweb/studiotouch/src/pipes/ReplacePipe.ts!
Cannot determine the module for class SortBy in C:/msweb/studiotouch/src/pipes/SortBy.ts!
    at analyzeAndValidateNgModules (C:\msweb\studiotouch\node_modules\@angular\compiler\bundles\compiler.umd.js:24878:17)
    at Extractor.extract (C:\msweb\studiotouch\node_modules\@angular\compiler\bundles\compiler.umd.js:27727:20)
    at Extractor.extractBundle (C:\msweb\studiotouch\node_modules\@angular\compiler-cli\src\extractor.js:40:33)
    at Extractor.extract (C:\msweb\studiotouch\node_modules\@angular\compiler-cli\src\extractor.js:30:34)
    at extract (C:\msweb\studiotouch\node_modules\@angular\compiler-cli\src\extract_i18n.js:7:67)
    at Object.main (C:\msweb\studiotouch\node_modules\@angular\tsc-wrapped\src\main.js:47:16)
    at Object.<anonymous> (C:\msweb\studiotouch\node_modules\@angular\compiler-cli\src\extract_i18n.js:14:9)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
Extraction failed

root@DESKTOP-VEUHFOL /cygdrive/c/msweb/studiotouch

Angular 2 주방 싱크대: http://ng2.javascriptninja.io
및 소스@ https://github.com/born2net/Angular-kitchen-sink
문안 인사,

션

i18은 전체 프로젝트 구조를 탐색하지 않고 대신 사용된 선언을 살펴봅니다.

사용되지 않는 지시문을 정리하려고 했더니 토끼 구멍이 더 깊어졌습니다.

$ ./node_modules/.bin/ng-xi18n
Error: Error at C:/msweb/ng-skeleton/node_modules/typescript/lib/lib.d.ts:18770:11: Duplicate identifier 'ActiveXObject'.
Error at C:/msweb/ng-skeleton/node_modules/typescript/lib/lib.d.ts:18773:13: Duplicate identifier 'ActiveXObject'.
Error at C:/msweb/ng-skeleton/e2e/app.po.ts:1:38: Cannot find module 'protractor'.
Error at C:/msweb/ng-skeleton/node_modules/@angular/core/src/facade/lang.d.ts:12:17: Cannot find name 'Map'.
Error at C:/msweb/ng-skeleton/node_modules/@angular/core/src/facade/lang.d.ts:13:17: Cannot find name 'Set'.
Error at C:/msweb/ng-skeleton/node_modules/@angular/core/src/application_init.d.ts:16:18: Cannot find name 'Promise'.
Error at C:/msweb/ng-skeleton/node_modules/rxjs/Observable.d.ts:68:60: Cannot find name 'Promise'.
Error at C:/msweb/ng-skeleton/node_modules/rxjs/Observable.d.ts:68:70: Cannot find name 'Promise'.
Error at C:/msweb/ng-skeleton/node_modules/@angular/core/src/linker/compiler.d.ts:53:49: Cannot find name 'Promise'.
Error at C:/msweb/ng-skeleton/node_modules/@angular/core/src/linker/compiler.d.ts:61:65: Cannot find name 'Promise'.
Error at C:/msweb/ng-skeleton/node_modules/@angular/core/src/application_ref.d.ts:116:67: Cannot find name 'Promise'.
Error at C:/msweb/ng-skeleton/node_modules/@angular/core/src/application_ref.d.ts:132:101: Cannot find name 'Promise'.
Error at C:/msweb/ng-skeleton/node_modules/@angular/core/src/application_ref.d.ts:158:67: Cannot find name 'Promise'.
Error at C:/msweb/ng-skeleton/node_modules/@angular/core/src/application_ref.d.ts:160:101: Cannot find name 'Promise'.

모든 것이 angular-cli 및 angular-compiler에서 잘 작동하므로 내 프로젝트가 마음에 들지 않는 i18일 뿐이라고 덧붙이겠습니다.

참고 자료(멋지고 깔끔한 설정): https://github.com/born2net/ng-skeleton

문안 인사,

션

주석 처리 된 구성 요소에 대한 동일한 오류 .. 개발 단계에서 사용되지 않고 주석 처리 된 구성 요소는 처리하지 않는 유용한 단계입니다.

// two comments aot read:

//  {path: 'about', component: AboutComponent 
// import { AboutComponent } from './about';

@kirjai ngc 는 소스 디렉토리 내의 모든 파일을 컴파일합니다. 수입 여부는 중요하지 않습니다.

@DzmitryShylovich 내가 이해하는 것은 AOT가 이 경우에 이 파일에 대해 전혀 신경 쓰지 않아야 한다고 생각하지 않는다는 것입니다. 제 생각에는 AOT 컴파일 중에 .spec 파일을 건너뛰는 것이 올바른 방법입니다. 하지만 분명히 팀이 그렇게 하는 것을 막는 무언가가 있다는 것을 이해합니다.

대안으로, 테스트가 작성된 엔티티와 동일한 디렉토리에 .spec 파일을 넣는 것을 스타일 가이드에서 제안해서는 안 될까요?

또한 테스트 코드와 AOT의 조합으로 인해 이 오류 메시지(및 일부 다른 메시지)가 나타납니다.

나는 이 글 을 추천할 수 있다. 특정 오류 메시지가 유발되는 방법과 해당 오류를 수정/해결하는 방법에 대해 설명합니다.

사람들이 공식 테스트 가이드 를 따르고 AOT로 앱을 빌드하면 이 정확한 문제에 걸려 넘어질 것이라는 점을 고려하면 가이드를 업데이트하는 것이 좋습니다.

(누군가 RouterLinkStubDirective 에 대한 답변을 찾는 경우)
_"더미" 모듈을 추가하여 수정할 수 있습니다._

/**
 * Needed so that `aot` build is working. But it isn't used throughout our tests and/or app.
 */
@NgModule({
    imports: [
        AppModule
    ],
    declarations: [
        RouterLinkStubDirective,
        RouterOutletStubComponent
    ]
})
export class FakeRouterModule {
}

그건 그렇고, 그것은 또한 추상 클래스에 대한 모듈을 결정하려고 시도합니다:
export abstract class AsyncTransform extends AsyncPipe implements PipeTransform { ... }

"오류: AsyncTransform 클래스에 대한 모듈을 결정할 수 없습니다"

모듈에 추가해도 작동하지 않습니다 😄.
"비추상 생성자 유형에 추상 생성자 유형을 할당할 수 없습니다."

이것은 일부 클래스에서도 발생합니다.

오류: AppGlobalModalComponent 클래스의 모듈을 결정할 수 없습니다.

export class CustomGlobalModalComponent extends AppGlobalModalComponent {}

@gestj @Phmager 가 지적했듯이 더미 모듈이 모든 경우에 대한 수정 사항은 아닙니다. 또한 원하지 않거나 필요하지 않은 코드를 컴파일하게 되므로 꽤 버벅거리는 수정입니다.

우리의 경우 문제를 다른 방식으로 패치했습니다. 공유 구성 요소를 npm lib로 이동하고 tsConfig에서 node_modules를 무시했습니다. 위에서 언급했지만 여전히 작동하지 않지만 배럴 파일을 사용했기 때문입니다. node_modules 내부에서 필요한 각 클래스를 직접 가리키면 다른 클래스는 무시됩니다. 그러나 배럴을 가리키자 마자 동일한 배럴에 있는 사용하지 않는 파일에 대해 오류가 발생합니다.

이것은 우리의 모든 멋진 배럴 파일을 죽이기 때문에 이상적이지는 않지만 적어도 예측 가능합니다.

여전히 이 오류가 경고로 강등되기를 바라고 있습니다.

지금까지 Angular 팀에서 훌륭한 작업을 수행했습니다.
우리는 프로젝트에서 Angular를 많이 사용하고 있으며 1년 동안 이러한 모든 Angular2+ 항목에 대해 머리를 쓰려고 노력한 후 발견한 사항은 다음과 같습니다.
1- Angular는 방대하고 느립니다. 빠르게 만들고 싶습니까? AOT 및 LazyLoading을 사용하고 물건을 gzip으로 압축하십시오.
2- 구성 요소를 lazyLoad 하시겠습니까? 아니요, 경로를 지연 로드할 수 있으므로 앱이 방대하지만 페이지가 하나뿐인 경우 8mg 번들 크기를 즐기십시오.
3- AOT를 사용하시겠습니까 ?? AOT는 버그가 있고 준수하기 어렵고 많은 javascript/es6 기능을 사용하지 않으며 아마도 많은 코드를 다시 작성할 것입니다.
4- AOT를 잘 사용하고 있습니까? 자, 이제 최종 번들을 살펴보십시오. 이제 @angular/compiler에 AOTed가 아닌 구성 요소를 더한 것보다 훨씬 큽니다.

5-Angular2+ 혜택의 일부로 이제 gzip을 사용할 수 있습니다. 이전에 사용 방법을 몰랐던 경우를 대비하여 Angular가 방대하므로 더 잘 배울 수 있습니다. Angular2 코드를 최적화하기 위한 옵션으로 gziping을 판매하고 있습니다. :)

@xe4me 프레임워크에 대한 일반적인 비난보다는 당면한 문제와 관련된 이 스레드에서 계속 논의하십시오.

https://github.com/AngularClass/angular2-webpack-starter 의 build:dev 는 함수 정의와 일치하도록 문자열을 문자열 배열로 자동 변환하고 build:aot 는 오류를 표시합니다. 개발하는 동안 빈번한 AOT 빌드가 필요한 것으로 보입니다.

나는 같은 문제가 있고 해결책을 찾았습니다. 아마도 당신도 작동 할 것입니다.

내 시나리오는 다음과 같습니다.

두 개의 파이프가 포함된 MapPipes.ts가 있습니다.

파이프 중 하나는 내 모듈에서 사용되었고 다른 하나는 사용되지 않았습니다. 따라서 내 @NgModule 데코레이터의 "선언:" 부분에 두 번째 항목을 등록하지 않았습니다. 문제는 이 초에 발생했습니다.

나는 또한 이것을 등록했고(사용되지는 않았지만) 이제 작동합니다.

내 제안은 실제로 사용되는 각도 엔티티에 대해서만 모듈을 찾으려고 시도하는 방식으로 각도 컴파일러를 변경하는 것입니다.

extends NgClass 추상 클래스에서 이 오류가 발생했습니다. 상속을 제거하면 이 문제가 해결되는 것처럼 보이지만 분명히 다른 문제가 발생합니다.

@DzmitryShylovich @kirjai 이것은 spec 파일을 내보낼 때 TestComponents 에만 있는 문제입니다. 그리고 일반적으로 동일한 파일 내에서만 사용해야 하므로 내보낼 필요가 없습니다. 나를 위해 문제가 해결되었습니다.

솔직히 말해서, 이것은 우스꽝스럽습니다. 나는 많은 시간을 보내고 있지만 여전히 AOT와 함께 작업하는 JIT에서 작동하는 것을 얻을 수 없다는 사실 외에 이것에 대해 할 말이 없습니다. 지금까지 약 6개의 문제).

@cwmrowe 괜찮습니다. 하지만 여러 사양 파일에서 재사용되는 파일이 있다면 어떻게 될까요? 이것은 솔직히 깨진 것 같습니다.

제 경우에는 동일한 핵심 Angular 2 앱에서 2개의 다른 프로젝트를 진행하고 있었습니다. 우리 클라이언트의 이름을 딴 2개의 폴더가 있습니다. some-domain.com 및 some-other-domain.com 입니다. 앱은 2개의 프로젝트에 대해 완전히 동일하며 약간의 스타일과 일부 사소한 사용자 정의 구성 요소만 다릅니다. 오늘은 클라이언트 A용으로 앱을 컴파일해야 하고 나중에 클라이언트 B용으로 컴파일하고 싶습니다. 코드에서 코드 한 줄을 변경하는 것만큼 쉽습니다.

import {CustomModules} from './some-domain.com';
// import {CustomModules} from './some-other-domain.com';

나도 컴파일하고 싶은 도메인의 주석을 제거하면 작동합니다.

우리는 상속 및 추상 클래스에 대해 동일한 문제를 가지고 있으며 어떤 해결책도 찾지 못했습니다. 추상 구성 요소를 확장하는 일부 구성 요소가 있습니다. JIT에서는 모든 것이 훌륭하게 작동하지만 AOT에서는 추상 구성 요소에 대한 모듈을 찾을 수 없으며 모듈에서 추상 구성 요소를 선언할 수 없습니다.

현재 우리는 oop 디자인 패턴을 피하고 중복 코드를 사용하는 것 외에 다른 해결책이 없습니다.

@jabaa 추상 클래스에서 @Component 주석 제거

@DzmitryShylovich @Component 를 제거하면 생성자가 상속되지 않습니다. 추상 구성 요소 대신 모든 구성 요소에 모든 주입 가능 요소를 주입해야 합니다. 중복 코드입니다. 추상 클래스의 생성자와 서비스를 변경할 때 모든 자식 구성 요소를 능숙하게 처리해야 합니다.

현재 우리는 더미 메서드를 사용하여 모든 추상 메서드를 구현하고 모든 추상 구성 요소에 대한 더미 모듈을 생성하여 이 문제를 해결합니다. 그러나 누군가 더미 메서드를 재정의하는 것을 잊을 수 있습니다. 그것은 모두 해결 방법입니다.

@jabaa 어떤 버전을 사용하십니까? 생성자는 @Component 에 관계없이 상속되어야 합니다.

@bigjetplane 어디에 문제가 있는지 잘 모르겠지만 @Component 를 제거하면 구성 요소에 대한 종속성을 찾을 수 없다는 오류가 발생합니다. 내가 아는 한 DI는 Angular 데코레이터가 있는 클래스에서만 작동합니다. 따라서 데코레이터를 제거하면 종속성이 주입되지 않습니다. 우리는 Angular 4를 사용합니다.

@jabaa jit 또는 aot 또는 둘 다로 고장 났습니까?

@bigjetplane 여기에 문제가 있는 플런커가 있습니다. 데코레이터가 있는 추상 클래스가 있으며 모든 것이 jit에서 작동합니다. 추상 클래스에서 데코레이터를 제거하면 모든 종속성을 로드할 수 없기 때문에 앱을 렌더링할 수 없습니다. Can't resolve all parameters for App: (?).

그것이 우리의 사용 사례입니다. 생성자와 주입이 있는 추상 클래스가 있습니다. 우리는 자식 구성 요소의 일부 추상 메서드를 재정의하려고 합니다.

주어진 예제는 ot에서 작동하지 않습니다. att와 jit의 차이는 우리에게 큰 문제입니다. 우리는 jit와 함께 개발하고 있습니다. 프로덕션 빌드는 ot와 함께 합니다. 그래서 우리는 오류와 경고가 없는 jit으로 한 주를 개발하고 있으며 그 주 이후에는 프로덕션 빌드를 원하고 아무데서나 많은 오류가 발생합니다. 나는 ot 오류를 활성화할 수 있는 jit용 스위치를 선호합니다. jit 빌드는 10-20초가 필요합니다. aot 빌드에는 25분이 필요합니다.

@tbosch 이것을 경고로 변경하는 것에 대해 말씀해 주시겠습니까? 지난번 방문 이후로 꽤 많은 사람들이 자신의 일화를 들려준 것 같습니다. 혹시 저희에게 최신 정보를 제공해 주실 수 있는지 궁금합니다.

감사 해요!

나도 같은 문제가 있습니다.

제 경우에는 2개의 다른 프로젝트에서 작업했지만 package.json에 종속성으로 추가된 내부 각도 라이브러리 프로젝트를 통해 공통 구성 요소를 포함했습니다.

라이브러리 프로젝트이므로 구성 요소 저장소에서 사용하지 않는 구성 요소는 AOT 제품 빌드를 컴파일할 때 아래 오류를 발생시킵니다.

ERROR in Cannot determine the module for class FullPageErrorComponent in C:/users/amra6003/projects/git/refadmintoolui/n ode_modules/refcommonui/src/app/component-library/error/error.component.ts! Cannot determine the module for class SelectCountryComponent in C:/users/amra6003/projects/git/refadmintoolui/node_modul es/refcommonui/src/app/component-library/select-country/select-country.component.ts! Cannot determine the module for class DateRangeSelectorComponent in C:/users/amra6003/projects/git/refadmintoolui/node_m odules/refcommonui/src/app/component-library/date-range-selector/date-range-selector.component.ts!

각 구성 요소에 대한 모듈을 만들고 사용해야 하는 것 같습니다.

이 문제를 해결하면 많은 도움이 될 것입니다.

저도 이 문제가 해결되기를 바랍니다. 분명히 테스트를 위해 스텁 구성 요소를 사용하는 것은 Angular 개발자가 의도한 것이므로 빌드에서 깨끗한 방법으로 제외하는 것도 가능해야 합니다. 지금은 gestj(스텁 구성 요소가 선언된 가짜 모듈 정의)에서 제안한 해결 방법을 사용하고 있습니다.

따라서 테스트를 위해 스텁 구성 요소를 사용할 때 whatever.component.spec.ts spec.ts 접미사로 구성 요소의 이름을 지정하려고 합니다. 이 방법으로 tsc는 이 파일을 무시하므로(tsconfig에서 제외된 경우) ngc에서도 무시됩니다.

편집: 이것은 ngtools/webpack의 버그로 인해 다른 오류로 판명되었습니다. 해당 티켓은 https://github.com/angular/angular-cli/issues/6228 에서 열렸습니다.

우리 회사를 위한 새로운 재미. 최근 시스템을 v2.4.10으로 업그레이드하려는 시도에서 다음과 같은 다양한 오류가 발생했습니다.

ModuleNotFoundError: Module not found: Error: Can't resolve '../../../../../../../../$_gendir/src/components/spinner/component.ngfactory'

현재 응용 프로그램에서 사용하지 않는 공유 라이브러리의 모든 구성 요소에 대해 로깅하는 것 같습니다. 이것은 내가 원래 티켓을 열었던 오류와 섬뜩할 정도로 비슷합니다.

우리가 이것에 대해 무엇을 더 할 수 있는지 잘 모르겠습니다. 우리는 공유 라이브러리에서 직접 필요한 각 구성 요소의 주소를 지정하고(인덱스에서 참조하는 모든 파일을 가져오는 것처럼 보이므로 index.ts 파일을 사용하지 않음) 모든 공유 라이브러리를 node_modules로 이동하려고 했습니다.

컴파일러가 내 node_modules 폴더의 모든 각도 구성 요소에 대해 알아야 하는 이유는 무엇입니까? 지도를 작성하기 위해 읽어야 하는 경우에도 모듈이 있는지 여부는 신경쓰지 않아도 됩니다!

@swimadude66 , 예, 우리는 https://github.com/WealthBar/a2d3 라이브러리를 사용하여 이 문제에 직면했습니다. 템플릿 구성 요소(지시문만)를 제공하지 않더라도 라이브러리는 여전히 AoT 컴파일러로 빌드해야 합니다. 그렇지 않으면 사용 시 AoT 빌드와 함께 작동하지 않습니다.

@chrisnicola 라이브러리를 게시하기 전에 AoT로 미리 컴파일해야 한다는 말씀이신가요? 이는 라이브러리에 자체 모듈이 있음을 의미하기 때문에 실제로는 직관적이지 않습니다. 그대로 라이브러리는 컴파일되지 않은 ts 파일이며 프로젝트의 다른 파일과 마찬가지로 가져옵니다. 그런 다음 모든 것이 @ngtools/webpack 플러그인을 사용하여 webpack에 컴파일됩니다.

이 티켓의 원래 오류도 index.ts 파일에 대한 모든 참조를 제거하여 v2.1.1까지 "수정"되었다는 점은 주목할 가치가 있습니다. 해당 수정 사항은 더 이상 v2.4.10에서 작동하지 않는 것 같습니다.

아, 네, 문제를 잘못 읽었습니다. 여기서 NPM을 통해 미리 컴파일된 공유 라이브러리를 가져오는 것이 아니라 프로젝트에 로컬 TS 라이브러리가 있습니다. 내가 지금 제대로 이해하고 있는 걸까?

나는 그것이 "그냥 작동"해야한다는 데 동의하고 응용 프로그램에 모듈이없는 구성 요소를 찾는 것과 동일한 문제처럼 들립니다. 가능한 솔루션은 AoT 빌드에 필요하지 않은 파일과 폴더를 제외하는 AoT 빌드 특정 tsconfig.json 을 사용하는 것입니다.

이 오류와 관련된 모든 문제를 해결했습니다.
내보낼 때 문제(및 솔루션)가 나타납니다.

테스트용으로만 사용된 구성 요소가 있었습니다. 재사용할 수 있도록 다른 파일에서 내보냈습니다. 이로 인해 i18n 대상을 실행할 때 문제가 발생했습니다.

그것을 해결하기 위해 우리는 방금 모듈을 선언했습니다(반드시 내보내기도 하세요):

@NgModule({ declarations: [MyUnusedComponent] })
export class IgnoreModule {}

오류를 일으킨 다른 구성 요소는 i18n을 해킹한 미사용 구성 요소였습니다.
i18n 도구에서 선택하기 위해 내보내고 있었지만 다른 구성 요소와 동일한 오류가 발생했습니다.

@Component({
    template: `
        <div i18n="some context@<strong i="13">@some</strong> key">some text to be translated</div>
    `
})
export class LocalisationComponent {}

다시 IgnoreModule 기술을 사용하면 쉽게 우회할 수 있습니다.

@NgModule({ declarations: [LocalisationComponent] })
export class IgnoreModule {}

@UtopianStorm 은 솔루션이 아닙니다. "UnusedModule"을 갖는 것은 확장하기 어려울 뿐만 아니라 배포 번들에 포함되어서는 안 되는 소스 파일의 전체 모듈을 생성한다고 위에서 언급했습니다.

@Phmager 추상 구성 요소 문제에 대한 해결 방법을 찾은 적이 있습니까? 머리카락을 뽑고 있습니다.

@swimmadude66 확실히 해결 방법이라는 점에서 솔루션은 아니지만 오류를 극복합니다.
문제가 발생할 때마다 기술을 적용할 수 있으므로 확장이 얼마나 어려울지 모르겠습니다.

배포 번들을 복잡하게 만들지만 그게 문제가 될까요? Angular의 상태에서 나는 그것이 이미 사양 파일로 가득 차 있을 것이라고 가정했습니다.
어쨌든 node_modules 폴더의 내장에 직접 도달하는 것보다 훨씬 더 깔끔한 접근 방식입니다. 동의하지 않습니까?

적어도 내가 처음에 티켓을 열었던 사용 사례에서는 실행 가능한 해결 방법도 아닙니다. 모든 파트너 팀이 계속 진행하면서 사용하지 않는 공유 구성 요소 목록을 유지 관리하는 것은 불가능합니다.

또한 컴파일러가 지나치게 엄격하기 때문에 기본적으로 2개의 전체 앱을 제공하는 것은 타협하고 싶지 않습니다. Angular는 이미 꽤 크며, 자신의 독단적인 컴파일러를 만족시키기 위해 사용하지 않는 구성 요소의 전체 모듈을 배송하는 것을 정당화할 수 없습니다.

@swimmadude66 알겠습니다 . 다른 모듈을 추가하는 것이 그렇게 큰 차이를 만든다고 생각한다면 직접 다시 한 번 살펴보는 것이 좋습니다. 전체 프로젝트에서 공유할 사용하지 않는 모듈을 하나만 만드는 것이 아니라 해제해야 했던 모든 단일 구성 요소에 대해 하나의 모듈을 만드는 것을 옹호했기 때문입니다. 지나치게 엄격한 컴파일러에서 - 잠재적으로 dusins.

공유 코드베이스가 상당히 크기 때문에 사용하지 않은 모듈이 앱에서 가장 큰 모듈이 될 것이라는 점은 주목할 가치가 있습니다. 우리의 상황이 100% 일반적인 것은 아니지만 여전히 지지받을 이유가 있다고 생각합니다.

솔직히 이 티켓이 아무데도 가지 않는 것을 지켜본 5개월 후, 우리는 공유 코드 저장소를 종료하는 것을 포함하여 다른 옵션을 찾고 있습니다.

@swimmadude66 님 과 똑같은 문제에 직면하고 있습니다. 이것이 억제할 수 있는 경고가 아니라는 사실은 우스꽝스럽습니다.

친애하는 Angular 팀, 이에 대해 할 수 있는 일이 있습니까?

@DzmitryShylovich 사용하지 않는 mock.ts 파일을 어떻게 제외합니까? tsconfig.app.json , tsconfig.json 및 tsconfig.ng-cli.json 에 넣어 보았지만 아무 것도 작동하지 않는 것 같습니다.

똑같은 사용 사례로 동일한 문제에 직면 - 우리는 롤업을 사용하므로 사용하지 않는 구성 요소는 궁극적인 번들에 포함되지 않습니다.

이것을 억제해주세요! 그것은 큰 골칫거리이며 작업을 중단하고 있습니다.

나도 방금 이것에 부딪쳤는데, 너무 답답하다.

@mlakmal 및 다음과 같은 코드에서 오류가 발생하는 기타 사용자

export class CustomGlobalModalComponent extends AppGlobalModalComponent {}

$ AppGlobalModalComponent @Component 주석을 제거하거나 $ NgModule AppGlobalModalComponent (사용 가능한 경우)를 선언합니다.

내 테스트에서 사용하기 위해 모의 지시문을 만들었습니다. 그리고 AOT 컴파일로 이 문제를 얻으십시오. 이 모의 지시문을 일반 모듈로 가져오고 싶지 않습니다. 이 문제를 해결하세요.

이 문제에 대한 "freq1: low" 태그가 AoT가 작동하는 데 너무 고통스러워 사람들이 신경 쓰지 않는다는 사실 때문인지 궁금합니다. 이렇게 간단하지만 고통스러운 문제가 핵심 Angular 기여자로부터 기본적으로 전혀 피드백을 받지 못했다는 사실이 조금 믿기지 않습니다.

어쨌든 구체적으로 언급되지 않은 파일을 제외하는 방법이 있습니다. 이름 지정 패턴(예: .spec.ts , .abstract.ts , .stfu-aot.ts )이 있는 경우 AoT에 대해 별도의 tsconfig.json 파일을 만들고 대신 사용할 수 있습니다. ngc -p tsconfig-aot.json . 이 파일에서 "exclude": ["./app/**/*.stfu-aot.ts"] 를 사용하여 파일을 제외할 수 있습니다. 성가신 일이지만 작동해야 합니다.

편집: 위의 내용은 구성 요소에서 상속되는 abstract 클래스에서 작동하지 않는 것 같습니다. 야 :(

방금 이것에 부딪쳤습니다. 너무 실망 스럽습니다. aot를 빌드하면 다른 앱에서 공통 구성 요소를 공유 할 수 없습니다.

이 문제에 대한 일반적인 경우 중 일부는 서비스 클래스에 @Component 를 추가하는 것을 피하십시오.

// just remove this 
@Component({
    providers: []
});
@Injectable()
export class serviceClass {}

서비스에 서비스를 주입하는 시나리오가 있습니다. 언뜻 보기에는 구현하기 쉬운 것처럼 보이지만 @Component를 추가하기만 하면 됩니다. 따라서 복잡한 서비스에 대한 이 솔루션을 표시하도록 Angular 문서를 업데이트해야 합니다. 이 문제를 해결하기 위해 @Component를 제거했습니다. 서비스 생성자에서 다음을 추가했습니다.
constructor(@Inject(ExampleService) private exampleService: ExampleService)

어떤 서비스에도 @Component() 데코레이터를 추가할 필요가 없습니다. @Injectable()

FWIW에는 XYZComponent 앱 구성 요소를 확장하지만 사양에서만 사용되는 MockXYZComponent 가 있습니다(같은 선택기가 있으므로 AppModule 로 가져올 수 없음).

이것은 유효한 사용 사례가 아닙니까?

@alastair-todd 무슨 말인지 잘 모르겠습니다. 구성 요소를 구성 요소로 사용하는 경우 @Component() 데코레이터를 추가합니다. 구성 요소를 기본으로 사용하는 경우 구성 요소에서 상속하기 위해서만 사용하지만 구성 요소로 사용하지 않는 경우 데코레이터를 사용할 필요가 없습니다. 하지만 "후속자"에서 데코레이터를 상속하고 사용하면 됩니다.
단위 테스트에 대해 - 응답할 수 없습니다. 아마도 특별한 TestModule을 만들어야 합니까? 나는 현재 단위 테스트를 하지 않는다.

@tytskyi 데코레이터 상속이 지원되지 않는다는 것을 이해했습니다. 최근에 변경되었나요?

유스 케이스는 아래와 같이 하위 구성 요소를 조롱하는 것입니다. 둘 다 선택기를 선택하려면 @Component 지시문이 필요합니다.

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                AppModule
            ]
        }).overrideModule(AppModule, {
            remove: {
                declarations: [SelectionToolComponent]
            },
            add: {
                declarations: [MockSelectionToolComponent]
            }
        }).compileComponents();

그러나 OP AOT 컴파일 오류가 발생합니다.

제 요점은 AOT 컴파일이 프로젝트의 일부로 지나치게 열성적이거나 사양을 무시하는 유효한 사용 사례입니다.

내 솔루션이 누군가에게 도움이 될 수도 있습니다. 방금 모든 모의 구성 요소를 선언하는 더미 모듈을 만들었습니다. 이 모듈은 아무 것도 가져오지 않습니다. 단지 AoT 컴파일러를 만족스럽게 유지합니다. 결과적으로 모의 구성 요소는 컴파일된 코드의 일부가 아닙니다. 이상적이지는 않지만 문제가 해결되었습니다.

더 나은 솔루션에 대해 듣고 싶습니다.

이 문제가 2016년 12월에 열렸고 여전히 이 문제가 있다는 것이 너무 이상하고 부끄럽습니다. 나는 컴파일을 사용하도록 전체 앱의 구조를 변환했습니다. 지연 로드된 4개의 모듈과 60개 이상의 구성 요소가 있습니다. 컴파일러는 나에게 이상한 종류의 지연 로드 모듈 중 하나의 선언에 이미 포함되어 있다고 확신하는 몇 가지 구성 요소(오류가 시사하는 바에 따라)에 대해서만 불평합니다.

이미 일부 모듈의 일부인 구성 요소에 오류가 발생하기도 합니다.

같은 문제

Angular의 컴파일러는 tsconfig에 전달한 파일 세트를 찾습니다. 따라서 거기에서 파일을 제외하면 이 검사에서 제외해야 합니다.

이건 정말 짜증나네요 :(

@alastair-todd 죄송합니다. 다른 알림에서 질문에 대한 알림을 잃어버렸습니다. 당신이 올바른지 -
데코레이터 상속은 지원되지 않습니다.

@robwormald 의 답변 보기

Angular의 컴파일러는 tsconfig에 전달한 파일 세트를 찾습니다. 따라서 거기에서 파일을 제외하면 이 검사에서 제외해야 합니다.

따라서 selection-tool.component.mock.ts 와 같이 모의 파일 이름에 대한 규칙을 만들 수 있습니다. 그런 다음 다음을 통해 제외

"exclude": [
    //... other excludes
    "**/*.component.mock.ts"
]

실수로 잘못된 버튼을 클릭했습니다. 죄송합니다!

+8개월이 지났지만 여전히 문제입니다. 같은 문제 ERROR in Cannot determine the module for class PasoFooterComponent

Angular 개발자가 이러한 파일을 무시하는 것이 중요하다고 생각합니다.

누군가 이 코드를 찾을 수 있는 위치에 대한 정보를 제공할 수 있다면 기쁠 것입니다.
스스로 해결하기 위해. 이것은 매우 성가신 성가심입니다. 그것에 뛰어
또 어제.

누군가 이것이 버그가 아니라 기능이라고 생각한다면 플래그가 있는 것은 어떻습니까?
이것을 위해?

2017년 8월 9일 수요일 오전 2:40 Leonardo Vidal [email protected]
썼다:

+8개월이 지났지만 여전히 문제입니다. 동일한 문제가 여기에 오류가 있습니다.
PasoFooterComponent 클래스의 모듈 결정

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/angular/angular/issues/13590#issuecomment-321082545 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AEM6r7FOTLcicWJN3Oijw2pwKTLGL6cFks5sWM61gaJpZM4LSAwS
.

@samirotiv 복제품이 있습니까?
@robwormald 가 말했듯이

Angular의 컴파일러는 tsconfig에 전달한 파일 세트를 찾습니다. 따라서 거기에서 파일을 제외하면 이 검사에서 제외해야 합니다.

나는 같은 문제가 있었지만 해결했습니다. 예를 들어 ts가 내 앱을 어떻게 트랜스파일하는지 살펴보았습니다.

"tsc": "rimraf out-tsc/app && tsc -p ./src/tsconfig.app.json",

그리고 "files" tsconfig 옵션을 사용했기 때문에 typescript가 지연 로드된 모듈을 컴파일하지 않는다는 것을 알았습니다.

추상 클래스(데코레이터 없음)에서 이 오류가 발생합니다.

최근에 같은 문제에 직면하기 시작했습니다.

오류를 경고로 변경하려면 +1입니다.

쉽게 고칠 수 있을 것 같습니다. 왜 지연?

이것은 기본 요구 사항입니다. 참조되지 않은 파일은 그대로 두십시오.
이 제한은 더 큰 프로젝트의 경우 문제입니다. 이것을 경고로 변경하십시오.

다른 버전의 Angular를 지원하는 패키지를 게시하는 경우가 있습니다. 사용자는 그 중 하나를 선택해야 합니다.

예를 들어 HttpClient (Angular >= 4.3 사용자) 및 Http (Angular < 4.3 사용자)에 대한 파일을 제공하는 패키지

현재 ngc 는 사용 여부에 관계없이 소스 디렉토리 내의 모든 파일을 컴파일합니다! 또는 빌드가 실패합니다.

내가 한 일은 다음과 같습니다.

내 모든 스텁/모의 구성 요소를 .mock.ts 확장자로 저장하고 다음과 같이 tsconfig.app.json "exclude" 배열을 업데이트했습니다.

...
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "**/*.mock.ts"
  ]
...

AOT는 이제 이러한 파일의 컴파일을 건너뜁니다.

우리는 한 번에 모두 사용되지 않아야 하고 AoT 컴파일 중에 해당 문제로 인해 화난 공통 구성 요소로 npm 라이브러리를 수행하고 있습니다. 젠장... 유일한 솔루션 atm은 호스트 프로젝트에서 일종의 UnusedComponentsModule을 만드는 것입니다. 또한 NO_ERRORS_SCHEMA 가 필요합니다. 그렇지 않으면 사용하지 않는 구성 요소 내부에서 사용할 수 있는 다른 구성 요소에 대해 맹세하고 이를 선언하면 두 모듈에서 동일한 구성 요소를 선언할 수 없는 또 다른 문제가 발생합니다(# 관련 10646).

내 현재 모듈:

import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ReceiverPageComponent} from 'cb-web-platform';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    ReceiverPageComponent
  ],
  schemas: [
    NO_ERRORS_SCHEMA // IMPORTANT: need that for AoT compilation
  ]
})
export class UnusedComponentsModule {
}

이것은 정말로 경고해야합니다. 저도 코드베이스를 공유하려고 하고 있으며 ngmodule의 일부가 아닌 구성 요소에 대한 이 문제를 겪고 있습니다.
여기서 문제는 오류가 아닌 사용하지 않은 변수와 정확히 동일합니다. 기껏해야 경고입니다.

당신의 코드라면 쉽습니다. 일부 NPM 각도 라이브러리(일부 데드 코드)의 문제인 경우 정말 골치 아픈 일입니다. :)

오류 대신 경고가 표시되지 않는 이유를 설명할 수 있는 사람이 있습니까?

제 경우에는 ngModule에 연결된 구성 요소에서 lang을 추출하고 그렇지 않은 구성 요소는 무시하고 싶습니다. 기본 구성 요소와 응용 프로그램별 폴더가 있는 하나의 기본 응용 프로그램 폴더가 있는데 xi18n으로 재정의된 구성 요소를 추출하려고 할 때 기본 응용 프로그램의 구성 요소를 무시하는 경우가 있습니다 Cannot determine the module for class... 오류가 발생합니다. 사용하지 않은 구성 요소를 사용하지 않고 계속할 수 있습니다.

문제가 될 수 있다고 생각할 수 있는 한 가지는 오류가 있는 구성 요소 파일에 정의된 해당 클래스를 재정의된 구성 요소를 만들기 위한 기반으로 사용하므로 컴파일해야 하지만 해당 구성 요소가 필요하지 않다는 것입니다. 오버로드 구성 요소에서 사용할 수 없으므로 주석 원인. 적어도 파생 구성 요소에서 주석을 다시 만들어야 작동하기 때문에 그렇게 할 수 없다고 생각합니다.

@Xesenix 는 최소한 옵션이어야 합니다. 결정 모듈 = false / true와 같습니다. 이제 바나나입니다.

나는 2017년 11월 1일에 돌아올 것이다.

나는 나의 반환 후에 당신의 메시지에 대답할 것입니다.
긴급한 경우 이메일 사본을 보내주십시오.
기술적인 문제는 [email protected] 로, 그렇지 않으면
[email protected]. 그러면 다른 직원이 귀하의 이메일을 볼 것입니다.
동의하기.

참고: 이것은 "Re:
[각도/각도] Angular2 AOT 컴파일 - "모듈을 결정할 수 없습니다.
for class (... 사용되지 않는 많은 구성 요소)" (#13590)" 전송됨
2017년 10월 23일 08:13:17

이것은 귀하가 수신하는 유일한 알림입니다.
그 사람은 부재중이다.

거의 1년이 지난 지금도 이 문제가 해결되지 않는 이유는 무엇입니까? AOT가 작동하도록 머리를 잡아당겼지만 이 문제로 인해 벽돌 벽에 부딪혔습니다.

솔루션에 대해 @rahul-sivalenka-wtc에게 감사드립니다!
설명하신 대로 tsconfig.app.json "**/*.mock.ts" 를 제외하여 문제를 성공적으로 해결할 수 있었습니다. ❤️

도움이 될 수 있어서 기쁩니다 😊

나는 또한 문제를 만났다. 하지만 나에게는 dodule을 가져 오는 경로를 잘못 입력 한 것 같습니다.

어떤 솔루션? (구성요소 angular 5에 대한 모듈을 결정할 수 없음)

https://stackoverflow.com/questions/47119135/cannot-determine-the-module-for-component-angular-5

severity3: broken 여야 합니다. 여러 빌드 대상과 다형성 종속성이 있는 경우(많은 사용 사례가 위에 나와 있음) 이 문제로 인해 복잡한 빌드 설정 없이 빌드가 작동하지 않습니다.

아직 이 문제에 대한 좋은 해결책이 있습니까? IgnoreModule은 해결 방법일 뿐이지 이 문제에 대한 좋은 해결책은 아닙니다. 오류를 경고로 변경하는 것이 좋습니다!

우리의 해결책은 transform 함수를 @ngtools/webpack 에 추가하는 것이었습니다. @ngtools/webpack는 전처리 를 통해 파일을 전달하고 ifdef 는 다양한 컴파일 시간 설정을 기반으로 구성 요소를 처리합니다. 매우, 매우 못생겼지만 기능적입니다.

먼저 app.module.ts에서 모든 각도 종속성을 가져온 다음 구성 요소를 가져오십시오.

` ---------------- 첫 번째 종속성 모듈 가져오기 -----------------------
'@angular/platform-browser'에서 { BrowserModule } 가져오기;
"@angular/common"에서 { CommonModule } 가져오기;
'@angular/core'에서 { NgModule } 가져오기;
import { RouterModule, Routes } from '@angular/router';
'@angular/http'에서 { HttpModule } 가져오기;
'@angular/forms'에서 { ReactiveFormsModule } 가져오기;
'@angular/platform-browser/animations'에서 { BrowserAnimationsModule } 가져오기;

---------- 그런 다음 서비스 모듈 가져오기 ------------------------

'./Services/apply-form-post.service'에서 { ApplyFormPostService } 가져오기;
'./Services/nav-bar-color.service'에서 { NavBarColorService } 가져오기;

----------------------- 마지막으로 구성 요소 모듈 가져오기 ----------------------- -

'./app.component'에서 { AppComponent } 가져오기;
'./components/header/header.component'에서 { HeaderComponent } 가져오기;
'./components/career/career.component'에서 { CareerComponent } 가져오기;
import { HomeComponent } from './Components/home/home.component';`

어떻게 든 이것은 생산 모드에서 클래스에 대한 모듈을 결정할 수 없다는 AOT 컴파일 오류를 해결했습니다.

@KarthikSamyak 이 문제는 모듈에 있어야 하는 클래스가 있는 사람들에 관한 것이 아닙니다. 이것은 의도적으로 모든 모듈에서 제외된 구성 요소 라이브러리를 사용하는 사람들에 관한 것입니다. 컴파일러에서 무시해야 하는 사용되지 않는 코드입니다. 대신 컴파일러는 오류를 발견할 때 복구할 수 없는 오류를 발생시킵니다.

이 오류를 경고로 만드는 것은 정말 간단한 변경이어야 하지만 어떤 이유로 인해 1년이 넘게 걸렸고 최근 로드맵에서 pri_col1에서 pri_col2로 이동되었습니다.

이 문제에 대한 응답이 전혀 없는 Angular 팀에 점점 더 좌절감을 느끼고 있습니다. 우리 회사는 결국 구성 요소 라이브러리 사용을 완전히 포기하고 대신 수동으로 파일을 복사하기로 결정했습니다. 거의 동일하지만 공유되지 않는 구성 요소에 문제가 있으므로 이는 이상적이지 않습니다.

Angular 팀, 이 문제를 더 이상 읽으신다면 "ignoreUnusedComponents"에 대한 컴파일러 설정을 추가하고 이 프레임워크를 계속 사용하도록 하십시오.

좋아, 나는 https://github.com/angular/angular/blob/master/packages/compiler/src/aot/compiler.ts#L605 @tbosch 이봐, 여기를 도와주고 그것을 만드는 방법을 말해 줄 수 있습니까? 제대로 경고가 될 것인가? 해당 AoT 컴파일러에서 발생한 경고는 볼 수 없으며 오류만 표시됩니다. 위에서 제안한 대로 컴파일러 옵션을 추가할 수 있습니다.

그 문제는 복잡한 프로젝트의 골칫거리입니다. 내 특별한 경우는 https://github.com/angular/angular/issues/13590#issuecomment -331820496입니다.

우리의 사용 사례는 동일합니다. 우리는 앱을 정말 쉽게 만들고 필요할 때 이상한 것을 교체/확장할 수 있는 모듈/컴포넌트 라이브러리를 원합니다.

다른 방법으로도 문제가 있습니다. 모듈 내부의 1x 구성 요소를 교체하려면 새 모듈을 만들고 여전히 원하는 구성 요소를 가져옵니다.

import { HeaderComponent, SidebarComponent } from '@mylibs/layout';
import { FooterComponent } from './footer.component';

@NgModule({ declarations: [ HeaderComponent, SidebarComponent, FooterComponent ] })
export class MyLayoutModule { }

@NgModule({ imports: [ MyLayoutModule ] })
export class AppModule { }

오류: `HeaderComponent가 lib/module.ts 및 app/module.ts 의 2개 모듈에서 선언되었습니다.
대신 경고가 되는 것은 적어도 우리가 앞으로 나아갈 수 있게 해 줄 것입니다 :(

방금 깨달았습니다 - 이 문제의 생일을 축하합니다 :)

1년 후, 우리는 여전히 이것을 경고로 변경할 수 없습니다. 말도 안되는.

말 그대로이 문제도 발생했습니다. 컴파일러는 테스트에서만 사용되는 모의 객체를 가져오려고 시도하지만 메인 모듈의 일부가 아니기 때문에 실패합니다. 파일이 필요하지 않다는 것을 알고 있다면 기껏해야 경고일 것입니다.

이 문제를 해결하세요. 경고로 만드십시오!
Angular 5ot 빌드에 대한 나의 일반적인 경험은 훌륭하지 않습니다.

몇 가지 토론 후 https://gitter.im/angular/angular?at=5a551f565a9ebe4f756843b2 우리는 모듈이 컴파일 컨텍스트일 뿐이고 물건을 모으는 방법이 아닌 것처럼 보이기 때문에 모듈당 하나의 Component를 생성해야 한다는 결론에 도달했습니다. .

이것은 역사책의 크기를 취하고 있습니다.

@Xesenix ... 컨텍스트와 조직은 전체의 두 부분입니다.

누군가가 여전히 이것에 갇힌 경우를 대비하여 이 스크립트를 해결 방법으로 설치 후 스크립트로 실행할 수 있습니다.

const replace = require('replace-in-file');
const filesToFix = [
    {
        files: 'node_modules/@angular/compiler/esm2015/compiler.js',
        from: ['throw syntaxError(messages.join(\'\\n\'));'],
                // Actually this does nothing , just leave it blank should do
        to: [`console.warn(\'Angular compiler warning\');\n\t\tconsole.warn(messages.join(\'\\n\'));`]
    }
]

filesToFix.forEach((i) => {
    try {

        const changes = replace.sync(i);
        if (changes.length > 0) {
            console.log('Modified files:', changes.join(', '));
        }
    }
    catch (error) {
        console.error('Error occurred:', error);
    }
});

각도 컴파일러는 tsconfig의 출력을 사용하므로 _tsconfig.app.json_ 을 변경하여 포함하지 않으려는 파일을 제외합니다.
예
"exclude": [ "test.ts", "**/*.spec.ts", "**/*.mock.component.ts", ]

@andela-andrewmakenzi 이것은 이 거대한 채팅에서 더 나아가 이전에 제안되었습니다(전체 내용을 읽지 않는 것은 절대 부끄러운 일이 아닙니다). 그러나 배럴 파일(index.ts)을 사용하는 라이브러리의 한 구성 요소에 의존하는 경우 문제가 발생합니다. 배럴 파일에서 구성 요소를 가져오면 컴파일러는 해당 배럴 파일에서 참조하는 모든 구성 요소를 로드하려고 시도하고 해당 구성 요소가 모듈에 없다고 불평합니다. 이것은 기본적으로 컴포넌트 아키텍처의 요점인 재사용 가능한 컴포넌트 라이브러리를 패키징하기 어렵게 만듭니다.

귀하의 솔루션은 모의 구성 요소가 있고 테스트를 실행하지 않을 때 이 오류가 발생하는 사람들에게 효과적입니다. 그러나 귀하의 조직(저와 같은)이 공통 구성 요소 라이브러리를 만들고 주어진 프로젝트에 필요한 것만 가져오려고 하면 슬프게도 TSC의 제외가 도움이 되지 않습니다.

@andela-andrewmakenzi: 귀하의 제안이 지금은 도움이 되는 것 같습니다. 이전에 문제는 단위 테스트를 위한 구성 요소가 ( .spec)이고 AOT 빌드에 포함되는 것을 원하지 않는다는 것입니다. 내 프로젝션에 그것을 갖고 싶지도 않습니다.) 아마도 이것은 Angular의 이후 버전에서 어떻게 든 해결되었을 것입니다 :)

하지만 제 경우에는 NgModule에서도 참조되지 않은 새 구성 요소가 많이 있으므로 현재로서는 해당 구성 요소에 대한 이름 규칙이 있어야 하고 tsconfig.json에서 제외해야 합니다. 이는 당분간 그다지 유쾌하지 않습니다.

이건 정말 웃기다. 몇 개의 파이프/지시문을 내보내는 공유 NPM 모듈이 있으며 모두 가져오지 않으면 이 멍청한 오류로 실패합니다. 실제로 경고로 변경되어야 하며 컴파일을 중단해서는 안 됩니다.

제 생각에는 모든 구성 요소는 자체 NgModule 에 있어야 합니다. 모든 구성 요소에 대해 다른 NgModule 를 만드는 것은 그리 무섭지 않습니다. ( @angular/material 가 했던 것처럼)

나는 그것이 정말로 가상의 문제라고 생각한다. 우리는 중간에 무언가를 가질 이유도 없습니다. NgModule 도 아니고 패키지도 아니고 앱 트리 외부도 아닌 ... 죽은 코드로 보이는 것.

따라서 새로운 @angular/cli(1.7.0+)를 사용하면 IgnoreModule도 이 문제를 해결하지 못합니다.

제 생각에는 모든 구성 요소는 자체 NgModule에 있어야 합니다.

단위 테스트를 작성하려고 시도합니까? 이 버그로 인해 테스트 도우미를 만드는 데 문제가 있습니다.

@sarunint 내가 처음에 이 티켓을 열었던 것과 같은 엔터프라이즈 크기의 응용 프로그램에서는 종속 지시문 및 구성 요소를 처리하기 위해 매우 복잡한 가져오기가 포함된 수백 개의 모듈이 될 것입니다. 이것은 매우 간단한 수정 사항이 있습니다. 컴파일러가 구성 요소에 대한 모듈을 찾을 수 없으면 경고를 표시하고 트리 쉐이킹에서 제거하십시오.

이것이 매우 성가신 진짜 이유는 배럴 파일이 혜택보다 더 위험하다는 사실입니다. 가져오기를 중앙 집중화하는 것이 편리하지만 라이브러리를 사용하는 모든 앱에 내보낸 모든 단일 구성 요소를 포함하는 경우에는 그렇지 않습니다.

@dborisenkowork 나는 당신이 그것을 보지 않았는지(또는 그것이 당신의 사용 사례에 대해 작동하지 않는지) 확실하지 않지만 @rahul-sivalenka-wtc가 제공한 솔루션은 완벽하게 작동합니다.

최근에 각도 4에서 각도 5로 이동하고 모듈에서 실제로 선언되는 구성 요소 중 일부에서 이 오류가 발생하는 것을 본 사람이 있습니까?

@novologic-clay 무슨 오류? 스레드가 깁니다. 원래 오류를 말씀하시는 건가요?
Angular2 AOT 컴파일 - "클래스에 대한 모듈을 결정할 수 없습니다(... 사용되지 않는 많은 구성 요소)" ?

@andela-andrewmakenzi 예 및 아니오. 컴파일을 시도할 때 출력되는 것과 동일한 오류이지만, 불평하는 구성 요소가 모듈에 포함되어 있는 것이 가장 확실합니다. 4.3.6에서 5.2.4로 마이그레이션 중이며 angular 버전을 업데이트했기 때문에 이 특정 구성 요소에 대해 이 오류가 발생하지 않았고 연기 테스트로 마이그레이션을 시작하기 직전에 4.3.6에서 AOT 컴파일을 수행했습니다. .

@novologic-clay 콘솔 오류를 공유할 수 있습니까?

... 최종 목표는 tsconfig.json 옵션 "noUnusedLocals": true 을 사용하여 사용하지 않는 모든 것을 제거하는 것입니다.

@andela-andrewmakenzi

ERROR in : Cannot determine the module for class InlineAddComponent in /Users/claygarland/CatalsytConnect/frontend/Talon/src/app/core/component/input/inline-add/inline-add.component.ts! Add InlineAddComponent to the NgModule to fix it.

이것은 엔터프라이즈 애플리케이션이고 수십 개의 모듈 및 가져오기 레이어가 있지만 실제로 구성 요소를 선언하는 코드는 다음과 같습니다.

**COMPONENT:**
import {Component, Inject, Input} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {ActivatedRoute} from '@angular/router';
import {BaseForm} from '../../form/form/BaseForm';
import {FormDataService, FormDataServiceProvider} from '../../form/form/FormDataService';
import {BaseApi} from '../../../api/BaseApi';

@Component({
    selector: 'inline-add',
    templateUrl: './inline-add.component.html',
    styleUrls: ['./inline-add.component.scss'],
    providers: [
        FormDataServiceProvider
    ]
})
export class InlineAddComponent extends BaseForm {

    @Input() title = 'Entity';
    @Input() formName;

    protected service: BaseApi;

    constructor(
        protected route: ActivatedRoute,
        protected formDataService: FormDataService,
        public dialogRef: MatDialogRef<InlineAddComponent>,
        @Inject(MAT_DIALOG_DATA) public data: {
            form: string,
            title: string,
            service: BaseApi,
        },
    ) {
        super();
        this.title = data.title;
        this.formName = data.form;
        this.service = data.service;
    }

    submit() {
        super.onSubmit(res => {
            this.dialogRef.close(res.data[0]);
        });

    }

    onCancel() {
        this.dialogRef.close(false);
    }

}

**MODULE:**
import { NgModule } from '@angular/core';
import {SharedModule} from '../../../shared/shared.module';
import {InlineAddComponent} from './inline-add/inline-add.component';


@NgModule({
    imports: [
        SharedModule,
    ],
    declarations: [
        InlineAddComponent,
    ],
    exports: [
        InlineAddComponent,
    ],
    entryComponents: [
        InlineAddComponent,
    ]
})
export class FormInputsModule { }

또한 ng serve에서 이 응용 프로그램을 실행할 때 구성 요소가 제대로 작동합니다.

많은 실제 구성 요소의 테스트에 사용되는 가짜 구성 요소는 모듈에 있어서는 안 됩니다. 테스트된 구성 요소의 TestBed에 포함됩니다.
이 오류는 어리석은 것입니다. 1년부터 그대로 해결해 주세요.

"내보내기"를 제거하여 ts가 빌드로 가져오지 않도록 합니다.

@tony-kaplan tsconfig에 noUnusedLocals가 있거나 테스트 케이스 또는 이와 유사한 코드를 사용하려는 경우에는 그렇게 할 수 없습니다.

맙소사.... 핵심 팀의 누구도 이에 대한 적절한 솔루션을 찾지 못했다는 건가요?
지금은 exclude 옵션을 사용하고 있지만 여전히 임시 솔루션입니다. 모든 상황에 효과가 있는 것을 생각할 수는 없지만... 정말 필요합니다...

@gabrielalan 쉬운 해결책은 이 오류를 경고로 바꾸는 것입니다. 더 나은 솔루션은 이를 경고 또는 오류로 처리할 수 있는 플래그를 추가하는 것입니다. 솔루션이 부족한 것이 아니라 실제로 구현하지 못하는 것입니다.

오 소년! 엔터프라이즈 프레임워크에 너무...

@atom-morgan 어떤 해결 방법에 대해 이야기하고 있습니까?

@netlander 이거

정말, "클래스 DaterangepickerDirective에 대한 모듈을 결정할 수 없습니다" 오류에 대해 아무 것도 할 수 없습니까?

나도 도와줄 사람? 이 메가조드 포스트 이후!

이 지침에 tsconfig.app.json 새 제외 항목을 추가하는 데 동의하지 않습니다! 이 문제 없이 --aot param으로 어떻게 컴파일할 수 있습니까?

내 사용 사례 https://github.com/angular/angular/issues/23475
나는 유효성 검사기 라이브러리를 만들고 있으며 각 유효성 검사기 지시문에 대한 모듈을 만들고 싶지 않습니다. 내가 원하는 것은 단지 검사기 지시문을 npm 패키지에 묶을 수 있어 사용자가 NgModule에 필요한 검사기만 설치하고 가져올 수 있기만 하면 됩니다. 또한 모든 유효성 검사기에 대해 하나의 모듈을 만들고 싶지 않습니다. 모든 유효성 검사기가 최종 번들에 번들로 포함되어 크기를 크게 낭비하기 때문입니다.

문제를 해결하기 위해 PR을 작성하게 되어 기쁩니다.

@anjmao 내가 처음에 이것을 열었던 이유와 엄청나게 비슷합니다. 작은 라이브러리에 대한 해결 방법으로 배럴(index.ts) 파일을 사용하지 않으면 이 오류가 발생하지 않는다는 것을 발견했습니다. 인덱스에서 1개의 컴포넌트/디렉티브를 가져오면 인덱스 파일의 다른 모든 내보내기에 대한 모듈을 찾으려고 시도하는 것 같습니다.

분명히 배럴 파일이 매우 편리하기 때문에 이것이 경고여야 한다고 생각합니다. 그러나 사용 사례가 이 수정 사항을 위해 1년 더 기다릴 수 없다면 그렇게 해결할 수 있습니다.

구성 요소/지시문/파이프의 공유 라이브러리에 사용 중인 해결 방법: 모든 클래스 선언을 참조하는 간단한 더미 모듈을 만듭니다. 실제 앱에서 이 모듈을 사용할 필요는 없으며 디스크에 존재하기만 하면 됩니다. 전:

import { NgModule } from '@angular/core';

@NgModule({
    imports: [],
    declarations: [
        MyComponent,
        MyPipe,
        MyDirective,
        ...
    ],
})
export class DummyModule {
}

이 문제를 아직 해결하지 못한 이유가 있습니까?

"경고로 만들기" 솔루션이 적절하지 않습니까? 핵심 팀의 구성원이 이에 대해 논평할 수 있습니까?

제 경우에는 NG 5, CLI 및 AOT에서 문제가 없습니다. 그러나 NG 6으로 업그레이드한 후 사용하지 않는 구성 요소에 대해 유사한 오류가 발생합니다. 실제로 컴포넌트는 다른 컴포넌트에 주입된 서비스를 통해 사용됩니다. 나는 많은 유사한 구성 요소를 동일한 방식으로 구성하고 사용했습니다. 그러나 최신 NG CLI 6.0 및 6.0.1로 업그레이드하는 데 문제가 하나 있습니다.

그리고 참조 중 하나에서 파일 참조의 대소문자가 잘못된 것으로 나타났습니다. 동일한 디렉토리의 모든 구성 요소를 내보내는 index.ts가 있습니다. 나는 가지고 있었다
export * from './dateTimePicker.component'
동안:
'./datetimePicker.component'에서 * 내보내기;

분명히 NG CLI 6은 Windows에서도 대소문자에 대해 더 제한적인 반면 NG CLI 1.x는 약간 편안합니다.
분명히 그러한 제한은 훌륭하고 정확하므로 기본적으로 대소문자를 구분하는 Linux에서 동일한 코드베이스가 잘 작동할 수 있습니다.

이에 대한 또 다른 사용 사례:

Typescript를 사용하면 tsconfig.json 의 paths 변수를 사용하여 여러 해상도 경로를 설정할 수 있습니다. 전:

{
    ...
    "paths": {
        "~src/*": ["src/*", "src-gen/*"]
    }
}

다음과 같은 것을 가져올 수 있습니다.

import { NgModule } from "@angular/core";
import { ExampleComponent } from "~src/example.component";

@NgModule({
    declarations: [
        ExampleComponent
    ],
})
export class ExampleModule {}

src 폴더 안에 다른 구성 요소를 만들어 개발자가 "재정의"할 수 있는 src-gen 내부에 구성 요소를 생성하는 경우 src-gen 안에 있는 (현재 사용되지 않는) 구성 요소에 동일한 오류가 발생하기 시작합니다.

또 다른 잠재적인 사용 사례:

환경별 구성 요소. 나는 생산을 위해 그것들을 벗겨낸다.

const environmentComponents = production ? [] : [
  DevOnlyComponent,
];

@NgModule({
  declarations: [
    ...environmentComponents,
  ],
})
export class ExampleModule {
}

환경별 구성 요소를 사용하여 다른 모든 작업을 수행할 수 있었고 이것이 저를 멈추게 하는 것입니다. 😪

@tiagodws (원래 구성 요소의 확장 포함)에서 설명한 시나리오와 거의 유사한 빌드 사용자 지정 메커니즘(구성 요소가 다른 Angular CLI 프로젝트로 교환됨)을 구현할 때 이 문제에 직면하고 있습니다.

이 문제에 대한 핵심 팀의 업데이트/의견이 있습니까?

이 문제를 연 지 1년이 넘도록 내 새로운 접근 방식은 배럴 파일 사용을 최소화하는 것입니다. 모든 곳에서 가져오기에서 ~components/button/component 와 같은 TS 경로를 사용하는 경우 사용하지 않는 가져오기는 무시됩니다. 사용되지 않은 구성 요소가 배럴 파일에서 참조되면 throw됩니다.

재사용 가능한 라이브러리에는 여전히 좋지 않습니다. 라이브러리 최상위 레벨에서 가져오는 대신 더 긴 경로로 모든 라이브러리 구성 요소에 액세스해야 하기 때문입니다. 왜, 오 왜 이것은 단지 경고가 될 수 없습니까?

이것은 또한 모듈에 특별히 포함되지 않은 코드가 최종 번들에서 제외되는 트리 쉐이킹에 의해(또는 적어도 관련하여) 도움이 될 수 있는 것처럼 보입니다.

제외 옵션은 모의 파이프에 적용되지 않습니다.

@Pipe({ name: 'translate' })
export class MockTranslatePipe implements PipeTransform {
    transform(value: string): string {
        //Do stuff here, if you want
        return value;
    }
}

내 tsconfig.app.json이 이 파일을 제외했습니다.

"exclude": [
        "test.ts",
        "**/*.mock.ts",
        "**/*.spec.ts"
    ]

그러나 ng-xi18n --i18nFormat=xlf2 --outFile=./assets/i18n/messages.xlf를 실행하면 여전히 다음과 같이 불평합니다.

src/test/translate.service.mock.ts에서 MockTranslatePipe 클래스의 모듈을 결정할 수 없습니다! NgModule에 MockTranslatePipe를 추가하여 수정하십시오.

내 문제는 lol을 복사하여 붙여 넣어 2 개의 다른 구성 요소에 클래스 이름을 가지고 있다는 것입니다! 나중에는 무관심으로 같은 실수를 하면 좋은 연습이 완벽한 남자를 만든다! 히트...
서명: 나카모토 사토시: v

@yuezhizizhang 과 유사하게 tsconfig.app.json exclude 경로에 mock용 glob을 추가한 후에도 여전히 이 문제가 있습니다.

이 문제가 초기 티켓 이후 거의 2년 동안 해결되지 않았다는 사실에 분노하기 직전입니다. 이것은 BREAKING 빌드인 일반적인 사용 사례입니다. 테스트를 작성할 때 개발자는 파이프, 서비스 등에 대한 모의 객체를 이상적으로 생성해야 합니다. 이 작업을 선택하면 빌드가 중단됩니다. 그렇지 않은 경우 사양 파일은 실제 구성 요소/파이프/등을 참조하여 매우 밀접하게 결합된 테스트로 이어집니다.

Angular 팀의 누군가가 이 문제를 해결하는 방법을 제안해 주시겠습니까? 모의에 대한 포괄적인 더미 모듈을 만드는 것이 정말 유일한 옵션입니까? 그것은 우리가 모범 사례로 받아들여야 하는 것이 아니라 좋지 않은 해킹입니다.

문제가 지속됩니다. 또한 빌드(추상 클래스)를 건너뛰고 싶은 파일을 tsconfig.app.json 의 제외 섹션에 추가했는데 여전히 다음과 같은 결과가 나타납니다.

.../map-elements/map-element-base.component.ts에서 MapElementBaseComponent 클래스의 모듈을 결정할 수 없습니다! NgModule에 MapElementBaseComponent를 추가하여 수정하십시오.

수입품을 다시 확인 한 후이 문제를 제거했습니다.

ср, 14 нояб. 2018년 г., 15:13 Daniel Groh [email protected] :

문제가 지속됩니다. 빌드를 건너뛰고 싶은 파일도 추가했습니다.
(추상 클래스) tsconfig.app.json 및 I의 제외 섹션에
여전히 얻을:

에서 MapElementBaseComponent 클래스의 모듈을 결정할 수 없습니다.
.../map-elements/map-element-base.component.ts! MapElementBaseComponent 추가
NgModule로 수정합니다.

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/angular/angular/issues/13590#issuecomment-438641324 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AQb6kpWdkakUF8JVvea8Hy42tAnTKTuzks5uvAjvgaJpZM4LSAwS
.

TypeScript가 엄격할 때 AOT 컴파일에서 Angular 가져오기가 라이브러리에서 구성 요소를 사용하지 않고 이 오류를 랜칭하면... 사용되지 않는 구성 요소/모듈이 의미가 없는지 확인...

사용하지 않는 모듈과 구성 요소가 있는 라이브러리 폴더를 삭제하면 응용 프로그램이 strict-aot에서 제대로 실행되지만 이 폴더를 수동으로 삭제하는 것은 의미가 없습니다.

이 오류는 완전히 우스꽝스럽습니다. 다음과 같이 개체의 구성 요소를 지정하는 모듈이 있습니다.

const landingComponents = {
    'landing-root': LandingComponent,
    'get-notified': GetNotifiedComponent,
    'typed-component': TypedComponent,
    'sticky-bar': StickyBarComponent,
};

그런 다음 declarations: Object.values(landingComponents) , entryComponents: Object.values(landingComponents) 모듈에 공급하려고 했습니다.

맞춰보세요 ... AOT 컴파일러는 배열에 나열된 구성 요소를 볼 필요가 있습니다 ... 그렇지 않으면 다른 방법으로 전달하면 "클래스에 대한 모듈을 결정할 수 없습니다"라는 끔찍한 메시지가 나타납니다.

내가 Angular를 사랑하는 만큼 AOT 컴파일러는 마법 주문의 혼란스러운 수프처럼 보입니다.

여러 번 언급되었지만 솔루션은 이에 대한 모듈당 1개의 구성 요소이며 PR에서 Angular에 대해 알아차렸는지 확실하지 않지만 최근에 병합되었으며 이 주제에 관심이 있을 수 있습니다: https://github.com/ 각/각/당기기/27481

오늘로 2주년을 맞이한 이번 호 🎉

그러나 이것이 단지 경고가 될 수 없는 이유에 대한 핵심 팀의 한마디도 없습니다.

@tiagodws lol 이거 올리려고 얼마나 기다렸어요? 알림을 설정하셨나요?

참고로
내 문제는 https://github.com/angular/angular/issues/13590#issuecomment -389113560과 동일했습니다.
가져오기는 AOT 모드에서 분명히 대소문자를 구분합니다.

@peterdeme ... JavaScript는 대소문자를 구분합니다(문자열과 동일한 경로 ... = Windows가 아닌 Linux 기반).

안녕하세요 여러분, 뒤늦은 2주년 기념 행사를 위해 다시 찾아왔습니다. include 및 $#$ tsconfig.json 의 exclude 섹션을 포함하여 사람들의 가능한 원인에 대해 많은 논란이 있으므로 근본 문제가 무엇인지 명확히 하고 싶습니다. 이 스레드를 위해.

재사용 가능한 구성 요소의 라이브러리를 만들고 더 쉽게 가져올 수 있도록 배럴 파일( index.ts )을 추가하면 Angular 컴파일러는 그 중 하나를 사용할 때 중단됩니다. 이는 해당 배럴 파일(예: @shared/components )에서 무엇이든 가져오자마자 모든 단일 구성 요소에 대한 모듈을 찾으려고 시도하기 때문입니다. 원하는 특정 구성 요소(예: import { SharedToastComponent } from '@shared/components'; )를 지정하더라도 컴파일러는 여전히 내보낸 모든 구성 요소에 대한 모듈을 찾고 누락된 구성 요소에 대한 오류(경고 아님)를 던집니다.

분명히 해결 방법이 있습니다.

1. 배럴 파일 사용을 중지하십시오. 모든 구성 요소가 완전히 지정되어야 하기 때문에 이것은 빠르게 지저분해집니다.
2. ExtrasModule 를 사용하고 모듈을 어디에도 사용하지 마십시오. 이것은 테스트에만 필요한 구성 요소가 있는 사람들에게는 잘 작동하지만 구성 요소 라이브러리에서 가져오려는 사람들에게는 적합하지 않습니다.

그러나 이러한 해결 방법 중 하나를 사용하면 트리 쉐이킹 후에 정확히 동일한 출력 코드가 생성되기 때문에 다른 구성 요소가 사용된 모듈에 포함될 필요가 없다는 것은 분명합니다. 이 2년 된 문제에 대해 제가 요구하는 것은 해당 오류를 보다 적절한 경고로 바꾸는 것입니다. 계속 허용하면 컴파일이 계속 성공하므로 의미가 있습니다.

2019년에 Angular 팀이 이 아주 오래되고 매우 성가신 문제에 대해 뭔가를 할 수 있기를 바랍니다. 🤞

@swimmadude66 ... 실제 lib 모듈을 만들고 tsconfig.json 를 통해 Angular 앱에 추가하는 방법을 언급하지 않았습니다. "paths": {"ng-demo": ["./packages/ng-demo/src/index.ts"]} import { DemoModule } from 'ng-demo'; 오기를 통해 사용

모든 구성 요소 스텁에 오류가 있는 것이 가장 짜증나는 일입니다. 다들 스펙 테스트/작성 중이시죠? 따라서 구성 요소 스텁 오류는 모든 사람에게 영향을 미칩니다. 나는 배럴 문제가 덜 성가신 것을 말하는 것이 아닙니다. 나는 단지 모든 사람들이 배럴을 하고 있는 것은 아니라고 말하고 있습니다. 그러나 모두가 사양을 하고 있어야 합니다. 따라서 사양 문제는 핵심 팀이 이를 수정하는 가장 큰 동기가 되어야 합니다. 현재 "Frequency Low"라는 레이블이 지정되어 있지만 단위 테스트를 수행하는 모든 사람이 이 문제에 부딪힐 것이기 때문에 "Frequency High"여야 합니다.

이것은 AOT에서도 일관되지 않습니다. Angular CLI는 기본적으로 AOT를 사용하는 서버로 실행할 때 오류를 표시하지 않지만 빌드와 함께 실행하면 오류가 발생합니다.

나는 이것이 Angular CLI 저장소가 아니라는 것을 이해하지만 확실히 이것을 둘러싼 동작이 이상합니다.

모의 모듈을 생성 하는 해결 방법이 있더라도 이제 UI 단위 테스트 작성자가 단일 모의 구성 요소를 모의 모듈에 추가하는 것을 잊어버리면 "ng 빌드"가 실패합니다.

위는 UI 단위 테스트가 현재 CI/CD 배포 파이프라인의 위험 요소 임을 의미합니다!

Angular 단위 테스터가 한 번의 사소한 생략으로 전체 배포 빌드를 중단할 수 있다는 것을 먹이 사슬의 상위 사람들에게 설명해야 합니까? 아니요. Angular 개발자를 관리하고 다음 프로젝트에 사용할 프레임워크를 결정하는 사람들은 이런 종류의 문제에 대해 궁금해해서는 안 됩니다.

임시방편으로: "ng build"에 나타나는 오류를 테스트 작성자에게 더 많은 정보를 제공하도록 하는 것이 좋습니다. 즉 "테스트에 사용된 모의 구성 요소인 경우: 해당 모의 모듈에 추가" 효과에 텍스트를 추가합니다. (이 URL)에 따라 파일"

평균적인 친숙한 Angular 개발자 작성 단위 테스트가 어떻게 여기에 도달했는지:

a) IMHO 모든 .spec 파일이 사용하는 모의 구성 요소, 서비스 등을 배치하는 "도우미" 파일을 만드는 것은 DRY 코드 방식입니다. 그러나 이 연습은 테스터를 이 버그 시나리오로 실행합니다.

b) 모든 .spec 파일은 실제 테스트 코드와 관련이 없는 "모의 모듈" 없이 이 "도우미" 파일을 가져올 수 있습니다. 모의 구성 요소는 사양의 테스트 환경에서 전혀 역할이 없는 모의 모듈에 대한 구성원 자격 없이 있는 그대로 유용합니다.

물론 해결 방법은 사소하지만 Google 검색을 통해 이 버그를 찾고 스레드와 유용한 해결 방법을 읽고 요약하는 것은 그렇지 않았습니다.

모의 구성 요소를 포함하는 도우미 파일의 끝에 이것을 추가하기만 하면 됩니다.

/*
  mock components
  !! Each mock component added to this file *must* be added to the "MockTestModule", see below !!
*/
@Component({
  selector: 'app-mock-component',
  template: '<span>mock widget</span>'
})
export class MockComponent {}

/*
  This is an unused module to resolve the ng build error:
    'ERROR in : Cannot determine the module for class MockComponent
    in C:/code/myRepo/src/assets/test/test-resources.ts!
    Add MockComponent to the NgModule to fix it.'

  Reference: https://github.com/angular/issues/13590

  Each mock component added to this file *must* be added to the "MockTestModule"
*/
@NgModule({
  declarations: [ MockComponent ],
})
export class MockTestModule {}

위의 파일은 실제로는 꽤 큽니다... "MockTestModule"은 도우미 파일의 끝 부분에 묻혀 있습니다...

... 호출을 가로채고 콘솔 메시지를 삽입하는 "ng build"에 대한 package.json 항목을 작성할 필요가 없기를 바랍니다. 슬쩍 찌르다.

여기 나를 위해 문제가 해결되었습니다. 내 구조는 다음과 같습니다.

├── icons.module.ts
├── index.ts
├── icon
│   ├── icon.component.html
│   ├── icon.component.ts
│   └── icon.module.ts
└── icon-indicator
    ├── icon-indicator.component.html
    ├── icon-indicator.component.ts
    └── icon-indicator.module.ts

icons.module.ts 나는:

import { IconComponent } from './icon/icon.component';
import { IconIndicatorComponent } from './icon-indicator/icon-indicator.component';

export { IconIndicatorComponent, IconComponent };

@NgModule({
  /* this was all fine */ 
})
export class IconsModule {}

index.ts 에는 다음이 포함되었습니다.

export * from './icons.module';

컴파일러가 해당 구성 요소를 만나기 전에 아이콘 및 아이콘 표시기 모듈을 구문 분석하지 않아 Cannot determine the module for class 오류가 발생했다고 가정합니다. 이 프로젝트는 ng 5입니다. ng 7 프로젝트에서 사용할 때만 오류가 발생했습니다.

해결책은 내보내기를 한 단계 아래로 이동하는 것입니다. 그래서 icons.module.ts 에서 export 문을 제거하고 다음으로 옮겼습니다.

icon.module.ts:
export { IconComponent };
...

icon-indicator.module.ts:
export { IconIndicatorComponent };
...

조정된 index.ts :

export * from './icons.module';
export * from './icon/icon.module';
export * from './icon-indicator/icon-indicator.module';

이것이 누군가를 돕기를 바랍니다.

나는 새로운 아이비 렌더러가 AOT와 관련된 몇 가지 문제를 해결할 것이라고 생각합니다. pull 요청 및 문제에서 알 수 있듯이 Angular 팀은 ivy에 초점을 맞추고 있으므로 angular 6에서 이 문제에 대해 조치를 취할 이유가 없습니다.

나는 새로운 아이비 렌더러가 AOT와 관련된 몇 가지 문제를 해결할 것이라고 생각합니다.

나는 모든 문제에서 이것을 듣는 것을 좋아합니다.

angular 7.2.0 및 angular-cli 7.3.0에서도 이 문제가 발생합니다.

ERROR in : Cannot determine the module for class ModalMockComponent in /Users/user/repos/angular-skeleton/src/app/shared/modal/modal.component.mock.ts! Add ModalMockComponent to the NgModule to fix it.
Cannot determine the module for class TranslatePipeMock in /Users/user/repos/angular-skeleton/src/app/shared/pipes/translate.pipe.mock.ts! Add TranslatePipeMock to the NgModule to fix it.

예를 들어 내 Shared Module $ 안에 TranslatePipe 와 TranslatePipeMock $ 가 있습니다. TranslatePipe는 모듈에 포함되어 있지만 모의 파이프는 포함되어 있지 않습니다.
translate.pipe.mock.ts 는 단위 테스트용이므로 이 파일을 각 단위 테스트에 가져올 수 있습니다.

하지만 이제 내 빌드가 실패합니다.
ng build --prod

이 문제를 해결하려면 어떻게 해야 하나요?

Atm 나는 그것을 해결하는 해결 방법이 있습니다

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "**/*.mock.ts"
  ]
}

간단한 설명으로 이 문제의 현재 상태를 확인하기는 어렵습니다. 나는 이것이 문제라는 데 동의합니다(나쁜 디자인). 그것을 고칠 계획은 무엇입니까? 쉬운가요 어려운가요?

@rrmayer 이 문제의 상태는 거의 모든 "현재" 문제와 마찬가지로 "담쟁이덩굴을 기다리십시오"일 가능성이 큽니다.

우리는 이것을 "오류"에서 "경고"로 변경하기를 원하므로 프로젝트가 실제로 컴파일됩니다... 그렇게 어렵습니까?

@Terrafire123 ... 예를 들어 테스트 또는 빌드 도구와 많은 관련이 있을 수 있습니다. 이는 실제로 이 경우가 오류로 이어진다는 사실을 기반으로 하므로 경고 변경은 심각한 문제가 될 수 있습니다.

현재 컴파일러에서 수정될 것이라는 희망은 없습니다. D

최소한 오류나 경고를 표시할 수 있는 옵션이 있어야 합니다. 구성 요소가 의도적으로 모듈의 일부가 아니기 때문에 빌드가 깨지는 것은 꽤 성가신 일입니다.

사용하지 않는 가져오기로 인해 이 오류가 발생할 수 있습니다.

import { UnusedImportComponent } from "./used-somewhere-else-or-not.component";

클래스 옆에 있는 'export' 키워드는 @Component 데코레이터가 적용된 클래스가 어떤 모듈에 포함되어야 하는지를 어떤 식으로든 결정하는 것 같습니다. 구성 요소의 클래스를 가져오고 테스트에서 직접 선언하거나 CoreMocksModule과 같이 선언한 다음 모듈을 가져오는 것은 중요하지 않습니다.

그래도 해결 방법이 있습니다! 다음과 같이 선언된 스텁 구성 요소가 있다고 가정해 보겠습니다.

@Component({
  selector: 'app-user-stub-component',
  template: ''
})
export class UserStubComponent {}

'export' 키워드를 제거해야 하지만 테스트/테스트 모듈에서 사용하려면 여전히 구성 요소를 내보내야 합니다. 다음과 같이 하십시오.

@Component({
  selector: 'app-user-stub-component',
  template: ''
})
class UserStubComponent {}

export default UserStubComponent;

이제 스텁을 가져올 때 어디에서나 다음과 같은 대괄호를 피해야 합니다.
import UserStubComponent from 'path'

효과가 있기를 바랍니다. 나를 위해 그것은 AOT 컴파일 문제를 해결합니다.

제 경우에는 해결했습니다. 문제는 케이싱이었습니다. 폴더에 대문자를 사용했지만 VS 코드의 자동 가져오기는 소문자로 경로를 가져왔습니다.

@renilbabu03 JS는 대소문자를 구분합니다.

제 경우에는 번역 파이프를 조롱한 단위 테스트를 위해 수정했습니다.

export class 을 default export 로 변경했습니다.

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({
  name: 'translate'
})
class TranslatePipeMock implements PipeTransform { // <-- NOT: "export class TranslatePipeMock implements PipeTransform"
  public name = 'translate';

  public transform(query: string): any {
    return query;
  }
}

export default TranslatePipeMock;

이에 대한 수정 사항이 있습니까?
export default <class> 시도했지만 $# ng serve --aot 실행하면 오류가 발생합니다. 예기치 않은 값 'null'이 모듈에서 내보냈습니다 .

매우 답답합니다.

@redplane 왜 그렇게 하고 싶어? default 수출을 의미합니다.

그들이 스스로 하는 방법은 다음과 같습니다.
https://github.com/angular/angular/blob/master/aio/content/examples/testing/src/testing/router-link-directive-stub.ts

내가 import exported 자산이 아닌 한 Angular는 파일이 존재하는 경우 왜 신경을 쓰나요?

종종 나는 컴포넌트를 리팩토링하거나 컴포넌트를 제거하고 CommonJS 시절에 했던 것처럼 오래된 컴포넌트 참조를 주석 처리하고 싶습니다. 나는 배럴 파일을 사용하지 않았기 때문에 충분히 안전할 것입니다. 왜냐하면 그 앞에서 너무 많이 화상을 입었기 때문입니다. 그리고 Angular가 강제로 내 프로젝트에서 자산을 제거하도록 하는 것은 내가 목이 깊을 때 용납될 수 없습니다. 프로토타이핑 단계...

나는 이 프로젝트에서 작업하는 유일한 개발자이기 때문에 Angular 6에 갇혔고 새로운 기능을 제공해야 하는 가운데 최신 안정적인 도구를 얻기 위해 모든 것을 리팩토링하는 것은 지옥일 것입니다. 적어도 Angular 6+가 이 동작을 비활성화하기 위한 컴파일러 플래그로 패치될 수 있다면 좋을 것입니다...

제 경우에는 각도 라이브러리 프로젝트 설정이 있습니다. 라이브러리 내의 구성 요소 중 하나에서 몇 개의 열거형을 선언했습니다. 응용 프로그램 프로젝트에서 이러한 열거형을 사용하기 위해 응용 프로그램 루트의 프로젝트 디렉터리에 대한 상대 경로 를 사용하여 가져왔습니다.

이것이 Angular 컴파일러가 내 라이브러리 구성 요소가 애플리케이션 프로젝트의 ngModule에서 선언되기를 원하는 이유입니다.

이 오류를 해결하려면 내 열거형을 public-api.ts 파일에 선언 하고 상대 가져오기 경로가 아닌 라이브러리에서 직접 가져오는 응용 프로그램 프로젝트에서 사용합니다.

예를 들어:
라이브러리 프로젝트 이름: components-lib
애플리케이션 프로젝트 이름: demo-app

라이브러리 프로젝트 내부에 선언된 인터페이스, 클래스, 열거형 등을 사용하려면 직접 경로를 사용하여 가져옵니다.

'components-lib'에서 { SearchEnum } 가져오기;

그리고 하지마
import { SearchEnum } from '../../../projects/components-lib/path-to-your-component';

나는 이것을 찾는 데 몇 시간을 보냈기 때문에 이것이 미래에 누군가를 돕기를 바랍니다.

ng 8을 실행하는 사람들이 사용할 수 있기를 바라는 ng 9로 빌드된 라이브러리에 대한 호환성을 유지하는 데 문제가 있습니다.

라이브러리를 통해 구성 요소를 확장할 수 있는 몇 가지 유틸리티 클래스를 제공합니다. 해당 부모 클래스 체인에서 이들 중 일부는 추상적이며 ng 9에서는 ng 8과 호환되도록 @Directive({ selector: 'random' }) 가 필요합니다.

그래서 나는 그것을 거의 피할 뻔했습니다 ... 그러나 :

Cannot determine the module for class NgxSubFormComponent in /........./node_modules/ngx-sub-form/ngx-sub-form.d.ts! Add NgxSubFormComponent to the NgModule to fix it.`

나는 라이브러리 내에서 어떤 모듈도 노출하지 않습니다. 사람들은 우리가 제공하는 클래스를 확장해야 합니다. 그러나 나는 그들이 모듈에서 부모 클래스를 가져와야 하는 것을 원하지 않습니다(이해가 되지 않습니다).

그래서 저는 막혔고 사람들이 이전 버전과의 호환성 대신 ng 9로 업그레이드해야 하는 주요 변경 릴리스를 잘라낼 것입니다.

여러분, 이 문제에 대해 침묵을 지켜서 죄송합니다.

View Engine의 ngc는 의도적으로 "컴파일"의 모든 구성 요소에 대해 ngfactory 파일을 생성합니다. 즉, tsconfig에 의해 정의된 전체 TS 파일 세트입니다. 이것이 TypeScript가
자체 작동 - tsconfig에 의해 정의된 모든 파일을 컴파일합니다. ngc는 그 위에 추가 처리를 수행하고 있습니다.

따라서 해당 컴파일에 @Component 가 있고 ngc가 이를 볼 수 있는 경우(즉, 최상위 수준이고 내보낸 경우) ngc는 컴파일을 시도합니다. ngc가 처음에 구성 요소를 선언하는 파일을 컴파일하지 않도록 하는 것 외에는 이 문제를 해결할 수 있는 방법이 없습니다.

이를 수행하는 올바른 방법은 tsconfig의 범위를 지정하는 것입니다. 예를 들어, 모든 파일을 포함하는 편집기용 최상위 tsconfig가 있을 수 있으며, 다음으로 편집기 구성에서 상속하고 사양 파일을 제외하는 애플리케이션 컴파일을 위한 tsconfig.app.json 가 있을 수 있습니다. 앱 구성만 ngc로 컴파일됩니다.

프로젝트(각 tsconfig는 "프로젝트"임)는 구성 요소와 해당 모듈이 항상 함께 컴파일되도록 구성되어야 합니다.

Ivy에서는 몇 가지 작은 차이점을 제외하고 동일한 규칙이 여전히 크게 적용됩니다.

• 기본적으로 Ivy는 내보내기 여부에 관계없이 _any_ @Component 컴파일을 시도합니다.
• Ivy에서는 모듈이 없는 구성 요소를 갖는 것이 더 이상 오류가 아닙니다. 그러나 해당 구성 요소가 템플릿에서 다른 구성 요소/지시어를 사용하려고 하면 템플릿 유형 검사 오류가 계속 발생합니다. 모듈이 없으면 해당 구성 요소에 다른 것이 표시되지 않기 때문입니다.
• 데코레이터에 jit: true 플래그를 추가하여 특정 구성 요소나 모듈을 무시하고 런타임까지 그대로 두도록 Ivy 컴파일러에 지시할 수 있습니다.

@alxhub 더 이상 오류가 아니라는 소식을 들으니 기쁩니다!

나는 ngc가 tsc가 하는 모든 것을 시도하고 컴파일할 것이고, tsc가 그 범위 내에서 무엇이든 컴파일할 것이라는 것을 이해합니다. 즉, 구성 요소를 모듈에 추가해야 한다는 요구 사항은 100% 각도 문제이므로 타이프스크립트 프로젝트 범위에서 구성 요소를 제거하는 것은 길을 걷어차는 것과 같습니다. 또한 배럴 파일과 같은 패턴이 일반적이므로 도중에 다시 내보내기에서 파일을 제거하지 않고 단일 파일을 컴파일에서 진정으로 제거하기 어려울 수 있습니다. 이것이 바로 위에서 단순히 "해당 구성 요소를 제외"하라는 요청에 종종 불만을 제기한 이유입니다.

ivy의 나머지 제한 사항(모듈이 없는 구성 요소의 템플릿 오류)과 관련하여 경고도 요구하는 것이 너무 많은가요? 구성 요소가 모듈이 없는 것으로 식별되기 전에 유형 검사가 발생하면 더 어렵거나 불가능할 수 있다는 점을 이해하지만 Warning: ExampleUnusedComponent does not belong to an NgModule, and will be excluded from the output 행에 따른 경고가 구성 요소(및 구성 요소에서 참조하는 다른 구성 요소)는 ngModule에 추가되지 않는 한 포함되지 않습니다.

전반적으로 이 문제에 대한 움직임을 보게 되어 매우 기쁩니다. ivy 컴파일러의 새로운 변경 사항으로 원래의 사용 사례를 시험해 보기를 기대합니다!