Я нахожусь в процессе обновления проекта Ionic 6 (Angular) до Ionic 8 (Angular 17) и застреваю при создании проекта из-за этой ошибки:
main.js:23 ERROR NullInjectorError: R3InjectorError(Pt)[Ze -> de -> de]:
NullInjectorError: No provider for de!
at Is.get (main.js:23:75445)
at ho.get (main.js:23:84703)
at ho.get (main.js:23:84703)
at ot (main.js:23:73943)
at Object.lt (main.js:23:74022)
at ye.#e.ɵfac [as factory] (main.js:1:27503)
at ho.hydrate (main.js:23:86100)
at ho.get (main.js:23:84655)
at Df.get (main.js:23:128437)
at Yo (main.js:23:94874)
handleError @ main.js:23
main.js:1 NullInjectorError: R3InjectorError(Pt)[Ze -> de -> de]:
NullInjectorError: No provider for de!
at Is.get (main.js:23:75445)
at ho.get (main.js:23:84703)
at ho.get (main.js:23:84703)
at ot (main.js:23:73943)
at Object.lt (main.js:23:74022)
at ye.#e.ɵfac [as factory] (main.js:1:27503)
at ho.hydrate (main.js:23:86100)
at ho.get (main.js:23:84655)
at Df.get (main.js:23:128437)
at Yo (main.js:23:94874)
Ошибка мало о чем говорит, кроме отсутствия провайдера.
Вот как выглядит мой app.module.ts
:
import { NgModule } from '@angular/core';
import { browserLocalPersistence, provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { RouteReuseStrategy } from '@angular/router';
import { IonicStorageModule } from '@ionic/storage-angular';
import { Storage } from '@ionic/storage-angular';
import { MusicControls } from '@awesome-cordova-plugins/music-controls/ngx';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { GooglePlus } from '@awesome-cordova-plugins/google-plus/ngx';
import { ModalAbout } from './modals/modal-about/modal-about';
import { ModalChangePassword } from './modals/modal-change-password/modal-change-password';
import { ModalDiscovery } from './modals/modal-discovery/modal-discovery';
import { ModalFilter } from './modals/modal-filter/modal-filter';
import { ModalHistory } from './modals/modal-history/modal-history';
import { ModalLegal } from './modals/modal-legal/modal-legal';
import { ModalStreamRatings } from './modals/modal-stream-ratings/modal-stream-ratings';
import { ModalReportIssue } from './modals/modal-report-issue/modal-report-issue';
import { ModalRequestStream } from './modals/modal-request-stream/modal-request-stream'
import { PopoverRate } from './popovers/popover-rate/popover-rate';
import { CanActivateGuard } from './providers/guards/can-activate.guard';
import { SigninSignupGuard } from './providers/guards/signin-signup.guard';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { firebaseConfig } from './config/firebase.config';
export function translationLoader(http: HttpClient) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}
@NgModule({
imports: [
provideFirebaseApp( () => initializeApp(firebaseConfig)),
provideAuth(() => {
const auth = getAuth();
auth.setPersistence(browserLocalPersistence);
return auth;
}),
AppRoutingModule,
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
ScrollingModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (translationLoader),
deps: [HttpClient]
}
}),
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: true
})
],
declarations: [
AppComponent,
ModalAbout,
ModalChangePassword,
ModalDiscovery,
ModalFilter,
ModalHistory,
ModalLegal,
ModalReportIssue,
ModalRequestStream,
ModalStreamRatings,
PopoverRate
],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
GooglePlus,
HttpClient,
MusicControls,
Storage,
CanActivateGuard,
SigninSignupGuard,
Storage
],
bootstrap: [AppComponent]
})
export class AppModule {}
Я просмотрел весь импорт несколько раз, но не нашел ничего плохого. Может быть, я здесь что-то упускаю?
Как я могу использовать приложение в режиме разработки, чтобы видеть сообщение в браузере? Есть ли для этого команда?
Было бы полезно поделиться соответствующими частями angular.json
. Вам необходимо убедиться, что для вашего сервера разработки код не оптимизирован, см. документацию. В более новых версиях Angular код оптимизируется по умолчанию.
Я установил оба optimization
и buildOptimizer
как ложные в angular.json
. Это не имеет никакого эффекта.
ng serve -c development
, если вы не меняли, angular.json
должен предоставить вам неоптимизированную, не минимизированную версию сервера сборки, которая предоставит вам поставщиков.
Я бы начал с provide*
и переместил их в providers
из imports
. Это не модули IMO, а провайдеры, возвращающие функции. Переход к массиву providers
может сразу решить проблему.
Попробуйте это изменение. По сути, это перемещает двух поставщиков из массива imports
в массив providers
. Это может решить проблему.
Запуск ng serve -c development
запустит локальный сервер без какой-либо оптимизации/минимизации исходного кода. Это поможет сузить круг ошибок. Кроме того, вы можете изменить angular.json
, чтобы использовать конфигурацию development
по умолчанию для ng serve
. Об этом можно прочитать здесь.
@NgModule({
imports: [
AppRoutingModule,
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
ScrollingModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (translationLoader),
deps: [HttpClient]
}
}),
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: true
})
],
declarations: [
AppComponent,
ModalAbout,
ModalChangePassword,
ModalDiscovery,
ModalFilter,
ModalHistory,
ModalLegal,
ModalReportIssue,
ModalRequestStream,
ModalStreamRatings,
PopoverRate
],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
GooglePlus,
HttpClient,
MusicControls,
Storage,
CanActivateGuard,
SigninSignupGuard,
Storage,
provideFirebaseApp( () => initializeApp(firebaseConfig)),
provideAuth(() => {
const auth = getAuth();
auth.setPersistence(browserLocalPersistence);
return auth;
}),
],
bootstrap: [AppComponent]
})
export class AppModule {}
Оказывается, мне не хватало некоторой конфигурации в моем файле angular.json
:
"development": {
"optimization": false,
"buildOptimizer": false
},
После этого я смог запустить его в режиме разработки с помощью команды ionic serve -c development
.
В итоге я нашел виновника. Это был отсутствующий поставщик для IonRouterOutlet
.
Похоже, что приложение работает в режиме prod. Пожалуйста, попробуйте воспроизвести ошибку на своем сервере разработки, он выдаст вам правильное сообщение об ошибке с настоящими именами затронутых инъекций. Если вы получаете эту ошибку на своем сервере разработки, возможно, что-то не так с вашей конфигурацией
angular.json
.