Angular2 / angular-cli：尝试使用

时间：2017-03-22 09:21:20

标签： angular angular-cli angular2-aot

我正在尝试使用最新版本的angular-cli v1.0.0-rc.2构建一个Angular2应用程序。当使用--prod开关构建时，此版本的angular-cli默认使用默认编译。由于某些未知原因，当我尝试使用--prod进行编译时，事情总是出错。我可以在使用--aot = false参数关闭aot时编译，但我想使用aot构建，因为我的应用程序在没有--aot的情况下部署时运行有点慢。我的错误，package.json和tsconfig.json如下。知道这里可能出现什么问题，以及如何解决这个问题？

更新1

似乎我的登录组件无法解析在登录组件的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 { }

0 个答案:

没有答案
相关问题
最新问题