Angular: Kompilasi Angular2 AOT - "Tidak dapat menentukan modul untuk kelas (... banyak komponen yang tidak digunakan)"

Tidak dapat menentukan modul untuk kelas

Komponen harus menjadi bagian dari modul. Ini dimaksudkan.
Saya akan mengatakan itu adalah permintaan fitur.

@DzmitryShylovich Masuk akal jika komponen yang Anda GUNAKAN harus menjadi bagian dari modul. Tetapi sejauh menyangkut kompiler, file-file ini seharusnya tidak menjadi masalah. Mereka adalah file .ts yang tidak digunakan dan tidak direferensikan yang kebetulan mengandung komponen.

@swimmadude66 Anda dapat mengecualikan file yang tidak digunakan di tsconfig

@DzmitryShylovich Anda bisa, tetapi file barel memperumitnya. Jika sebuah kelas diekspor kembali dalam file barel, saya harus mengabaikan file barel juga, yang dapat menyebabkan masalah dengan kelas yang saya butuhkan dari barel itu.

Tampaknya aneh bahwa kompiler harus mencoba mengkompilasi lebih dari yang seharusnya. Selain gemetar, saya berharap kompiler hanya ingin menangani file yang diberikan kepadanya atau secara eksplisit ditautkan ke file yang diberikan.

Tampaknya aneh bahwa kompiler harus mencoba mengkompilasi lebih dari yang seharusnya.

beginilah cara kerja kompiler ...

Fakta bahwa kompilasi JIT berfungsi seharusnya menjadi bukti yang cukup bagus bahwa kompiler tidak MEMBUTUHKAN file-file ini. Itu melempar kesalahan alih-alih peringatan pada file yang dapat dikecualikan tanpa membahayakan.

Anda dapat berbicara kepada saya tentang cara kerja kompiler sepanjang hari, tetapi ini adalah masalah nyata dalam kasus penggunaan yang agak mendasar. Saya hanya meminta beberapa cara untuk setidaknya menekan kesalahan dan melanjutkan dengan risiko saya sendiri.

Rekan kerja saya mencoba menghapus file barel apa pun yang dapat menghalangi kami menggunakan pengecualian selimut, tetapi saya meminta Anda melihat masalah yang awalnya saya buka terhadap @ngtools/webpack, di mana pengguna lain memiliki kesalahan yang sama dari komponen hanya direferensikan dalam pengujian mereka. https://github.com/angular/angular-cli/issues/3636

Kompilator mengetahui file yang tidak saya minta untuk dikompilasi, dan itu menimbulkan kesalahan yang tidak dapat dipulihkan untuk situasi yang dapat dipulihkan. polos seperti itu.

Saya tidak mengerti mengapa Anda memiliki komponen di direktori yang sama yang tidak disertakan dalam proyek.
Saya pikir ini bisa menjadi permintaan fitur tetapi saat ini adalah cara kerja kompiler, juga mengatakan "berfungsi di JIT" bukanlah alasan yang cukup untuk berpikir itu harus bekerja di AOT.
Apa yang saya pikir perlu Anda lakukan adalah memisahkan file-file ini dari aplikasi dasar Anda ke dalam modul kemudian mengimpornya melalui semacam manajer paket, cara ini memecahkan masalah Anda, merapikan direktori Anda dan membuatnya lebih mudah untuk dipelihara dari setiap aspek

@Toxicable file yang tidak digunakan berada dalam modul npm gaya perpustakaan. Umumnya usecase yang ideal adalah seperti ini:

di @project/angular (modul npm kode bersama kami) kami memiliki semua komponen, pipa, arahan, dan layanan yang diperlukan untuk membuat aplikasi dasar kami dan berkomunikasi dengan platform backend kami. Mitra kami menginginkan aplikasi yang terlihat serupa, tetapi menggunakan halaman beranda yang berbeda, atau memiliki beberapa komponen baru yang ditambahkan. Namun, sebagian besar halaman lain akan sama, dan semua layanan yang diperlukan untuk terhubung ke platform kami mungkin sama.

Pendekatan kami untuk memaksimalkan kode yang dapat digunakan kembali adalah membuat setiap mitra membuat modul, dan mengimpor kombinasi bagian baru, dan berbagi bagian dari modul npm. HomeModule baru saya mungkin memiliki impor seperti:

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

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

ini kemudian meledak di AOT yang mengatakan: Cannot determine the module for class OverviewComponent karena kami tidak menggunakan OverviewComponent dari @project/angular.

Karena benar-benar tidak ada file yang mengarah ke @project/angular/components/home/overview/component.ts , saya tidak akan mengharapkan kompiler untuk peduli sama sekali bahwa itu tidak digunakan. tetapi karena file tersebut ada di dalam direktori node_modules proyek kami, kompiler menemukannya, mengeluh, dan mati.

Adapun JIT bekerja !== AOT bekerja, aplikasi dasar bekerja dengan AOT, dan perubahan mitra Bukti Konsep sangat kecil. Saya tidak bermaksud menyiratkan bahwa semua yang bekerja di JIT harus bekerja di AOT, tetapi saya punya alasan yang sangat bagus untuk percaya bahwa ini seharusnya.

Saya punya contoh lain di mana perilaku saat ini tidak masuk akal - tes.
Katakanlah, saya memiliki direktori fitur some-feature , dengan some-feature.component.ts dan some-feature.component.spec.ts .
Komponen ini menggunakan proyeksi konten, jadi saya ingin menguji fungsionalitas itu dengan membuat komponen uji di dalam file some-feature.component.spec.ts saya yang menggunakan komponen some-feature dalam tampilan, seperti:

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

Saya kemudian menggunakan komponen ini dalam modul pengujian saya :

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

Semuanya valid dan bagus, sampai ketika saya menjalankan ng build --prod --aot menggunakan angular-cli, yang melempar:
Cannot determine the module for class TestAppComponent .

Saya tidak berpikir AOT harus peduli dengan file .spec ..

Aturan umumnya adalah: nGC akan mengkompilasi semua yang dikompilasi tsc. Dan ia akan mencoba mengkompilasi setiap komponen yang ditemukannya. Namun, Angular tidak dapat mengkompilasi komponen tanpa modul terkait.

Kami dapat mengubah kesalahan ini menjadi peringatan.

Saya juga memiliki komponen pembungkus tes yang digunakan untuk pengujian saja dan yang menyebabkan AOT meledak seperti yang dijelaskan di sini. Akan lebih baik jika AOT dapat mengabaikan semua komponen yang memenuhi ekspresi wildcard seperti TestComponent* dll.

Baiklah, jadi info lebih lanjut di sini. Kami tampaknya telah menemukan solusi untuk kasus kami (tidak memperbaiki kasus testWrapper). Tampaknya masalah sebenarnya dalam kasus kami adalah file barel kami. Saat mengimpor APA SAJA dari file barel, ia mengikuti rantai semua hal yang dipancarkan kembali oleh barel. Karena kami menarik komponen kami dari tingkat atas PROJECT/components , itu menganalisis SEMUA komponen, bukan hanya yang kami inginkan. Ini mungkin masih lebih baik sebagai peringatan, tetapi saya bisa mengerti sedikit lebih baik mengapa kompiler peduli dengan komponen-komponen itu.

melihat kesalahan yang sama:

$ ./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

Wastafel dapur sudut 2: http://ng2.javascriptninja.io
dan source@ https://github.com/born2net/Angular-kitchen-sink
Salam,

Sean

i18 seharusnya tidak berjalan di seluruh struktur proyek dan sebagai gantinya melihat deklarasi yang digunakan.

Saya mencoba membersihkan arahan yang tidak digunakan, dan lubang kelinci semakin dalam:

$ ./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'.

izinkan saya menambahkan bahwa semuanya berfungsi dengan baik dengan angular-cli dan angular-compiler, jadi hanya i18 yang tidak menyukai proyek saya.

Referensi (penyiapan yang bagus dan bersih): https://github.com/born2net/ng-skeleton

Salam,

Sean

Kesalahan yang sama untuk komponen yang dikomentari .. komponen yang tidak digunakan dan yang dikomentari untuk tahap pengembangan hanyalah langkah yang berguna untuk tidak memproses

// two comments aot read:

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

@kirjai ngc mengkompilasi semua file di dalam direktori sumber. tidak masalah apakah Anda mengimpornya atau tidak.

@DzmitryShylovich yang saya mengerti, saya hanya mengatakan bahwa saya tidak berpikir bahwa AOT harus peduli dengan file ini sama sekali dalam kasus ini .. dalam pikiran saya, melewatkan file .spec selama kompilasi AOT adalah cara yang harus dilakukan. Tapi jelas ada sesuatu yang menghentikan tim dari melakukan itu, saya mengerti.

Sebagai alternatif, maka mungkin meletakkan file .spec di direktori yang sama dengan entitas tempat pengujian ditulis tidak boleh disarankan oleh panduan gaya?

Saya juga mengalami pesan kesalahan ini (dan beberapa lainnya) karena kode pengujian kami dan AOT dalam kombinasi.

Saya dapat merekomendasikan artikel ini. Ini menjelaskan bagaimana pesan kesalahan tertentu dapat diprovokasi dan bagaimana memperbaiki/menyelesaikannya.

Mempertimbangkan bahwa orang akan tersandung ke dalam masalah yang tepat ini jika mereka mengikuti panduan pengujian resmi dan membangun aplikasi mereka dengan AOT, Anda mungkin ingin memperbarui panduan?

(Jika seseorang mencari jawaban tentang RouterLinkStubDirective )
_Anda dapat memperbaikinya dengan menambahkan modul "dummy":_

/**
 * 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 {
}

Omong-omong, ia juga mencoba menentukan modul untuk kelas abstrak:
export abstract class AsyncTransform extends AsyncPipe implements PipeTransform { ... }

"Kesalahan: Tidak dapat menentukan modul untuk kelas AsyncTransform"

Menambahkannya ke modul juga tidak berfungsi .
"Tidak dapat menetapkan tipe konstruktor abstrak ke tipe konstruktor non-abstrak."

ini terjadi untuk beberapa kelas juga.

Err: Tidak dapat menentukan modul untuk kelas AppGlobalModalComponent

export class CustomGlobalModalComponent extends AppGlobalModalComponent {}

@gestj seperti yang ditunjukkan @Phmager , modul dummy bukan perbaikan untuk semua kasus. Selain itu, mereka adalah perbaikan yang cukup tersendat-sendat, karena Anda akhirnya mengkompilasi kode yang tidak Anda inginkan atau butuhkan.

Untuk kasus kami, kami telah menambal masalah dengan cara yang berbeda. Kami memindahkan komponen bersama kami ke lib npm, dan mengabaikan node_modules di tsConfig. Saya sebutkan di atas bahwa itu masih tidak berfungsi, tetapi hanya karena kami menggunakan file barel. Jika Anda menunjuk langsung ke setiap kelas yang Anda butuhkan di dalam node_modules, itu akan mengabaikan yang lain. Namun, segera setelah Anda menunjuk ke tong, itu melempar kesalahan untuk file yang tidak digunakan di tong yang sama.

Ini tidak ideal, karena membunuh semua file barel kami yang luar biasa, tetapi setidaknya dapat diprediksi.

Masih berharap kesalahan ini diturunkan menjadi peringatan

Pekerjaan hebat dilakukan di tim Angular sejauh ini.
Kami banyak menggunakan Angular dalam proyek kami dan setelah satu tahun mencoba memahami semua hal Angular2+ yang ramai ini, inilah temuan saya:
1- Angular sangat besar dan lambat, Anda ingin membuatnya cepat? gunakan AOT dan LazyLoading dan gzip barang-barang Anda.
2- Anda ingin lazyLoad komponen? TIDAK , Anda akan dapat memuat satu rute dengan malas, jadi jika aplikasi Anda sangat besar tetapi hanya satu halaman, nikmati ukuran bundel 8mg.
3- Anda ingin menggunakan AOT ?? AOT bermasalah dan sulit untuk dipatuhi dan tidak menggunakan banyak fitur javascript/es6 dan mungkin menulis ulang banyak kode Anda.
4- Anda menggunakan AOT baik-baik saja? Baiklah, sekarang lihat bundel terakhir Anda, sekarang bahkan lebih besar dari @angular/compiler ditambah komponen Anda tidak AOTed , bagus sekali.

5-Sebagai bagian dari manfaat Angular2+ , Anda sekarang memenuhi syarat untuk menggunakan gzip , jika Anda tidak tahu cara menggunakannya sebelumnya , sekarang Angular sangat besar , Anda akan mempelajarinya dengan lebih baik :) Jadi begitulah, mereka sedang menjual gzip sebagai opsi untuk mengoptimalkan kode Angular2 :)

@xe4me Harap tetap diskusi di utas ini relevan dengan masalah yang dihadapi, daripada hanya kata-kata kasar umum terhadap kerangka kerja.

build:dev di https://github.com/AngularClass/angular2-webpack-starter auto mengonversi string ke array string agar sesuai dengan definisi fungsi, build:aot menunjukkan kesalahan. Selama pengembangan, tampaknya diperlukan pembuatan AOT yang sering.

Saya memiliki masalah yang sama, dan saya telah menemukan solusi, mungkin itu berhasil juga oleh Anda.

Skenario saya adalah sebagai berikut:

Saya memiliki MapPipes.ts, berisi dua Pipa.

Salah satu Pipa digunakan dalam modul saya, yang lain tidak. Jadi, saya tidak mendaftarkan yang kedua di bagian "deklarasi:" dari dekorator @NgModule saya. Masalah terjadi pada detik ini.

Saya juga mendaftarkan ini (meskipun tidak digunakan), dan sekarang berfungsi.

Saran saya adalah mengubah kompiler sudut dengan cara mencoba menemukan modul hanya untuk entitas sudut yang benar-benar digunakan.

Saya mendapatkan kesalahan ini dengan kelas abstrak yang extends NgClass . Menghapus warisan tampaknya memperbaiki masalah ini, tetapi jelas menciptakan masalah lain.

@DzmitryShylovich @kirjai ini hanya masalah dengan TestComponents dalam file spesifikasi jika Anda mengekspornya. Dan karena biasanya hanya digunakan dalam file yang sama, tidak perlu mengekspornya. Masalah terpecahkan untuk saya.

Sejujurnya, ini konyol, saya benar-benar tidak punya hal lain untuk dikatakan tentang ini selain fakta bahwa saya berjam-jam dan masih belum bisa mendapatkan sesuatu yang bekerja di bawah JIT bekerja dengan AOT (saya harus jelas ini hanya salah satu dari sekitar setengah lusin masalah sejauh ini).

@cwmrowe tidak apa-apa, tetapi bagaimana jika Anda memilikinya yang sedang digunakan kembali di beberapa file spesifikasi? Ini tampaknya rusak untuk jujur.

Dalam kasus saya, saya sedang mengerjakan 2 proyek berbeda di aplikasi inti Angular 2 yang sama. Saya memiliki 2 folder yang dinamai menurut klien kami, katakanlah some-domain.com dan some-other-domain.com . Aplikasi ini sama persis untuk 2 proyek dan hanya berbeda dalam sedikit gaya dan beberapa komponen kustom kecil. Hari ini saya perlu mengkompilasi aplikasi untuk klien A, dan nanti saya ingin mengkompilasi untuk klien B. Dalam kode itu semudah mengubah 1 baris kode untuk saya:

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

Saya cukup membatalkan komentar domain mana pun yang ingin saya kompilasi juga dan berfungsi.

Kami memiliki masalah yang sama dengan kelas warisan dan abstrak dan kami tidak menemukan solusi apa pun. Kami memiliki beberapa komponen yang memperluas komponen abstrak. Di JIT semuanya berfungsi dengan baik tetapi di AOT modul untuk komponen abstrak tidak dapat ditemukan dan tidak mungkin untuk mendeklarasikan komponen abstrak dalam sebuah modul.

Saat ini kami tidak memiliki solusi selain menghindari pola desain oop dan menggunakan kode yang berlebihan.

@jabaa hapus anotasi @Component dari kelas abstrak Anda

@DzmitryShylovich Ketika saya menghapus @Component konstruktor tidak diwariskan. Saya harus menyuntikkan semua injeksi ke semua komponen, bukan komponen abstrak. Itu kode yang berlebihan. Ketika saya mengubah konstruktor dan layanan kelas abstrak, saya harus menguasai semua komponen anak.

Saat ini kami mengatasinya dengan menerapkan semua metode abstrak dengan metode dummy dan membuat modul dummy untuk semua komponen abstrak. Tapi kemudian seseorang bisa lupa untuk mengganti metode dummy. Itu semua hanya pekerjaan sekitar.

@jabaa versi apa yang Anda gunakan? konstruktor harus diwarisi terlepas dari @Component .

@bigjetplane Saya tidak yakin di mana masalahnya, tetapi ketika saya menghapus @Component Saya mendapatkan kesalahan bahwa ketergantungan untuk komponen tidak dapat ditemukan. Sejauh yang saya tahu DI hanya berfungsi untuk kelas dengan dekorator Sudut. Jadi ketika saya menghapus dekorator, ketergantungan tidak disuntikkan. Kami menggunakan Sudut 4.

@jabaa apakah itu rusak dengan jit atau aot, atau keduanya?

@bigjetplane Inilah plunker dengan masalahnya. Ada kelas abstrak dengan dekorator dan semuanya bekerja di jit. Saat Anda menghapus dekorator dari kelas abstrak, aplikasi tidak dapat merender karena tidak semua dependensi dapat dimuat: Can't resolve all parameters for App: (?).

Itu kasus penggunaan kami. Kami memiliki kelas abstrak dengan konstruktor dan injeksi. Kami hanya ingin mengganti beberapa metode abstrak di komponen anak

Contoh yang diberikan tidak berfungsi di aot. Perbedaan antara aot dan jit adalah masalah besar bagi kami. Kami mengembangkan dengan jit. Pembuatan produksi dengan aot. Jadi kami mengembangkan minggu dengan jit tanpa kesalahan dan peringatan dan setelah minggu itu kami ingin membangun produksi dan mendapatkan banyak kesalahan entah dari mana. Saya lebih suka sakelar untuk jit, di mana saya dapat mengaktifkan kesalahan aot. Pembuatan jit membutuhkan 10-20 detik. Membangun aot membutuhkan 25 menit.

@tbosch Adakah kata untuk mengubah ini menjadi peringatan? Tampaknya sejak kunjungan terakhir saya, beberapa orang lain telah menimpali dengan anekdot mereka sendiri, dan saya ingin tahu apakah Anda dapat memberi kami pembaruan.

Terima kasih!

Saya juga memiliki masalah yang sama.

Dalam kasus saya, saya sedang mengerjakan 2 proyek berbeda tetapi memasukkan komponen umum melalui proyek perpustakaan sudut internal yang ditambahkan sebagai ketergantungan pada package.json.

Karena ini adalah proyek perpustakaan, komponen yang tidak digunakan dari repositori komponen memunculkan kesalahan di bawah ini saat mengkompilasi prod build 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!

Sepertinya saya harus membuat modul untuk setiap komponen & digunakan :(

Perbaikan apa pun untuk masalah ini akan banyak membantu.

Saya juga berharap untuk perbaikan ini. Rupanya menggunakan komponen rintisan untuk pengujian dimaksudkan oleh pengembang Angular - jadi mengecualikannya dari build dengan cara yang bersih juga perlu dimungkinkan. Untuk saat ini saya menggunakan solusi yang disarankan oleh gestj (mendefinisikan modul palsu di mana komponen rintisan dideklarasikan).

Jadi, saat menggunakan stub-components untuk pengujian, Anda ingin memberi nama komponen Anda dengan sufix spec.ts seperti whatever.component.spec.ts . Dengan cara ini tsc akan mengabaikan file ini (mengingat bahwa itu dikecualikan dalam tsconfig Anda) dan karena itu akan diabaikan oleh ngc juga.

EDIT: ternyata ini adalah kesalahan yang berbeda, hasil dari bug di ngtools/webpack. Tiket itu telah dibuka di sini: https://github.com/angular/angular-cli/issues/6228

Kesenangan baru di depan ini untuk perusahaan saya. Dalam upaya baru-baru ini untuk meningkatkan sistem kami ke v2.4.10, saya berakhir dengan beberapa lusin kesalahan jenis ini:

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

Tampaknya mencatat semua komponen di perpustakaan bersama kami yang tidak digunakan oleh aplikasi saat ini. Ini sangat mirip dengan kesalahan yang saya buka tiket awalnya.

Saya tidak yakin apa lagi yang bisa kita lakukan tentang ini. Kami telah mencoba menangani setiap komponen yang kami butuhkan dari lib bersama secara langsung (tidak menggunakan file index.ts , karena tampaknya menarik setiap file yang dirujuk dalam indeks) dan memindahkan semua lib bersama ke node_modules.

Mengapa kompiler perlu mengetahui tentang setiap komponen sudut di folder node_modules saya? Bahkan jika perlu membacanya untuk membangun petanya, seharusnya tidak peduli apakah mereka memiliki modul atau tidak!

@swimadude66 , ya kami mengalami ini bekerja dengan perpustakaan https://github.com/WealthBar/a2d3 kami. Meskipun tidak menyediakan komponen templated (hanya arahan), perpustakaan masih harus dibangun dengan kompiler AoT atau tidak akan bekerja dengan build AoT saat digunakan.

@chrisnicola Anda mengatakan perpustakaan harus dikompilasi sebelumnya dengan AoT sebelum diterbitkan? karena itu akan menyiratkan bahwa perpustakaan memiliki modulnya sendiri, yang tampaknya sangat kontra-intuitif. Seperti apa adanya, perpustakaan adalah file ts yang tidak dikompilasi, yang kami tarik sama seperti file lain di proyek kami. Semuanya kemudian dikompilasi dengan plugin @ngtools/webpack ke webpack.

Perlu dicatat bahwa bahkan kesalahan asli untuk tiket ini "diperbaiki" di pihak kami hingga v2.1.1 dengan hanya menghilangkan semua referensi ke file index.ts. Perbaikan itu sepertinya tidak lagi berfungsi untuk v2.4.10.

Ah saya mengerti, ya saya salah membaca masalah Anda. Anda tidak menarik perpustakaan bersama yang telah dikompilasi sebelumnya melalui NPM di sini, Anda memiliki perpustakaan TS lokal di proyek Anda. Apakah saya mengerti dengan benar sekarang?

Saya setuju bahwa itu harus "berfungsi" dan Anda benar itu pasti terdengar seperti masalah yang sama di mana ia menemukan komponen yang tidak memiliki modul dalam aplikasi. Solusi yang mungkin adalah menggunakan tsconfig.json build AoT spesifik yang mengecualikan file dan folder yang tidak diperlukan untuk build AoT.

Saya telah berhasil menyelesaikan semua masalah kami yang berkaitan dengan kesalahan ini.
Masalah (dan solusi) muncul saat mengekspor.

Kami memiliki komponen yang hanya digunakan untuk pengujian. Itu diekspor dari file lain sehingga dapat digunakan kembali - ini menyebabkan masalah saat menjalankan target i18n kami.

Untuk mengatasinya, kami baru saja mendeklarasikan sebuah modul (pastikan juga untuk mengekspornya):

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

Komponen kami yang lain yang menyebabkan kesalahan adalah komponen yang tidak digunakan yang meretas i18n.
Itu diekspor untuk diambil oleh alat i18n tetapi itu menyebabkan kesalahan yang sama seperti komponen lainnya.

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

Sekali lagi menggunakan teknik IgnoreModule kita dapat dengan mudah melewatinya.

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

@UtopianStorm itu bukan solusi. Telah disebutkan di atas bahwa memiliki "UnusedModule" tidak hanya sulit untuk diskalakan, tetapi juga membuat seluruh modul file sumber yang tidak boleh disertakan dalam bundel distribusi.

@Phmager Apakah Anda pernah menemukan solusi untuk masalah komponen abstrak? Saya menarik rambut saya keluar.

@swimmadude66 Ini bukan solusi dalam arti bahwa itu pasti solusi - tetapi mengatasi kesalahan.
Saya tidak yakin bagaimana akan sulit untuk menskalakan karena teknik ini dapat diterapkan setiap kali masalah muncul.

Ini akan mengacaukan bundel distribusi Anda, tetapi apakah itu penting? Dari keadaan Angular, saya berasumsi bahwa itu sudah dikotori dengan file spesifikasi kami.
Bagaimanapun ini adalah pendekatan yang jauh lebih bersih daripada menjangkau langsung ke dalam folder node_modules, bukankah Anda setuju?

Setidaknya dari usecase yang awalnya saya buka tiketnya, itu bahkan bukan solusi yang layak. Tidaklah layak bagi setiap tim mitra untuk mempertahankan daftar komponen bersama yang tidak digunakan saat kami melanjutkan.

Selain itu, pengiriman pada dasarnya 2 aplikasi lengkap hanya karena kompilernya terlalu ketat adalah kompromi yang tidak ingin saya buat. Angular sudah cukup besar, dan saya tidak bisa membenarkan pengiriman seluruh modul komponen yang tidak digunakan hanya untuk membuat kompiler mereka senang.

@swimmadude66 saya mengerti. Jika Anda berpikir menambahkan modul lain membuat perbedaan besar, saya lebih baik melihatnya lagi sendiri - karena saya tidak menganjurkan hanya membuat satu modul yang tidak digunakan untuk dibagikan ke seluruh proyek, tetapi satu modul untuk setiap komponen yang harus saya bebaskan dari kompiler yang terlalu ketat - berpotensi dusin.

Perlu dicatat bahwa basis kode bersama kami cukup besar, jadi modul yang tidak digunakan sejauh ini merupakan modul terbesar di aplikasi. Situasi kami tidak 100% khas, tetapi masih dalam batas-batas alasan untuk didukung, saya percaya.

Sejujurnya setelah 5 bulan menonton tiket ini tidak menghasilkan apa-apa, kami mencari opsi lain, termasuk hanya membunuh repo kode bersama kami

Saya menghadapi masalah yang sama persis seperti Anda, @swimmadude66 . Fakta bahwa ini bukan peringatan yang dapat ditekan adalah konyol.

Tim Angular yang terhormat, apakah ada yang dapat Anda lakukan tentang ini?

@DzmitryShylovich Bagaimana cara mengecualikan file mock.ts yang tidak saya gunakan? Saya mencoba memasukkannya ke tsconfig.app.json , tsconfig.json , dan tsconfig.ng-cli.json dan sepertinya tidak ada yang berhasil.

Menghadapi masalah yang sama dengan kasus penggunaan yang sama persis - kami menggunakan Rollup, jadi komponen yang tidak digunakan bahkan tidak sampai ke bundel utama.

Tolong tekan ini! Ini adalah gangguan besar, dan menghentikan pekerjaan.

Saya baru saja mengalami ini juga, sangat membuat frustrasi.

@mlakmal dan lainnya, yang mendapatkan kesalahan pada kode seperti

export class CustomGlobalModalComponent extends AppGlobalModalComponent {}

Hapus anotasi @Component dari AppGlobalModalComponent atau nyatakan AppGlobalModalComponent (jika dapat digunakan) di NgModule

Saya telah membuat arahan tiruan untuk menggunakannya dalam pengujian saya. Dan dapatkan masalah ini dengan kompilasi AOT. Saya tidak ingin mengimpor arahan tiruan ini dalam modul biasa. Tolong perbaiki ini.

Saya bertanya-tanya apakah tag "freq1: rendah" pada masalah ini disebabkan oleh fakta bahwa AoT sangat menyebalkan untuk bekerja, sehingga orang-orang bahkan tidak mempermasalahkannya? Agak sulit dipercaya bahwa masalah sederhana namun menyakitkan seperti itu pada dasarnya tidak menerima umpan balik dari kontributor inti Angular.

Bagaimanapun, ada cara untuk mengecualikan file yang belum disebutkan secara spesifik. Jika Anda memiliki pola penamaan (misalnya .spec.ts , .abstract.ts , .stfu-aot.ts ), Anda dapat membuat file tsconfig.json terpisah untuk AoT dan menggunakannya sebagai gantinya: ngc -p tsconfig-aot.json . Dalam file ini Anda dapat menggunakan "exclude": ["./app/**/*.stfu-aot.ts"] untuk mengecualikan file. Ini menjengkelkan, tetapi itu harus berhasil.

Sunting: Di atas tampaknya tidak berfungsi dengan kelas abstract yang mewarisi dari komponen. ya :(

Saya baru saja mengalami ini juga, sangat membuat frustrasi. Saat membangun, komponen umum tidak dapat dibagikan di aplikasi lain

beberapa kasus umum untuk masalah ini, hindari menambahkan @Component ke kelas layanan Anda:

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

Saya memiliki skenario di mana saya menyuntikkan layanan ke layanan. Pada blush pertama, sepertinya hal yang mudah untuk diterapkan, cukup tambahkan @Component. Jadi dokumen Angular harus diperbarui untuk menunjukkan solusi ini untuk layanan kompleks: Untuk mengatasi masalah ini saya menghapus @Component. Di konstruktor Layanan saya menambahkan:
constructor(@Inject(ExampleService) private exampleService: ExampleService)

Anda tidak perlu menambahkan dekorator @Component() ke layanan apa pun. Hanya @Injectable()

FWIW Saya memiliki MockXYZComponent yang memperluas XYZComponent komponen aplikasi tetapi hanya digunakan dalam spesifikasi (memiliki pemilih yang sama dan oleh karena itu tidak dapat diimpor ke AppModule ).

Apakah ini bukan kasus penggunaan yang valid?

@alastair-todd tidak yakin saya mengerti apa yang Anda maksud. Jika Anda menggunakan komponen sebagai komponen maka Anda menambahkan @Component() dekorator. Jika Anda menggunakan komponen sebagai basis - hanya untuk mewarisinya, tetapi bukan sebagai komponen, maka Anda tidak harus menggunakan dekorator - tetapi cukup mewarisi dan menggunakan dekorator pada "penerus".
Tentang pengujian unit - saya tidak dapat merespons, mungkin Anda perlu membuat TestModule khusus? Saya tidak melakukan pengujian unit saat ini.

@tytskyi saya mengerti pewarisan dekorator tidak didukung. Apakah itu baru saja berubah?

kasus penggunaan adalah untuk mengejek sub-komponen seperti di bawah ini. Keduanya membutuhkan arahan @Component untuk mengambil pemilih.

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

Namun itu menghasilkan kesalahan kompilasi OP AOT.

Maksud saya ini adalah kasus penggunaan yang valid, dalam hal ini kompilasi AOT terlalu bersemangat dan/atau mengabaikan spesifikasi sebagai bagian dari proyek.

Mungkin solusi saya akan membantu seseorang: Saya baru saja membuat modul dummy yang mendeklarasikan semua komponen tiruan. Modul ini tidak diimpor oleh apa pun - modul ini hanya membuat kompiler AoT senang. Akibatnya tidak ada komponen tiruan yang merupakan bagian dari kode yang dikompilasi. Tidak ideal, tetapi masalah terpecahkan.

Saya ingin mendengar tentang solusi yang lebih baik.

Ini sangat aneh & memalukan bahwa masalah ini dibuka pada Desember 2016 dan masih memiliki masalah ini. Saya mengonversi struktur seluruh aplikasi saya untuk menggunakan kompilasi aot. Saya memiliki 4 modul yang malas dimuat dan lebih dari 60 komponen. Kompiler hanya mengeluh hanya untuk beberapa komponen (sesuai apa yang disarankan kesalahan) yang saya yakin sudah menjadi bagian dari deklarasi salah satu modul yang dimuat malas yang agak aneh bagi saya.

Bahkan memberikan kesalahan pada komponen yang sudah menjadi bagian dari beberapa modul.

Masalah yang sama

Kompiler Angular melihat kumpulan file yang Anda berikan ke tsconfig - jadi mengecualikan file dari sana harus mengecualikannya dari pemeriksaan ini.

Ini sungguh menyebalkan :(

@alastair-todd maaf, saya kehilangan notifikasi dari pertanyaan Anda di banyak notifikasi lainnya. Anda benar -
Warisan dekorator tidak didukung.

Lihat jawaban dari @robwormald

Kompiler Angular melihat kumpulan file yang Anda berikan ke tsconfig - jadi mengecualikan file dari sana harus mengecualikannya dari pemeriksaan ini.

Jadi Anda bisa mencoba membuat konvensi untuk nama file tiruan, seperti: selection-tool.component.mock.ts . Kemudian kecualikan melalui

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

tidak sengaja mengklik tombol yang salah, maaf!

+8 bulan dan itu masih menjadi masalah. Masalah yang sama di sini ERROR in Cannot determine the module for class PasoFooterComponent

Saya pikir sangat penting bagi pengembang Angular untuk mengabaikan file-file ini.

Jika seseorang dapat memberi saya tip tentang di mana saya dapat menemukan kode ini, saya akan senang
untuk memperbaikinya sendiri. Ini adalah gangguan yang sangat mengganggu. Berlari ke dalamnya
lagi kemarin.

Jika ada yang berpikir ini adalah fitur dan bukan bug, bagaimana kalau kita punya bendera
untuk ini?

Pada hari Rabu, 9 Agustus 2017 pukul 02.40, Leonardo Vidal [email protected]
menulis:

+8 bulan dan itu masih menjadi masalah. Masalah yang sama di sini ERROR in Cannot
tentukan modul untuk kelas PasoFooterComponent

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/angular/angular/issues/13590#issuecomment-321082545 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AEM6r7FOTLcicWJN3Oijw2pwKTLGL6cFks5sWM61gaJpZM4LSAwS
.

@samirotiv Apakah Anda memiliki reproduksi?
Seperti yang dikatakan @robwormald

Kompiler Angular melihat kumpulan file yang Anda berikan ke tsconfig - jadi mengecualikan file dari sana harus mengecualikannya dari pemeriksaan ini.

Saya memiliki masalah yang sama tetapi saya berhasil menyelesaikannya. Saya baru saja melihat bagaimana ts mengubah aplikasi saya misalnya

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

Dan saya perhatikan bahwa TypeScript tidak mengkompilasi modul yang saya muat karena saya menggunakan opsi "file" tsconfig

Saya mendapatkan kesalahan ini pada kelas abstrak (tanpa dekorator)

Mulai mengalami masalah yang sama baru-baru ini sendiri.

+1 untuk mengubah kesalahan menjadi peringatan.

Sepertinya perbaikan yang mudah. Mengapa penundaan?

Ini adalah persyaratan dasar - tinggalkan file yang tidak direferensikan.
Pembatasan ini merupakan masalah untuk proyek yang lebih besar. Harap ubah ini menjadi peringatan.

Ada kasus ketika Anda menerbitkan paket yang mendukung berbagai versi angular. dan pengguna diharapkan untuk memilih salah satunya.

Misalnya, paket yang menyediakan file untuk HttpClient (Pengguna Angular >= 4.3) dan Http (Pengguna Angular < 4.3)

Saat ini, ngc mengkompilasi semua file di dalam direktori sumber tidak peduli apakah Anda menggunakannya atau tidak! atau pembangunan gagal.

Apa yang saya lakukan adalah ini:

Saya telah menyimpan semua komponen rintisan / tiruan saya dengan ekstensi .mock.ts dan memperbarui array "exclude" tsconfig.app.json seperti:

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

AOT sekarang melewatkan kompilasi file-file ini

Kami sedang melakukan perpustakaan npm dengan komponen umum yang seharusnya digunakan tidak sekaligus dan kesal dengan masalah itu selama kompilasi AoT, sialan... Satu-satunya solusi atm adalah membuat jenis UnusedComponentsModule di proyek host — sungguh konyol! Juga perlu NO_ERRORS_SCHEMA atau akan bersumpah tentang komponen lain yang dapat digunakan di dalam komponen yang tidak digunakan dan jika Anda akan mendeklarasikannya, maka Anda menemukan masalah lain di mana Anda tidak dapat mendeklarasikan komponen yang sama dalam dua modul (terkait dengan # 10646).

Modul saya saat ini:

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 {
}

Ini benar-benar harus menjadi peringatan. Saya mencoba membagikan basis kode juga dan saya mengalami masalah komponen yang tidak menjadi bagian dari ngmodule.
Masalahnya di sini persis setara dengan variabel yang tidak digunakan yang bukan merupakan kesalahan; paling-paling itu peringatan.

Sangat mudah ketika itu adalah kode Anda. Ketika itu masalah beberapa perpustakaan sudut NPM (beberapa kode mati), maka itu benar-benar menyebalkan :)

Adakah yang bisa menjelaskan mengapa itu bukan peringatan alih-alih kesalahan?

Dalam kasus saya, saya hanya ingin mengekstrak lang lebih disukai dari komponen yang terhubung ke ngModule dan mengabaikan yang tidak. Saya memiliki satu folder aplikasi utama dengan komponen dasar dan folder khusus aplikasi yang terkadang menimpa komponen dari aplikasi utama ketika saya mencoba mengekstrak komponen yang ditimpa dengan xi18n itu menimbulkan kesalahan Cannot determine the module for class... yang dalam pikiran saya dapat diabaikan dan diekstraksi dapat dilanjutkan tanpa menggunakan komponen yang tidak digunakan itu.

Satu hal yang dapat saya pikirkan yang bisa menjadi masalah adalah saya masih menggunakan kelas yang didefinisikan dalam file komponen yang salah itu sebagai dasar untuk membuat komponen yang ditimpa sehingga perlu dikompilasi tetapi saya tidak membutuhkan komponen itu penyebab anotasi karena Anda tidak dapat menggunakannya dalam komponen overrode. Setidaknya saya pikir Anda tidak bisa karena saya harus membuat ulang anotasi tersebut di komponen turunan untuk membuatnya berfungsi.

@Xesenix setidaknya itu harus menjadi pilihan. Seperti defineModule = false / true. Sekarang pisang.

Saya akan kembali pada 11/1/2017.

Saya akan membalas pesan Anda setelah saya kembali.
Dalam kasus mendesak, silakan kirim salinan email Anda untuk
masalah teknis ke [email protected] , jika tidak ke
[email protected]. Karyawan lain kemudian akan melihat email Anda
menerima.

Catatan: Ini adalah balasan otomatis untuk "Re:
[sudut/sudut] Kompilasi Angular2 AOT - "Tidak dapat menentukan modul
untuk kelas (... banyak komponen yang tidak digunakan)" (#13590)" dikirim
23/10/2017 08:13:17.

Ini adalah satu-satunya pemberitahuan yang akan Anda terima saat
orang itu tidak ada.

Bagaimana ini masih belum diperbaiki hampir 1 tahun kemudian? Menarik rambut saya agar AOT bekerja, tetapi masalah ini membuat saya menabrak dinding bata.

Terima kasih @rahul-sivalenka-wtc atas solusinya!
Saya berhasil menyelesaikan masalah saya dengan mengecualikan "**/*.mock.ts" di tsconfig.app.json saya seperti yang Anda jelaskan ❤️

Senang bisa membantu

Saya juga menemui masalahnya. Tapi bagi saya sepertinya saya salah menempatkan jalur mengimpor dodule

ada solusi? (tidak dapat menentukan modul untuk komponen sudut 5)

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

Ini mungkin harus severity3: broken . Bagi kita dengan beberapa target build dan dependensi polimorfik (banyak kasus penggunaan yang telah ada di atas) masalah ini mencegah build agar tidak berfungsi tanpa pengaturan build yang rumit dan gila.

solusi yang baik untuk masalah ini belum? IgnoreModule hanyalah solusi tetapi bukan solusi yang sangat bagus untuk masalah ini. mengubah kesalahan menjadi peringatan akan sangat bagus!

Solusi kami adalah menambahkan fungsi transform ke @ngtools/webpack yang meneruskan file melalui preprocess , dan komponen ifdef berdasarkan berbagai pengaturan waktu kompilasi. Sangat, sangat jelek, tapi fungsional.

Coba impor semua dependensi sudut terlebih dahulu di app.module.ts lalu impor komponennya.

` ---------------- Modul ketergantungan impor pertama -----------------------
impor { BrowserModule } dari '@angular/platform-browser';
impor { CommonModule } dari "@angular/common";
impor { NgModule } dari '@angular/core';
import { RouterModule, Routes } from '@angular/router';
impor { HttpModule } dari '@angular/http';
impor { ReactiveFormsModule } dari '@angular/forms';
impor { BrowserAnimationsModule } dari '@angular/platform-browser/animations';

------------- Kemudian Impor modul layanan ------------------------

import { ApplyFormPostService } dari './Services/apply-form-post.service';
impor { NavBarColorService } dari './Services/nav-bar-color.service';

----------------------- Akhirnya impor modul komponen ----------------------- -

impor { AppComponent } dari './app.component';
import { HeaderComponent } dari './components/header/header.component';
import { CareerComponent } dari './components/career/career.component';
import { HomeComponent } dari './Components/home/home.component';`

Entah bagaimana ini memecahkan kesalahan kompilasi AOT yang melempar Tidak dapat menentukan modul untuk kelas --- dalam mode produksi

@KarthikSamyak masalah ini bukan tentang orang-orang yang memiliki kelas yang HARUS dalam modul. Ini tentang kami yang memiliki pustaka komponen, yang sengaja dikecualikan dari semua modul. Mereka adalah kode yang tidak digunakan yang harus diabaikan oleh kompiler. Sebagai gantinya, kompiler memunculkan kesalahan yang tidak dapat dipulihkan ketika menemukannya.

Seharusnya perubahan sederhana untuk membuat kesalahan ini menjadi peringatan, tetapi untuk beberapa alasan itu telah memakan waktu LEBIH DARI TAHUN dan baru-baru ini dipindahkan dari pri_col1 ke pri_col2 di peta jalan.

Saya semakin frustrasi dengan tim Angular karena kurangnya tanggapan mereka terhadap masalah ini. Perusahaan kami akhirnya menyerah menggunakan pustaka komponen sepenuhnya, memilih untuk menyalin file secara manual. Ini jauh dari ideal, karena kami sekarang memiliki masalah dengan komponen yang hampir identik, tetapi tidak dibagikan.

Tim sudut, jika Anda bahkan membaca masalah ini lagi, harap tambahkan saja pengaturan kompiler untuk "ignoreUnusedComponents" dan mari kita lanjutkan menggunakan kerangka kerja ini.

Ok, saya menemukan tempat https://github.com/angular/angular/blob/master/packages/compiler/src/aot/compiler.ts#L605 @tbosch hei, dapatkah Anda membantu di sini dan mengatakan cara membuatnya menjadi peringatan dengan benar? Tidak dapat melihat peringatan apa pun yang dilemparkan ke dalam kompiler AoT itu, hanya kesalahan. Opsi kompiler dapat ditambahkan, seperti yang disarankan di atas.

Masalah itu adalah rasa sakit pada proyek-proyek yang kompleks. Kasus khusus saya adalah https://github.com/angular/angular/issues/13590#issuecomment -331820496

Kasus penggunaan kami sama. Kami ingin memiliki perpustakaan modul/komponen untuk membuat aplikasi dengan sangat mudah dan memiliki kemampuan untuk mengganti/memperluas yang aneh bila diperlukan.

Kami juga mengalami masalah dengan cara lain: Jika kami ingin mengganti 1x komponen di dalam modul, kami membuat modul baru dan mengimpor komponen yang masih kami inginkan di sana:

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 { }

Kesalahannya adalah: `HeaderComponent dideklarasikan dalam 2 modul: lib/module.ts dan app/module.ts
Menjadi peringatan sebaliknya setidaknya akan memungkinkan kita untuk bergerak maju :(

Baru sadar - Selamat Ulang Tahun untuk masalah ini :)

Satu tahun kemudian, dan kami MASIH tidak dapat mengubah ini menjadi peringatan. Konyol.

Secara harfiah baru saja mengalami masalah ini juga. Kompilator mencoba menarik tiruan yang hanya digunakan dalam pengujian dan gagal karena itu bukan bagian dari modul utama. Jika tahu itu tidak membutuhkan file maka itu harus menjadi peringatan paling banyak.

Tolong perbaiki ini. Jadikan itu sebagai peringatan!
Pengalaman umum saya dengan build sudut 5 aot kurang dari bintang.

Setelah beberapa diskusi https://gitter.im/angular/angular?at=5a551f565a9ebe4f756843b2 kami menyimpulkan bahwa kami perlu membuat satu Komponen per modul karena tampaknya modul hanyalah konteks kompilasi dan bukan cara untuk mengumpulkan barang bersama.. .

Ini mengambil ukuran buku sejarah.

@Xesenix ... konteks dan organisasi adalah 2 bagian dari keseluruhan.

Untuk berjaga-jaga jika ada yang masih terjebak dengan ini, Anda dapat menjalankan skrip ini sebagai skrip postinstall sebagai solusinya

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);
    }
});

Kompiler sudut akan menggunakan output dari tsconfig, jadi ubah _tsconfig.app.json_ untuk mengecualikan file-file yang tidak ingin Anda sertakan
misalnya
"exclude": [ "test.ts", "**/*.spec.ts", "**/*.mock.component.ts", ]

@andela-andrewmakenzi ini telah disarankan sebelumnya, lebih jauh dalam obrolan raksasa ini (sama sekali tidak malu untuk tidak membaca semuanya). Namun, masalah muncul jika Anda bergantung pada satu komponen di perpustakaan yang menggunakan file barel (index.ts). Jika Anda mengimpor komponen apa pun dari file barel, kompiler mencoba memuat semua komponen yang dirujuk dalam file barel itu, dan akan mengeluh bahwa komponen tersebut tidak ada dalam modul. Hal ini menyulitkan untuk mengemas pustaka komponen yang dapat digunakan kembali, yang pada dasarnya merupakan inti dari arsitektur komponen.

Solusi Anda berfungsi dengan baik untuk orang-orang yang memiliki komponen tiruan dan mendapatkan kesalahan ini saat mereka tidak menjalankan tes. Tetapi jika organisasi Anda (seperti milik saya) mencoba membuat pustaka komponen umum, dan menarik hanya yang kami butuhkan untuk proyek tertentu, pengecualian TSC sayangnya tidak akan membantu Anda.

@andela-andrewmakenzi: Saran Anda tampaknya membantu untuk saat ini, masalah sebelumnya adalah saya memiliki komponen untuk pengujian unit sebagai (.spec) dan saya tidak ingin itu dimasukkan untuk AOT-build (dan mungkin beberapa komponen tiruan yang Saya bahkan tidak ingin memilikinya dalam proyeksi saya) Mungkin ini entah bagaimana diatasi di versi Angular yang lebih baru, saya pikir :)

Tetapi kasus saya adalah saya memiliki banyak komponen baru yang bahkan tidak dirujuk di NgModule jadi untuk saat ini kita harus memiliki konvensi nama untuk itu dan mengecualikannya di tsconfig.json , yang tidak terlalu menyenangkan untuk saat ini

Ini benar-benar konyol. Kami memiliki modul NPM bersama yang mengekspor beberapa pipa/direktif dan kecuali Anda mengimpor SEMUA gagal dengan kesalahan bodoh ini. Itu harus benar-benar diubah menjadi peringatan dan tidak boleh merusak kompilasi.

Menurut pendapat saya, setiap komponen harus memiliki NgModule sendiri-sendiri. Tidak terlalu menakutkan untuk membuat NgModule lain untuk setiap komponen. (Seperti yang dilakukan @angular/material )

Saya pikir itu benar-benar masalah virtual. Kami juga tidak dapat melihat alasan mengapa memiliki sesuatu yang hanya setengah jalan. Bukan NgModule , bukan paket, bukan di luar pohon aplikasi ... sesuatu yang tampak sebagai kode mati.

Jadi dengan @angular/cli baru (1.7.0+) bahkan IgnoreModule entah bagaimana tidak mengatasi masalah ini.

Menurut pendapat saya, setiap komponen harus dalam NgModule sendiri

Apakah Anda bahkan mencoba menulis tes unit? Bug ini membuat pembuatan test helper agak bermasalah.

@sarunint Dalam aplikasi berukuran perusahaan seperti yang awalnya saya buka tiket ini, itu akan menjadi ratusan modul, dengan impor yang sangat rumit untuk menangani arahan dan komponen yang bergantung. Ini memiliki perbaikan yang sangat sederhana: jika kompilator tidak dapat menemukan modul untuk sebuah komponen, berikan peringatan dan singkirkan di tree-shaking.

Alasan sebenarnya hal ini sangat menjengkelkan adalah kenyataan bahwa file barel menjadi lebih berbahaya daripada keuntungan. Akan lebih mudah untuk memusatkan impor Anda, tetapi tidak jika Anda berkomitmen untuk menyertakan setiap komponen yang diekspor di setiap aplikasi yang menggunakan perpustakaan Anda.

@dborisenkowork Saya tidak yakin apakah Anda tidak melihatnya (atau jika itu tidak berfungsi untuk kasus penggunaan Anda) tetapi solusi yang disediakan @rahul-sivalenka-wtc bekerja dengan sempurna.

Adakah yang baru saja pindah dari sudut 4 ke sudut 5 dan memperhatikan bahwa beberapa komponen mereka yang sebenarnya dideklarasikan dalam modul menimbulkan kesalahan ini?

@novologic-clay kesalahan apa? Utasnya panjang, apakah Anda mengacu pada kesalahan aslinya?
Kompilasi Angular2 AOT - "Tidak dapat menentukan modul untuk kelas (... banyak komponen yang tidak digunakan)" ?

@andela-andrewmakenzi Ya dan tidak. Ini adalah kesalahan yang sama yang dicetak ketika mencoba untuk mengkompilasi, tetapi komponen yang dikeluhkan pasti disertakan dalam sebuah modul. Saya bermigrasi dari 4.3.6 ke 5.2.4, dan saya tidak mendapatkan kesalahan ini untuk komponen khusus ini karena saya memperbarui versi angular saya, dan saya melakukan kompilasi AOT pada 4.3.6 tepat sebelum saya mulai bermigrasi sebagai tes asap .

@novologic-clay dapatkah Anda membagikan kesalahan konsol Anda?

... tujuan akhir harus menggunakan opsi $ tsconfig.json "noUnusedLocals": true yang menghilangkan semua yang tidak digunakan.

@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.

Ini adalah aplikasi perusahaan dan ada lusinan lapisan modul dan impor, tetapi ini adalah kode yang sebenarnya mendeklarasikan komponen:

**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 { }

Yang juga perlu diperhatikan adalah ketika saya menjalankan aplikasi ini di ng serve, komponennya berfungsi dengan baik.

Komponen palsu yang digunakan oleh pengujian banyak komponen nyata tidak boleh ada dalam modul; Mereka hanya disertakan dalam TestBed dari komponen yang diuji.
Kesalahan ini bodoh. Tolong selesaikan itu seperti itu selama dari satu tahun.

hapus "ekspor" sehingga ts tidak akan membawanya ke build.

@tony-kaplan Anda tidak dapat melakukannya jika Anda memiliki noUnusedLocals di tsconfig Anda, atau jika Anda ingin menggunakan kode dalam kasus uji atau serupa.

Ya Tuhan.... benarkah tidak ada satu pun dari tim inti yang menemukan solusi yang cocok untuk ini?
Saya menggunakan opsi exclude untuk saat ini, tetapi ini masih merupakan solusi sementara. Tidak dapat memikirkan sesuatu yang akan berhasil untuk semua situasi ... tetapi saya benar-benar membutuhkannya ...

@gabrielalan Solusi mudahnya adalah mengubah kesalahan ini menjadi peringatan. Solusi yang lebih baik adalah menambahkan tanda yang memungkinkan Anda memperlakukan ini sebagai peringatan atau kesalahan. Ini bukan kurangnya solusi, ini adalah kurangnya penerapan salah satu dari mereka.

Oh Boy! Begitu banyak untuk kerangka kerja perusahaan ...

@atom-morgan solusi mana yang Anda bicarakan?

@netlander Yang ini

Sungguh, tidak ada yang bisa saya lakukan tentang kesalahan "Tidak dapat menentukan modul untuk kelas DaterangepickerDirective"?

Ada yang membantu saya juga? Setelah posting megazord ini!

Saya tidak setuju untuk menambahkan pengecualian tsconfig.app.json baru ke Petunjuk ini! Bagaimana saya bisa mengkompilasi dengan --aot param tanpa masalah ini?

Kasus penggunaan saya https://github.com/angular/angular/issues/23475
Saya membuat perpustakaan validator dan saya tidak ingin membuat modul untuk setiap arahan validator, yang saya inginkan hanyalah dapat menggabungkan arahan validator ke paket npm sehingga pengguna dapat menginstal dan mengimpor hanya validator yang dia butuhkan ke NgModule. Saya juga tidak ingin membuat satu modul untuk semua validator karena semuanya akan dibundel dalam bundel terakhir yang merupakan pemborosan ukuran yang sangat besar.

Saya senang membuat PR untuk memperbaiki masalah.

@anjmao itu sangat mirip dengan alasan saya membuka ini di tempat pertama. Sebagai solusi untuk perpustakaan kecil, kami menemukan bahwa kesalahan ini tidak terjadi jika Anda tidak menggunakan file barel (index.ts). Tampaknya jika Anda mengimpor 1 komponen/direktif dari indeks, ia mencoba menemukan modul untuk semua ekspor lain dari file indeks.

Jelas saya masih percaya ini harus menjadi peringatan, karena file barel sangat nyaman. Namun jika kasus penggunaan Anda tidak dapat menunggu satu tahun lagi untuk perbaikan ini, Anda mungkin dapat menyiasatinya seperti itu.

Solusi yang saya gunakan untuk pustaka komponen/arahan/pipa bersama saya: buat modul dummy sederhana yang mereferensikan semua deklarasi kelas. Anda tidak perlu menggunakan modul ini di aplikasi asli Anda, itu hanya harus ada di disk. Mantan:

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

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

Apakah ada alasan mengapa kami masih belum memperbaiki masalah ini?

Apakah solusi "Jadikan itu peringatan" tidak memadai? Dapatkah seorang anggota tim inti mengomentari hal ini?

Dalam kasus saya, hal-hal yang baik-baik saja dengan NG 5, CLI dan AOT. Tetapi setelah memutakhirkan ke NG 6, saya mendapatkan kesalahan serupa untuk komponen yang tidak digunakan. Sebenarnya komponen tersebut digunakan melalui layanan yang disuntikkan ke komponen lain. Saya memiliki banyak komponen serupa yang dibuat dan digunakan dengan cara yang sama. Tetapi hanya satu yang memiliki masalah satu peningkatan ke NG CLI 6.0 dan 6.0.1 terbaru

Dan ternyata, di salah satu referensi, saya memiliki referensi file dalam kasus yang salah. Saya memiliki index.ts untuk mengekspor semua komponen dalam direktori yang sama. aku punya
export * from './dateTimePicker.component'
padahal seharusnya:
ekspor * dari './datetimePicker.component';

Rupanya NG CLI 6 lebih dibatasi untuk casing bahkan di Windows, sedangkan NG CLI 1.x agak santai.
Jelas, pembatasan seperti itu baik dan benar, sehingga basis kode yang sama dapat bekerja dengan baik di Linux yang peka huruf besar-kecil secara default.

Kasus penggunaan lain untuk ini:

TypeScript memungkinkan Anda untuk mengatur beberapa jalur resolusi dengan variabel paths di tsconfig.json . Mantan:

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

Memungkinkan Anda mengimpor hal-hal seperti ini:

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

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

Jika Anda membuat komponen di dalam src-gen yang dapat "ditimpa" oleh pengembang dengan membuat komponen lain di dalam folder src , kesalahan yang sama mulai terjadi dengan komponen (sekarang tidak digunakan) di dalam src-gen (yang seharusnya tidak perlu dihapus, karena dapat diperpanjang oleh overrider).

Kasus penggunaan potensial lainnya:

Komponen khusus lingkungan. Saya menelanjangi mereka untuk produksi.

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

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

Saya berhasil membuat semuanya bekerja dengan komponen khusus lingkungan dan inilah yang menghentikan saya. 😪.

Kami menghadapi masalah ini ketika menerapkan mekanisme untuk kustomisasi build (komponen ditukar dengan proyek Angular CLI yang berbeda) yang terlihat sangat mirip dengan skenario yang dijelaskan oleh @tiagodws (termasuk ekstensi dari komponen asli).

Apakah ada pembaruan/pendapat dari tim inti tentang masalah ini?

Lebih dari setahun setelah saya membuka masalah ini, pendekatan baru saya adalah meminimalkan penggunaan file barel. Jika Anda menggunakan jalur TS seperti ~components/button/component dalam impor Anda di mana-mana, impor yang tidak digunakan akan diabaikan. Jika komponen yang tidak digunakan direferensikan dalam file barel, itu akan dibuang.

Itu masih tidak luar biasa untuk pustaka yang dapat digunakan kembali, karena Anda harus mengakses semua komponen pustaka dengan jalur yang lebih panjang, alih-alih hanya mengimpor dari tingkat teratas pustaka itu. Mengapa, oh mengapa ini tidak hanya menjadi peringatan?

Ini juga sepertinya dapat dibantu oleh (atau setidaknya terkait dengan) pohon gemetar, di mana kode apa pun yang tidak secara khusus termasuk dalam modul akan dikeluarkan dari bundel akhir.

opsi pengecualian tidak untuk pipa tiruan:

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

tsconfig.app.json saya telah mengecualikan file ini:

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

Namun, ketika saya menjalankan ng-xi18n --i18nFormat=xlf2 --outFile=./assets/i18n/messages.xlf, itu masih mengeluh:

Tidak dapat menentukan modul untuk kelas MockTranslatePipe di src/test/translate.service.mock.ts! Tambahkan MockTranslatePipe ke NgModule untuk memperbaikinya.

Masalah saya adalah saya memiliki nama kelas dalam 2 komponen berbeda dengan menyalin dan menempel lol! Kemudian kesalahan yang sama karena tidak peduli Latihan yang baik membuat teman-teman sempurna! hits...
Tanda tangan: Satoshi Nakamoto: v

Mirip dengan @yuezhizizhang , saya masih memiliki masalah ini, bahkan setelah menambahkan gumpalan untuk tiruan ke jalur tsconfig.app.json exclude .

Ini hampir membuat marah bahwa ini belum diselesaikan hampir dua tahun setelah tiket awal; ini adalah kasus penggunaan umum yang BREAKING build. Saat menulis tes, pengembang idealnya membuat tiruan untuk pipa, layanan, dan sebagainya kecuali. Jika Anda memilih untuk melakukan ini, build Anda akan rusak. Jika tidak, maka file spesifikasi Anda merujuk ke komponen/pipa/dll yang sebenarnya yang mengarah ke pengujian yang sangat erat.

Bisakah seseorang dari tim Angular menyarankan cara menyiasatinya? Apakah membuat modul dummy catch-all untuk ejekan benar-benar satu-satunya pilihan? Itu adalah peretasan yang buruk, daripada sesuatu yang harus kita terima sebagai praktik terbaik.

masalah tetap ada. Saya juga menambahkan file yang ingin saya lewati build (kelas abstrak) ke bagian yang dikecualikan dari tsconfig.app.json dan saya masih mendapatkan:

Tidak dapat menentukan modul untuk kelas MapElementBaseComponent di .../map-elements/map-element-base.component.ts! Tambahkan MapElementBaseComponent ke NgModule untuk memperbaikinya.

Saya telah menyingkirkan masalah ini setelah memeriksa ulang impor

, 14 о. 2018 ., 15:13 Daniel Groh [email protected] :

masalah tetap ada. Saya juga menambahkan file yang ingin saya lewati build
(kelas abstrak) ke bagian pengecualian tsconfig.app.json dan I
masih mendapatkan:

Tidak dapat menentukan modul untuk kelas MapElementBaseComponent di
.../map-elements/map-element-base.component.ts! Tambahkan MapElementBaseComponent
ke NgModule untuk memperbaikinya.

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/angular/angular/issues/13590#issuecomment-438641324 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AQb6kpWdkakUF8JVvea8Hy42tAnTKTuzks5uvAjvgaJpZM4LSAwS
.

Ketika TypeScript ketat, Angular mengimpor, dalam kompilasi AOT, tidak menggunakan komponen dari perpustakaan dan menemukan kesalahan ini... Periksa komponen/modul yang tidak digunakan tidak masuk akal...

Dengan menghapus folder perpustakaan tempat modul dan komponen yang tidak digunakan, aplikasi diluncurkan dengan sangat baik - tetapi tentu saja tidak masuk akal untuk menghapus folder ini secara manual

Kesalahan ini benar-benar konyol. Saya memiliki modul yang menentukan komponen dalam suatu objek, seperti:

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

kemudian saya mencoba memberi makan modul dengan declarations: Object.values(landingComponents) , entryComponents: Object.values(landingComponents) .

Coba tebak ... kompiler AOT perlu melihat komponen yang terdaftar dalam array ... jika tidak, jika saya meneruskannya dengan cara lain, saya mendapatkan "Tidak dapat menentukan modul untuk kelas" yang mengerikan ini.

Sama seperti saya menyukai Angular, kompiler AOT tampak seperti sup mantera magis yang kacau balau.

Sudah dikatakan beberapa kali tetapi solusinya adalah 1 komponen per Modul untuk ini dan saya tidak yakin apakah Anda memperhatikan dari PR ke Angular tetapi ini digabungkan baru-baru ini dan mungkin menarik untuk topik ini: https://github.com/ sudut/sudut/tarik/27481

Masalah ini berusia 2 tahun hari ini

Tetap saja, bahkan tidak sepatah kata pun dari tim inti mengapa ini tidak bisa menjadi peringatan.

@tiagodws lol sudah berapa lama Anda menunggu untuk memposting ini? Apakah Anda menyetel pengingat?

Sekedar FYI
Masalah saya sama dengan https://github.com/angular/angular/issues/13590#issuecomment -389113560
Impor tampaknya peka huruf besar-kecil dalam mode AOT

@peterdeme ... JavaScript peka huruf besar/kecil (dan jalur sebagai string sama ... = Berbasis Linux, bukan Windows).

Hai teman-teman, baru saja muncul kembali untuk perayaan usia edisi 2 tahun yang terlambat. Ada banyak pembicaraan silang tentang kemungkinan penyebab orang, termasuk bagian include dan exclude dari tsconfig.json , jadi saya hanya ingin menjernihkan apa akar masalahnya untuk utas ini.

Jika Anda membuat pustaka komponen yang dapat digunakan kembali, dan menambahkan file barel ( index.ts ) untuk impor yang lebih mudah, maka compiler Angular akan rusak saat Anda menggunakannya. Ini karena segera setelah Anda mengimpor sesuatu dari barrelfile itu (misalnya, @shared/components ), ia akan mencoba menemukan modul untuk SETIAP KOMPONEN TUNGGAL. Bahkan jika Anda menentukan komponen spesifik yang Anda inginkan (misalnya import { SharedToastComponent } from '@shared/components'; ), kompilator akan tetap mencari modul untuk setiap komponen yang diekspor, dan membuat kesalahan (bukan peringatan) tentang komponen yang hilang.

Jelas, ada solusi.

1. Berhenti menggunakan file barel. Ini menjadi cepat berantakan, karena setiap komponen harus ditentukan sepenuhnya
2. Gunakan ExtrasModule dan jangan gunakan modul di mana pun. Ini berfungsi dengan baik untuk orang yang memiliki komponen yang hanya diperlukan untuk pengujian, tetapi tidak begitu baik untuk orang yang ingin menarik dari pustaka komponen

Namun, karena menggunakan salah satu dari solusi ini menghasilkan kode keluaran yang sama persis setelah pengocokan pohon, jelas bahwa komponen lain tidak PERLU disertakan dalam modul bekas. Yang saya minta dengan masalah 2 tahun ini adalah mengubah kesalahan itu menjadi peringatan yang lebih tepat. Masuk akal, karena kompilasi akan tetap berhasil jika dibiarkan berlanjut.

Inilah harapan bahwa pada tahun 2019 tim Angular akan melakukan sesuatu tentang masalah yang sangat lama dan sangat menjengkelkan ini. 🤞.

@swimmadude66 ... Anda tidak menyebutkan cara membuat modul lib nyata dan menambahkannya ke aplikasi Angular melalui tsconfig.json ... seperti: "paths": {"ng-demo": ["./packages/ng-demo/src/index.ts"]} dan menggunakannya melalui impor seperti import { DemoModule } from 'ng-demo'; . Cara ini menghilangkan keharusan untuk memublikasikan lib di repositori npm publik/pribadi tetapi tetap menghormati peran asli modul lib itu. Jadi ini bekerja secara transparan di aplikasi Anda dan Anda tidak memiliki masalah.

Mengalami error pada setiap rintisan komponen adalah hal yang paling menyebalkan. Semua orang sedang menguji/menulis spesifikasi kan? Jadi kesalahan rintisan komponen harus mempengaruhi semua orang. Saya tidak mengatakan masalah barel kurang mengganggu. Saya hanya mengatakan tidak semua orang melakukan barel. Tapi semua orang harus melakukan spesifikasi. Jadi masalah spesifikasi harus menjadi motivasi terbesar bagi tim inti untuk memperbaikinya. Saat ini diberi label "Frekuensi Rendah" tetapi harus "Frekuensi Tinggi" karena siapa pun yang melakukan pengujian unit akan mengalami masalah ini.

Ini bahkan tidak konsisten dalam AOT. Angular CLI tidak memberikan error saat dijalankan dengan serve (yang secara default menggunakan AOT) tetapi memberikan error run running dengan build.

Saya mengerti ini bukan repo Angular CLI, tetapi tentu saja perilaku seputar ini aneh.

Bahkan dengan solusi untuk membuat modul tiruan, sekarang "ng build" akan gagal jika penulis pengujian unit UI lupa menambahkan satu komponen tiruan ke modul tiruan.

Di atas berarti bahwa pengujian unit UI saat ini merupakan elemen risiko untuk jalur penyebaran CI/CD!

Apakah kita benar-benar ingin harus menjelaskan kepada orang-orang yang lebih tinggi dalam rantai makanan bahwa penguji unit Angular dapat menghancurkan seluruh build penerapan dengan satu kelalaian sepele? Tidak. Orang yang mengelola pengembang Angular dan yang membuat keputusan tentang kerangka kerja mana yang akan digunakan untuk proyek berikutnya seharusnya tidak bertanya-tanya tentang hal semacam ini.

Sebagai pengganti sementara: mengapa tidak membuat kesalahan yang muncul di "ng build" lebih informatif untuk penulis pengujian: yaitu menambahkan teks tambahan ke efek "jika ini adalah komponen tiruan yang digunakan dalam pengujian: tambahkan ke modul tiruan di dalamnya file sesuai (url ini)"

Bagaimana tes unit penulisan dev Angular ramah rata-rata Anda sampai di sini:

a) IMHO itu adalah praktik kode KERING untuk membuat file "pembantu" untuk menempatkan komponen tiruan, layanan, dll. yang digunakan semua file .spec. Namun praktik ini menjalankan tester tepat ke dalam skenario bug ini.

b) Semua file .spec dapat mengimpor file "helper" ini tanpa memerlukan "modul tiruan" yang tidak memiliki relevansi dengan kode pengujian yang sebenarnya. Komponen tiruan berguna apa adanya, tanpa keanggotaan dalam modul tiruan yang tidak memiliki peran dalam lingkungan pengujian spesifikasi sama sekali.

Tentu solusinya sepele ... tetapi hanya menemukan bug ini melalui pencarian google, membaca dan mencerna utas dan solusi yang bermanfaat tidak.

Saya baru saja menambahkan ini ke akhir file pembantu yang berisi komponen tiruan (antara lain):

/*
  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 {}

Perhatikan bahwa file di atas pada kenyataannya cukup besar ... "MockTestModule" terkubur di bagian akhir file pembantu ...

...Saya harap kita tidak perlu menulis entri package.json untuk "ng build" yang memotong panggilan, dan menyisipkan pesan konsol "hei penguji unit UI, apakah Anda menambahkan komponen tiruan ke modul tiruan?" dorongan.

Inilah yang memecahkan masalah bagi saya. Struktur saya adalah sebagai berikut:

├── 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

Di icons.module.ts saya punya:

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 memiliki:

export * from './icons.module';

Saya berasumsi masalahnya adalah bahwa kompiler belum menguraikan ikon dan modul indikator ikon sebelum menemukan komponen yang sesuai dan dengan demikian melemparkan kesalahan Cannot determine the module for class . Proyek ini adalah ng 5. Saya hanya mendapatkan kesalahan saat mengonsumsinya dalam proyek ng 7.

Solusinya adalah dengan memindahkan ekspor satu tingkat ke bawah. Jadi saya menghapus pernyataan ekspor di icons.module.ts dan memindahkannya ke:

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

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

dan menyesuaikan index.ts :

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

Semoga ini bisa membantu seseorang.

Saya pikir penyaji ivy baru akan menyelesaikan beberapa masalah dengan AOT. Seperti yang Anda lihat dari permintaan tarik dan masalah, tim sudut berfokus pada ivy sehingga tidak ada gunanya melakukan sesuatu tentang masalah ini pada sudut 6.

Saya pikir penyaji ivy baru akan menyelesaikan beberapa masalah dengan AOT.

Saya suka mendengar ini di setiap masalah.

Saya juga mengalami masalah ini dengan angular 7.2.0 dan 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.

Misalnya saya memiliki TranslatePipe dan TranslatePipeMock di dalam Shared Module saya. TranslatePipe termasuk dalam modul, pipa tiruan tidak.
translate.pipe.mock.ts adalah untuk tujuan pengujian unit, jadi saya dapat mengimpor file ini ke setiap pengujian unit.

Tapi sekarang build saya gagal
ng build --prod

Bagaimana kita memperbaikinya?

Atm saya punya solusi yang menyelesaikannya

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

Sulit untuk menentukan status terkini dari masalah ini dari tinjauan singkat melalui komentar. Saya setuju ini adalah masalah (desain yang buruk). Apa rencana untuk memperbaikinya? Apakah mudah atau sulit?

@rrmayer status masalah ini kemungkinan besar hanya "tunggu ivy", seperti halnya hampir semua masalah "saat ini".

Kami hanya ingin ini diubah dari "kesalahan" menjadi "peringatan", sehingga proyek kami benar-benar akan dikompilasi... Apakah itu sulit?

@Terrafire123 ... mungkin ada banyak hubungan dengan pengujian atau pembuatan perkakas misalnya, yang sebenarnya didasarkan pada fakta bahwa kasus ini mengarah ke kesalahan, sehingga perubahan peringatan bisa menjadi masalah serius.

Saya tidak berharap itu akan diperbaiki untuk kompiler saat ini: D

Mungkin kita setidaknya harus memiliki opsi untuk menunjukkan kesalahan atau peringatan. Build rusak karena komponen tidak menjadi bagian dari modul dengan sengaja cukup mengganggu.

Impor yang tidak digunakan dapat menyebabkan kesalahan ini..

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

Sepertinya kata kunci 'ekspor' di sebelah kelas menentukan dalam beberapa cara bahwa kelas yang menerapkan dekorator @Component , harus disertakan dalam beberapa modul. Apakah Anda mengimpor kelas komponen dan mendeklarasikan secara langsung dalam pengujian atau mendeklarasikan dalam misalnya CoreMocksModule dan kemudian mengimpor modul, semuanya tidak masalah.

Ada solusi meskipun! Katakanlah kita memiliki komponen rintisan yang dideklarasikan seperti ini:

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

Kita harus menghapus kata kunci 'ekspor' tetapi dalam beberapa hal kita masih harus mengekspor komponen untuk menggunakannya dalam modul tes/tes. Lakukan seperti ini:

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

export default UserStubComponent;

Sekarang, di mana pun Anda mengimpor stub, kita harus menghindari tanda kurung seperti berikut:
import UserStubComponent from 'path'

Semoga berhasil. Bagi saya itu memecahkan masalah kompilasi AOT.

Dalam kasus saya, saya memperbaikinya. Masalah adalah dengan casing. Saya menggunakan huruf besar untuk folder tetapi impor otomatis kode VS mengimpor jalur dengan huruf kecil.

@renilbabu03 JS peka huruf besar-kecil.

Dalam kasus saya, saya memperbaikinya untuk pengujian unit saya, di mana saya mengejek pipa terjemahan.

Saya mengubah export class menjadi 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;

Ada perbaikan untuk ini?
Saya mencoba export default <class> tetapi ketika saya menjalankan ng serve --aot , itu menimbulkan kesalahan: Nilai tak terduga 'null' diekspor oleh modul .

Ini sangat membuat frustrasi.

@redplane Mengapa Anda ingin melakukan itu? Maksud saya ekspor default .

Inilah cara mereka melakukannya sendiri:
https://github.com/angular/angular/blob/master/aio/content/examples/testing/src/testing/router-link-directive-stub.ts

Kecuali saya import exported , mengapa Angular peduli jika file itu ada?

Lebih sering daripada tidak, saya memfaktorkan ulang komponen atau menghapus komponen dan hanya ingin mengomentari referensi komponen basi seperti yang saya lakukan di masa CommonJS. Ini akan cukup aman karena saya tidak pernah menggunakan file barel karena saya telah dibakar terlalu banyak di bagian depan itu, dan meminta Angular memaksa saya untuk berkomitmen secara fisik menghapus aset dari proyek saya tidak dapat diterima ketika saya berada jauh di dalam fase pembuatan prototipe...

Saya terjebak di Angular 6 karena saya satu-satunya pengembang yang mengerjakan proyek ini dan akan sangat sulit untuk memperbaiki hal-hal untuk mendapatkan alat stabil terbaru di tengah-tengah harus mengirimkan fitur baru ... setidaknya akan lebih bagus jika Angular 6+ dapat ditambal dengan flag kompiler untuk menonaktifkan perilaku ini ...

Dalam kasus saya, saya memiliki pengaturan proyek perpustakaan sudut. Di salah satu komponen saya di dalam perpustakaan, saya telah mendeklarasikan beberapa enum, untuk menggunakan enum ini dalam proyek aplikasi saya, saya mengimpor dengan jalur relatif ke direktori proyek di root aplikasi saya.

Inilah alasan mengapa kompiler sudut ingin komponen perpustakaan saya dideklarasikan di salah satu ngModules dari proyek aplikasi.

Untuk mengatasi kesalahan ini saya harus mendeklarasikan enum saya ke file public-api.ts serta menggunakannya dalam proyek aplikasi dengan impor langsung dari perpustakaan dan bukan dengan jalur impor relatif.

Sebagai contoh:
Nama Proyek Perpustakaan: component-lib
Nama Proyek Aplikasi: aplikasi demo

Untuk menggunakan antarmuka, kelas, enum , dll yang dideklarasikan di dalam proyek perpustakaan, imporlah dengan jalur langsung:

impor { SearchEnum } dari 'components-lib';

dan jangan lakukan
impor { SearchEnum } dari '../../../projects/components-lib/path-to-your-component';

Saya harap ini membantu seseorang di masa depan, karena saya telah menghabiskan berjam-jam menemukan ini sendiri.

Memiliki masalah untuk menjaga kompatibilitas untuk perpustakaan yang dibangun dengan ng 9 yang saya ingin orang-orang yang menjalankan ng 8 dapat menggunakannya.

Saya menawarkan melalui perpustakaan beberapa kelas utilitas yang dapat diperluas oleh komponen Anda. Dalam rantai kelas induk itu, beberapa di antaranya abstrak dan dengan ng 9 harus memiliki @Directive({ selector: 'random' }) agar kompatibel dengan ng 8.

Jadi saya hampir lolos... TAPI:

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.`

Saya tidak mengekspos modul apa pun di dalam perpustakaan, orang hanya seharusnya memperluas kelas yang kami tawarkan. Tapi saya tidak ingin mereka harus mengimpor kelas induk dalam modul mereka (tidak masuk akal).

Jadi saya mandek dan saya hanya akan memotong rilis perubahan yang mengharuskan orang untuk meningkatkan ke ng 9 alih-alih memiliki compat mundur

Hai semua, maaf atas kesunyian tentang masalah ini.

ngc di View Engine, secara desain, menghasilkan file ngfactory untuk setiap komponen dalam "kompilasi" - yaitu, set lengkap file TS yang ditentukan oleh tsconfig Anda. Ini adalah bagaimana TypeScript
sendiri berfungsi - ini mengkompilasi semua file yang ditentukan oleh tsconfig. ngc hanya melakukan pemrosesan ekstra di atas itu.

Jadi, jika @Component ada dalam kompilasi itu dan ngc dapat melihatnya (artinya tingkat atas dan diekspor), ngc akan mencoba mengompilasinya. Tidak ada jalan lain selain memastikan ngc tidak mengkompilasi file yang mendeklarasikan komponen sejak awal.

Cara yang benar untuk melakukannya adalah dengan cakupan tsconfig Anda. Misalnya, Anda mungkin memiliki tsconfig tingkat atas untuk editor Anda, yang mencakup semua file, dan kemudian tsconfig.app.json untuk kompilasi aplikasi Anda secara khusus, yang mewarisi dari konfigurasi editor dan mengecualikan file spesifikasi. Hanya konfigurasi aplikasi yang akan dikompilasi dengan ngc.

Proyek (setiap tsconfig adalah "proyek") harus disusun sedemikian rupa sehingga komponen dan modulnya selalu dikompilasi bersama.

Di Ivy aturan yang sama sebagian besar masih berlaku, dengan beberapa perbedaan kecil:

• Secara default, Ivy akan mencoba mengkompilasi _any_ @Component , terlepas dari apakah itu diekspor.
• Bukan lagi kesalahan, di Ivy, untuk memiliki komponen tanpa modul. Namun, Anda masih akan mendapatkan kesalahan pengecekan tipe template jika komponen tersebut mencoba menggunakan komponen/direktif lain dalam templatenya, karena tanpa modul tidak ada hal lain yang akan terlihat oleh komponen tersebut.
• Dimungkinkan untuk memberi tahu kompiler Ivy untuk mengabaikan komponen atau modul tertentu dan membiarkannya sampai runtime, dengan menambahkan flag jit: true ke dekorator.

@alxhub Saya senang mendengarnya bukan lagi kesalahan!

Saya mengerti bahwa ngc akan mencoba dan mengkompilasi apa pun yang akan dilakukan tsc, dan bahwa tsc akan mengkompilasi apa pun dalam ruang lingkupnya. Karena itu, persyaratan bahwa komponen ditambahkan ke modul adalah 100% perhatian sudut, jadi menghapusnya dari ruang lingkup proyek TypeScript Anda terasa seperti menendang kaleng di jalan. Selain itu, dengan pola seperti file barel yang umum, mungkin sulit untuk benar-benar menghapus satu file dari kompilasi, tanpa JUGA menghapusnya dari ekspor ulang apa pun di sepanjang jalan. Inilah sebabnya mengapa seruan untuk "mengecualikan komponen-komponen itu" di atas sering kali disambut dengan ketidakpuasan.

Mengenai batasan yang tersisa dengan ivy (kesalahan templat pada komponen tanpa modul), apakah terlalu berlebihan untuk meminta itu menjadi peringatan juga? Saya mengerti bahwa mungkin lebih sulit (atau tidak mungkin) jika pemeriksaan tipe terjadi sebelum komponen diidentifikasi sebagai tanpa modul, tetapi bagi saya sepertinya peringatan di sepanjang baris Warning: ExampleUnusedComponent does not belong to an NgModule, and will be excluded from the output secara akurat menangkap gagasan bahwa komponen (dan lainnya yang dirujuk olehnya) tidak akan disertakan kecuali jika ditambahkan ke ngModule.

Secara keseluruhan, saya sangat senang melihat pergerakan pada masalah ini, dan berharap untuk mencoba kasus penggunaan asli saya dengan perubahan baru pada kompiler ivy!