我正在尝试使用最新版本的angular-cli v1.0.0-rc.2构建一个Angular2应用程序。当使用--prod开关构建时，此版本的angular-cli默认使用默认编译。由于某些未知原因，当我尝试使用--prod进行编译时，事情总是出错。我可以在使用--aot = false参数关闭aot时编译，但我想使用aot构建，因为我的应用程序在没有--aot的情况下部署时运行有点慢。我的错误，package.json和tsconfig.json如下。知道这里可能出现什么问题，以及如何解决这个问题？
似乎我的登录组件无法解析在登录组件的html模板中使用的组件。例如我有一个导航组件HTML标记，如果没有注释掉它会触发错误。在我的所有其他模块中，似乎没有编译和导航组件的问题。这是非常奇怪的，我不知道从哪里开始/到底发生了什么，当我注释掉登录模板上使用的导航错误和加载程序组件时，我能够生成一个aot构建...
my error:
MProjects\Angular2\angular2-Web\Retail Mobile>ng build --prod
Hash: c8171fe862aa44c60eea
Time: 27901ms
chunk {0} polyfills.dc48a296046bc6476fcc.bundle.js (polyfills) 231 kB {5} [initial] [rendered]
chunk {1} main.8307471be6f2dfe65f68.bundle.js (main) 538 kB {4} [initial] [rendered]
chunk {2} scripts.a01cf557784923718465.bundle.js (scripts) 226 kB {5} [initial] [rendered]
chunk {3} styles.7ab5f230646211067b47.bundle.css (styles) 122 bytes {5} [initial] [rendered]
chunk {4} vendor.7d41904f4f70bb9de65b.bundle.js (vendor) 2.46 MB [initial] [rendered]
chunk {5} inline.991df5c87146e041b5c5.bundle.js (inline) 0 bytes [entry] [rendered]
WARNING in ./src/$$_gendir/app/app.module.ngfactory.ts
601:42-58 "export 'Location' (imported as 'import1') was not found in '../../app/app.module'
WARNING in ./src/$$_gendir/app/app.module.ngfactory.ts
826:23-39 "export 'Location' (imported as 'import1') was not found in '../../app/app.module'
ERROR in ./src/$$_gendir/app/components/login/login.component.ngfactory.ts
Module not found: Error: Can't resolve '../loader/loader.component.ngfactory' in 'C:\BRMProjects\Angular2\angular2-Web\Retail Mobile\src\$$_gendir\app\components\login'
@ ./src/$$_gendir/app/components/login/login.component.ngfactory.ts 40:0-65
@ ./src/$$_gendir/app/app.module.ngfactory.ts
@ ./src/main.ts
@ multi ./src/main.ts
ERROR in ./src/$$_gendir/app/components/login/login.component.ngfactory.ts
Module not found: Error: Can't resolve '../error/error.component.ngfactory' in 'C:\BRMProjects\Angular2\angular2-Web\Retail Mobile\src\$$_gendir\app\components\login'
@ ./src/$$_gendir/app/components/login/login.component.ngfactory.ts 42:0-63
@ ./src/$$_gendir/app/app.module.ngfactory.ts
@ ./src/main.ts
@ multi ./src/main.ts
ERROR in ./src/$$_gendir/app/components/goods-received/goods-received.component.ngfactory.ts
Module not found: Error: Can't resolve '../error/error.component.ngfactory' in 'C:\BRMProjects\Angular2\angular2-Web\Retail Mobile\src\$$_gendir\app\components\goods-received'
@ ./src/$$_gendir/app/components/goods-received/goods-received.component.ngfactory.ts 45:0-63
@ ./src/$$_gendir/app/app.module.ngfactory.ts
@ ./src/main.ts
@ multi ./src/main.ts
ERROR in ./src/$$_gendir/app/components/login/login.component.ngfactory.ts
Module not found: Error: Can't resolve '../navigation/navigation.component.ngfactory' in 'C:\BRMProjects\Angular2\angular2-Web\Retail Mobile\src\$$_gendir\app\components\login'
@ ./src/$$_gendir/app/components/login/login.component.ngfactory.ts 44:0-73
@ ./src/$$_gendir/app/app.module.ngfactory.ts
@ ./src/main.ts
@ multi ./src/main.ts
ERROR in ./src/$$_gendir/app/components/goods-received/goods-received.component.ngfactory.ts
Module not found: Error: Can't resolve '../navigation/navigation.component.ngfactory' in 'C:\BRMProjects\Angular2\angular2-Web\Retail Mobile\src\$$_gendir\app\components\goods-received'
@ ./src/$$_gendir/app/components/goods-received/goods-received.component.ngfactory.ts 47:0-73
@ ./src/$$_gendir/app/app.module.ngfactory.ts
@ ./src/main.ts
@ multi ./src/main.ts
ERROR in ./src/$$_gendir/app/Components/loader/loader.component.ngfactory.ts
Module not found: Error: Can't resolve './spinner/circle.component.ngfactory' in 'C:\BRMProjects\Angular2\angular2-Web\Retail Mobile\src\$$_gendir\app\Components\loader'
@ ./src/$$_gendir/app/Components/loader/loader.component.ngfactory.ts 22:0-65
@ ./src/$$_gendir/app/Components/settings/settings.component.ngfactory.ts
@ ./src/$$_gendir/app/app.module.ngfactory.ts
@ ./src/main.ts
@ multi ./src/main.ts
my package.json:
{
"name": "Retail-Mobile",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^2.4.0",
"@angular/compiler": "^2.4.0",
"@angular/core": "^2.4.0",
"@angular/forms": "^2.4.0",
"@angular/http": "^2.4.0",
"@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0",
"@angular/router": "^3.4.0",
"core-js": "^2.4.1",
"moment": "^2.17.1",
"rxjs": "^5.1.0",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@angular/cli": "1.0.0-rc.2",
"@angular/compiler-cli": "^2.4.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"bootstrap": "3.3.7",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"jquery": "3.1.1",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.0.0"
}
}
my tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
]
}
}
my tsconfig.app.json:
{
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es2016",
"dom"
],
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
my login.component.html:
<div class="container-fluid">
<navigation-component></navigation-component>
<div class="row topRow" *ngIf="!busy && !error">
<div class="col-md-4 col-md-push-4">
<div class="page-header">
<h1 class="jumbotron">Log in</h1>
</div>
<form role="form" [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
<input type="text" class="form-control" [formControl]="loginForm.controls['userName']" placeholder="User Name">
<input type="password" class="form-control" [formControl]="loginForm.controls['password']" placeholder="password">
<button class="btn btn-lg btn-block" [disabled]="!loginForm.valid"><span class="glyphicon glyphicon-log-in"></span> Log In</button>
</form>
</div>
</div>
<loader [loaderMessage]="loaderMessage" *ngIf="busy"></loader>
<error [errorMessage]="errorMessage" (dismiss)="dismissError($event)" *ngIf="error"></error>
</div>
my login.component.ts:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { UserModel } from '../../models/user.model';
import { RestService } from '../../services/rest.service';
import { LocalStorageService } from '../../services/local-storage.service';
import { UserService } from '../../services/user.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
user: UserModel = new UserModel('', '', '');
busy: boolean = false;
loaderMessage: string;
error: boolean = false;
errorMessage: string;
constructor(private fb: FormBuilder, private restService: RestService, private userService: UserService, private router: Router, private localStorageService: LocalStorageService) {
this.loginForm = fb.group({
'userName':['', Validators.required],
'password':['', Validators.required]
});
}
login(val: any) {
this.user.UserName = val.userName;
this.user.Password = val.password;
this.user.PasswordHash = '';
this.loaderMessage = "Logging in";
this.busy = true;
this.restService.login(this.user)
.subscribe(
(res) => {
this.busy = false;
console.log(res);
if (res.ResponseCode !== 0) {
this.errorMessage = res.CustomError;
this.error = true;
} else {
this.userService.setAuthentication(res.SessionUserID);
console.log(res.SessionUserID);
this.router.navigate(['home']);
this.loginForm.reset();
}
},
(res) => {
console.log(res);
this.errorMessage = "Technical error...";
this.error = true;
this.busy = false;
});
}
dismissError(event: any) {
this.error = false;
}
ngOnInit() {
this.restService.init('1');
if (this.userService.isAuthenticated()) {
this.router.navigate(['home']);
}
}
}
my loader.component.html:
<div class="row loading" >
<sk-circle></sk-circle>
<h4>{{loaderMessage}}</h4>
</div>
my loader.component.ts:
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
@Input() loaderMessage: string;
constructor() { }
ngOnInit() {
}
}
my app.mocule.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { CircleComponent } from './components/loader/spinner/circle.component';
import {APP_BASE_HREF} from '@angular/common';
import { StringToDatePipe } from './pipes/string-to-date.pipe';
import { ProductComponent } from './Components/product/product.component';
import { CheckBarcodesComponent } from './Components/check-barcodes/check-barcodes.component';
import { HomeComponent } from './Components/home/home.component';
import { NavigationComponent } from './Components/navigation/navigation.component';
import { SettingsComponent } from './Components/settings/settings.component';
import { StockTransactionItemComponent } from './Components/stock-transaction-item/stock-transaction-item.component';
import { StockTakeComponent } from './Components/stock-take/stock-take.component';
import { LoaderComponent } from './Components/loader/loader.component';
import { ErrorComponent } from './Components/error/error.component';
import { GoodsReceivedComponent } from './components/goods-received/goods-received.component';
import { LoginComponent } from './components/login/login.component';
import { RestService } from './services/rest.service';
import { LocalStorageService } from './services/local-storage.service';
import { UserService } from './services/user.service';
import { AppRoutingModule } from './app.routing';
import { StatusComponent } from './Components/status/status.component';
@NgModule({
declarations: [
AppComponent,
ProductComponent,
CheckBarcodesComponent,
HomeComponent,
NavigationComponent,
SettingsComponent,
StockTransactionItemComponent,
StockTakeComponent,
CircleComponent,
LoaderComponent,
GoodsReceivedComponent,
ErrorComponent,
StatusComponent,
LoginComponent,
StringToDatePipe
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
AppRoutingModule
],
providers: [
RestService,
LocalStorageService,
UserService,
Location,
//{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: APP_BASE_HREF, useValue: '/brmservices/webenquiry/ng2/dist/' }
],
bootstrap: [AppComponent]
})
export class AppModule { }