所以我试图在Firebase和Heroku上构建和部署我的Angular 4应用程序,但我遇到了如下错误:
错误在/用户/.../...(57,49(:财产"火力基地"不存在在类型"{生产:布尔值;}"上。
当我运行 ng build --prod
并且我的部署服务器工作正常时,就会发生这种情况。这是我的app.module.ts文件,供参考:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { Ng2ScrollimateModule } from 'ng2-scrollimate';
import { Ng2PageScrollModule } from 'ng2-page-scroll';
import { HttpModule } from '@angular/http';
import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { LogoComponent } from './logo/logo.component';
import { InfoComponent } from './info/info.component';
import { AboutComponent } from './about/about.component';
import { DividerComponent } from './divider/divider.component';
import { ProficienciesComponent } from './proficiencies/proficiencies.component';
import { ProficiencyComponent } from './proficiency/proficiency.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { ProjectComponent } from './project/project.component';
import { ResumeComponent } from './resume/resume.component';
import { FooterComponent } from './footer/footer.component';
import { ContactComponent } from './contact/contact.component';
import { LoadingComponent } from './loading/loading.component';
@NgModule({
declarations: [
AppComponent,
LogoComponent,
InfoComponent,
AboutComponent,
DividerComponent,
ProficienciesComponent,
ProficiencyComponent,
PortfolioComponent,
ProjectComponent,
ResumeComponent,
FooterComponent,
ContactComponent,
LoadingComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
Ng2ScrollimateModule,
Ng2PageScrollModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
环境产品
export const environment = {
production: true
};
环境.ts
export const environment = {
production: true,
firebase: {
apiKey: '...',
authDomain: 'project.firebaseapp.com',
databaseURL: 'https://project.firebaseio.com',
projectId: 'project',
storageBucket: 'project.appspot.com',
messagingSenderId: '...',
},
};
在搜索StackOverflow和GitHub可能的解决方案之后,似乎没有开发人员遇到过这个确切的错误并发布了他们的发现,所以我想知道是否有人知道如何解决这个问题。提前非常感谢!
当您运行时ng build --prod
angular-cli将使用environment.prod.ts
文件,而您的environment.prod.ts
文件environment
变量没有firebase
字段,因此您会收到异常。
将字段添加到 environment.prod.ts
export const environment = {
production: true,
firebase: {
apiKey: '...',
authDomain: 'project.firebaseapp.com',
databaseURL: 'https://project.firebaseio.com',
projectId: 'project',
storageBucket: 'project.appspot.com',
messagingSenderId: '...',
},
};
我的方法是将公共环境对象与产品 1 合并。这是我的环境.prod.ts:
import { environment as common } from './environment';
export const environment = {
...common,
production: true
};
因此,通用环境对象充当所有其他环境的可覆盖默认值。
我讨厌代码
中的重复项因此,让我们创建一个单独的文件,名为 environments/firebase.ts
包含内容
export const firebase = {
//...
};
用法
import {firebase} from '../environments/firebase';
//...
AngularFireModule.initializeApp(firebase)
对我来说一切都清楚了
我得到了同样的错误,因为我把"firebase"拼写错误为"firebas">
火鲈:{ apiKey: "...", 授权域:"project.firebaseapp.com", 数据库网址: "https://project.firebaseio.com", 项目编号: "项目", storageBucket: "project.appspot.com", 消息发送者 ID:"..." }
确保firebase
和:
之间没有间隙。
也就是说,它应该是firebase:
的,而不是firebase :
的。