Ngx-adminとfirebaseを統合しようとしています。 firebaseをmy angular project。にインストールしていますが、「TypeScriptエラーはモジュール 'firebase/app'を見つけることができません。」運
私のスタックトレース
D:\admin-ionic> ng serve
Your global Angular CLI version (1.6.1) is greater than your local
version (1.4.9). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMismatch=false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-21T08:36:34.546Z
Hash: ecdd99ad138ea0774dff
Time: 8026ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 694 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]
ERROR in D:/admin-society/node_modules/angularfire2/firestore/observable/fromRef.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firebase.app.module.d.ts (3,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/collection/collection.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/document/document.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/firestore.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/collection/changes.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/firestore/interfaces.d.ts (2,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/auth/auth.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/database/interfaces.d.ts (1,27): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/database/database.d.ts (1,26): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/database/list/state-changes.d.ts (3,26): Cannot find module 'firebase/app'.
ERROR in D:/admin-society/node_modules/angularfire2/database/list/audit-trail.d.ts (3,26): Cannot find module 'firebase/app'.
ERROR in Error: Metadata version mismatch for module D:/admin-society/node_modules/angularfire2/index.d.ts, found version 4, expected 3, resolving symbol AppModule in D:/admin-society/src/app/app.module.ts, resolving symbol AppModule in D:/admin-society/src/app/app.module.ts, resolving symbol AppModule in D:/admin-society/src/app/app.module.ts
at syntaxError (D:\admin-society\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (D:\admin-society\node_modules\@angular\compiler\bundles\compiler.umd.js:24979:23)
at StaticReflector.simplify (D:\admin-society\node_modules\@angular\compiler\bundles\compiler.umd.js:24991:13)
at StaticReflector.annotations (D:\admin-society\node_modules\@angular\compiler\bundles\compiler.umd.js:24418:41)
at _getNgModuleMetadata (D:\admin-society\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (D:\admin-society\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (D:\admin-society\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (D:\admin-society\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (D:\admin-society\node_modules\@ngtools\webpack\src\plugin.js:212:44)
at _donePromise.Promise.resolve.then.then.then.then.then (D:\admin-society\node_modules\@ngtools\webpack\src\plugin.js:448:24)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
webpack: Failed to compile.
ここに私のコードがあります
environment.ts
export const environment = {
production: false,
firebase : {
apiKey: '***************************************',
authDomain: 'ionicadmin-123456.firebaseapp.com',
databaseURL: 'https://ionicadmin-123456.firebaseio.com',
projectId: 'ionicadmin-123456',
storageBucket: 'ionicadmin-123456.appspot.com',
messagingSenderId: '123456789123',
},
};
app.module.ts
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule, // imports firebase/firestore, only needed for database features
AngularFireAuthModule, // imports firebase/auth, only needed for auth features
NgbModule.forRoot(),
ThemeModule.forRoot(),
CoreModule.forRoot(),
],
bootstrap: [AppComponent],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
],
})
committee.component.ts
import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'ngx-chartjs',
styleUrls: ['./committee.component.scss'],
templateUrl: './committee.component.html',
})
export class CommitteeComponent {
items: Observable<any[]>;
constructor(db: AngularFirestore) {
this.items = db.collection('items').valueChanges();
}
}
committee.component.html
<ul>
<li *ngFor="let item of items | async">
{{ item.name }}
</li>
</ul>
Firebase 4.8.1はTypeScriptの型付けを変更したようです。
現時点では、次を実行してfirebase 4.8.0に戻すことができます。
npm uninstall firebase
npm install [email protected]
rm -rf node_modules
npm install
Angular4 +以降、これは異なる動作をします。以下は、firebaseをangularプロジェクトに使用する手順です:
$ npm install --save firebase @angular/fire -f
次に、firebaseの構成用の定数を作成してエクスポートするか、Angularプロジェクトで環境/environment.tsファイルを開き、環境オブジェクト内にfirebaseConfigオブジェクトを追加します。環境に応じて変化する可能性があるため、2番目のソリューションを好みます:
export const environment = {production:false、firebaseAppConfig:{...}
次のように、必要なすべてのモジュールをカスタムモジュールにインポートします。
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
@NgModule({
// [...]
imports: [
// [...]
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule
],
詳細については、Firebaseを使用してangularプロジェクトを作成する場合は、このリンクの指示に従ってください: Angular Firestore Tutorial
このような環境コード
export const environment = {
production: false,
firebase : {
apiKey: '***************************************',
authDomain: 'ionicadmin-123456.firebaseapp.com',
databaseURL: 'https://ionicadmin-123456.firebaseio.com',
projectId: 'ionicadmin-123456',
storageBucket: 'ionicadmin-123456.appspot.com',
messagingSenderId: '123456789123',
}
};