标签: angular-cli

经过升级我Angular2项目Angular4使用:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

我使用时收到以下错误ng build --prod:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'D:\workspace\MyProject\src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

没有--prod旗帜,我没有任何错误.stackoverflow上有一些类似的问题,但没有任何可接受的答案,与Angular4的升级无关.这是我的package.json:

{
  "name": "MyProject",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": …

我在尝试构建我的角度2项目时遇到了问题.当我调用时ng build,构建器将路由路径验证为模块,并说它不存在:

ERROR in无法解析"C:/Users/bruno.martins/git/disciples-ui/src/app/app.module.ts"中的"app/membros/membro.module".

C:\Users\bruno.martins\git\disciples-ui>npm install

> disciples-ui@0.0.0 postinstall C:\Users\bruno.martins\git\disciples-ui
> ng build --prod

As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated …

更新我的角度/ cli后.我收到无效的主机头.我可以通过修改来解决它Server.js file under line no: 402 to if(this.disableHostCheck) return true; to return true但是还有其他方法可以解决这个问题,因为node_module中的更改不是好方法.

我甚至尝试过ng serve --host 0.0.0.0我仍然有同样的问题.

注意:我使用docker容器进行部署.

任何帮助都非常感谢.

嗨我过去几天一直在努力学习Angular,我想使用ngHtmlBind或ngInclude指令.但是,当我使用它并提供我的应用程序时,控制台会说:

未捕获错误:模板解析错误:
无法绑定到'ngBindHtml',因为它不是'div'的已知属性.

未捕获错误:模板解析错误:
无法绑定到'ngInclude',因为它不是'div'的已知属性.

我在阅读文档时感到茫然.也许是因为我使用CLI并且指令被不同地调用(即代替'ng-for',它被实现为*ngFor)？

我尝试了ngFor和ngIf并且它们正常工作.但是当我使用ngBindHtml和ngInclude时,错误就出现了.

这是我的代码:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SonglistComponent } from './songlist/songlist.component';
import { ChartComponent } from './chart/chart.component';

import { DataService } from './data.service';
import { SafePipe } from './safe.pipe';

@NgModule({
  declarations: [
    AppComponent,
    SonglistComponent,
    ChartComponent,
    SafePipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

chart.component.html

<div class="chart" *ngFor="let song of dataService.currentPlaylist"> …

我在使用Angular CLI提供的测试框架设置时,在角度单元测试中触发md-checkbox的"更改"事件时遇到问题.

我有一个简单的组件:

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  checkedValue = 'false';

  result = false;

  checkValueChange(event) {
    console.log('CheckBox clicked: ' + event.checked);
    this.result = true;
  }
}

模板:

<md-checkbox [checked]="true" [(ngModel)]="checkedValue" (change)="checkValueChange($event)">Check Box</md-checkbox>

以下是我试图通过模拟点击发出更改事件的单元测试代码:

测试代码:

import {TestBed, async, fakeAsync} from '@angular/core/testing';
import { AppComponent } from './app.component';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MaterialModule} from '@angular/material';
import {FormsModule} from '@angular/forms';
import {tick} from '@angular/core/testing'; …

我最近表演了一个

npm更新

命令并下拉Angular版本4.2.6.但是,当我跑

建立

我收到了一堆与@ angular/animations相关的构建错误.

见下文:

[alobban@linuxlaptop-advfrtsvr-advantagefreight-com afngine-ng2]$ ng build
Hash: eeeb38b2753a21366397                                                               
Time: 34119ms
chunk    {0} main.bundle.js, main.bundle.js.map (main) 870 kB {4} [initial] [rendered]
chunk    {1} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {5} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 714 kB {5} [initial] [rendered]
chunk    {3} scripts.bundle.js, scripts.bundle.js.map (scripts) 471 kB {5} [initial] [rendered]
chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.66 MB [initial] [rendered]
chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in /usr/share/nginx/afngine-ng2/node_modules/@angular/platform-browser/animations/src/animation_builder.d.ts (8,10): Module '"/usr/share/nginx/afngine-ng2/node_modules/@angular/animations/animations"' has …

我很沮丧,因为我运行了构建,但它不会在项目文件夹中生成dist文件夹.我对其他项目没有任何问题.奇怪的是,编译器不会给出任何错误.有人可以检查我的项目并告诉原因吗？ https://github.com/vugar005/Report 亲切的问候

假设我们有Angular 4+应用程序需要位于不同环境中的不同相对根URL,即:

• http://localhost:4200/index.html 发展
• http://prod.server.com/angular-app/index.html 用于生产

最有可能的是,我们希望在我们的environment.x.ts文件中有这个选项:

export const environment = {
    production: false,
    appRoot: "/"
};

export const environment = {
    production: true,
    appRoot: "/angular-app/"
};

我们如何配置Angular构建/运行时基础结构以根据environment.x.ts文件中的此选项自动调整应用程序？

更新: 由于我通过Visual Studio构建/发布系统(模板)间接使用Angular CLI工具链,所以最好有一个完全基于Angular CLI + *.json/ *.ts/ *.js文件的解决方案.这样,它适用于可以使用Angular CLI的任何构建系统.

我想知道两者之间是否存在差异

ng build --prod

和

ng build --prod --aot

文件大小对我来说保持不变.是--aot,如果你指定自动选择--prod？

我刚刚在npm上安装了bootstrap4，font awesome和ng-bootstrap，并且正在尝试一些ng-bootstrap演示代码。什么都没用。

第一次发布，对Angular世界来说还很陌生。如果我没有以正确的格式发布此内容，或者在错误的“区域”中提出问题，请放轻松。

我只是想了解ng-bootstrap的用法。

app.module.ts：

  import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    import { RouterModule } from '@angular/router';
    import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

    import { AppComponent } from './app.component';
    import { CustomersModule } from './customers/customers.module';
    import { WelcomeComponent } from './welcome/welcome.component';

    @NgModule({
     declarations: [
        AppComponent,
        WelcomeComponent
     ],
     imports: [
        BrowserModule,
        HttpClientModule,
        AngularFontAwesomeModule,
        RouterModule.forRoot([
            { path: 'home', component: WelcomeComponent },
            { path: '', …