javascript - ng build başarıyla tamamlanıyor, ancak tarayıcıda açıldığında " '@angular/core' modülü bulunamıyor "

StackOverflow ve Google üzerinde arama yapmak, ya modern JS hızına göre tamamen eski görünen ya da derleme aşamasında hata veren ya da VSCode veya IntelliJ lint'in sorun çıkarması gibi problemlerle sonuçlanan sayısız sonuç veriyor; ki bu benim sorunum değil:

Böylece bu konuyu oluşturdum.

Arka plan

Uygulama, belirli olmayan bir süre önce bakım için devraldığım bir uygulama, orijinal geliştiriciler artık mevcut değil.

Şimdi, bunu daha da güncelleme görevi bana verildi; ama bunu yapabilmek için, aynı commit'lerin yeni sürümlerinin eskiden çalıştığı halde artık çalışmamasına neden olan bir bağımlılık sorununu çözmem gerekiyordu.

Bu yüzden önce node'u, npm'i ve tüm ilgili paketleri yükseltmeye gidiyorum; böylece gelecekte hızlı güncellemeler için işleri tutarlı tutmaya çalışmak ve üzerine inşa etmek için iyi bir temel oluşturabilirim.

Ancak, sıfırdan başlamak daha iyi bir seçenek gibi hissetmeye başlıyorum ama bu, bunun çözülmek üzere olduğu hissim tarafından engelleniyor ve bu yüzden tekrar yapmak, başka işlerle de bir yığın işim olduğu için zamanımın çok verimsiz bir kullanımı olur.

Uygulamanın commit geçmişine göre, bu başlangıçta bir Angular2 uygulamasıydı ve benim devralmamdan önce Angular 5'e yükseltildi. Bu sürüm eskiden sorunsuz çalışıyordu ve şu anda bir docker konteynerinde üretimde çalışıyor; yeniden inşa edilmediği sürece, aksi takdirde bazı çok temel özelliklerin (özellikle etkileşim) hedef cihazlarda çalışmamasına neden oluyor. Yani, ya içerideki bağımlılık ağacını tam olarak ortaya çıkarana kadar güncelleme yapamam, ya da sorunu ileriye doğru ilerleyerek çözmek zorundayım.

Şimdi son zamanlarda Angular 5.0'dan Angular 6.1'e yükseltme sürecindeyim ve bunu https://update.angular.io/ adresinde belirtilen yönergeleri kullanarak yaptım ve en azından geliştirme makinesinde ve hedef cihaz emülatöründe sorunsuz çalıştı.

Bir önsöz olarak, bazı iyonik öğeleri var, ama sadece stil ve simgeler için gibi görünüyor ve tam anlamıyla kullanılmıyor, çünkü hem DockerFile'da hem de Readme'de kullanılan tüm komutlar bunun yerine angular-cli kullanıyor.

Yani bazı uygulama detayları

package.json

{
  "name": "",
  "author": "",
  "private": true,
  "description": "",
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "node_modules/.bin/ng build --prod --aot=true",
    "start:dev": "ng serve --port 8100 --host=0.0.0.0 --disable-host-check", "server:prod": "node_modules/.bin/http-server dist --cors --silent "
  },
  "dependencies": {
    "@angular/core": "~6.1.5",
    "@angular/compiler": "~6.1.5",
    "@angular/common": "~6.1.5",
    "@angular/http": "~6.1.5",
    "@angular/forms": "~6.1.5",
    "@angular/platform-browser": "~6.1.5",
    "@angular/platform-browser-dynamic": "~6.1.5",
    "@angular/router": "~6.1.5",
    "@ng-idle/core": "~6.0.0-beta.3",
    "@ngx-translate/core": "~9.1.1",
    "@ngx-translate/http-loader": "~2.0.1",
    "@reactivex/rxjs": "~6.3.2",
    "http-server": "~0.11.1",
    "angular2-uuid": "~1.1.1",
    "ajv": "~6.5.3",
    "caniuse-db": "~1.0.30000884",
    "core-js": "~2.5.7",
    "ionic-angular": "~3.9.2",
    "ionicons": "4.4.3",
    "lodash": "~4.17.5",
    "moment": "~2.22.2",
    "node-sass": "~4.9.3",
    "rxjs": "~6.3.2",
    "rxjs-compat": "^6.3.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@types/node": "8.0.53",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "~6.1.5",
    "@angular-devkit/build-angular": "~0.7.5",
    "@angular-devkit/core": "~0.7.5",
    "@types/lodash": "~4.14.112",
    "codelyzer": "~4.4.4",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "2.9.2"
  }
}

tsconfig.app.json

{
    "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "outDir": "../out-tsc/app",
        "module": "es2015",
        "baseUrl": "",
        "types": [],
        "lib": [
            "es2017",
            "dom"
        ]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

ES5 hedefi bir zorunluluktur, çünkü hedef cihazlar daha yeni sürümleri çalıştıramaz ve JIT yöntemi makinede yavaş olur.

Ne İşe Yarar?

ng serve

Sorunsuz çalışıyor ve sayfa tamamen kullanılabilir durumda ve beklendiği gibi çalışıyor. Testler de başarılı oluyor.

Derlemeyi oluşturun ve derlemeyi çalıştırın

ng build --prod --aot=true
http-server dist --cors --silent

Ayrıca derlemeleri hatasız tamamlar.

Basit http sunucusu başlatılır ve dosyaları başarıyla barındırır.

Sorun

Ancak tarayıcıyı açıp sayfaya gittiğimde, aşağıdaki hatayı alıyorum.

Uncaught Error: Cannot find module '@angular/core'
    at n (VM736 main.84a8ed63029b59b371ad.js:1)
    at VM736 main.84a8ed63029b59b371ad.js:1
    at VM736 main.84a8ed63029b59b371ad.js:1
    at Object.eD2c (VM736 main.84a8ed63029b59b371ad.js:1)
    at p (VM734 runtime.a66f828dca56eeb90e02.js:1)
    at Object.zUnb (VM736 main.84a8ed63029b59b371ad.js:1)
    at p (VM734 runtime.a66f828dca56eeb90e02.js:1)
    at Object.4 (VM736 main.84a8ed63029b59b371ad.js:1)
    at p (VM734 runtime.a66f828dca56eeb90e02.js:1)
    at n (VM734 runtime.a66f828dca56eeb90e02.js:1)

Bu tek hata ve angular-app tarayıcıda render etmeyi reddediyor.

Bu, hem geliştirme makinesinde hem de uygulamanın nihayetinde oluşturulduğu docker konteynerinde meydana geliyor, bu yüzden yapı ortamı bir değişken olarak ortadan kaldırılmalıdır.

Bunun kesinlikle bir tsconfig sorunu ya da buna benzer bir şey olduğundan eminim ya da ts veya angular konusundaki tecrübesizliğimden dolayı fark edemediğim bir şey.

Cevap #1

Sorun, Angular 6 ve Ionic 3 kombinasyonudur. Bu kombinasyon resmi olarak desteklenmemektedir: https://forum.ionicframework.com/t/upgrading-to-angular-6/131121/5

Webpack kullanan Angular 6 önceden derleme (ahead-of-time) derleyicisi, Javascript'i doğru şekilde küçültmüyor. Bu yüzden script bir modül yüklemeye çalışıyor - hata mesajınıza bakın. Eğer küçültme doğru şekilde çalışırsa, tüm modüller birlikte derlendiğinden herhangi bir modül yüklenmesine gerek kalmaz.

Sorun, ya TypeScript ya da Webpack ile uyumsuz olan ionic-angular içinde yatıyor. Webpack kodu küçültürken, Critical dependency: the request of a dependency is an expression gibi birçok uyarı çıkıyor.

Sorununuzu çözmek için ya zamanından önce derlemeyi devre dışı bırakın ya da Angular 6 ve Ionic 4'e güncelleyin.

İlgili makaleler