当前命令: ng serve --host --public $IP:$PORT

我的网站上的结果:

无效的主机标头

可以使用angular cli生成服务,并在app.module.ts中将其作为提供程序添加到一个步骤中,或者使用ng g service命令中的特殊选项？

执行时:

$ ng g service services/backendApi
installing service
  create src/app/services/backend-api.service.spec.ts
  create src/app/services/backend-api.service.ts
  WARNING Service is generated but not provided, it must be provided to be used

在它旁边,(并根据警告消息)我通常使用文本编辑器将它添加到app.module.ts上的提供程序部分:

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ....
  ],
  providers: [BackendApiService],
  bootstrap: [AppComponent]
})

只需一步就可以实现自动化吗？

我用Angular CLI创建了一个角度项目:1.6.3节点:9.4.0 OS:linux x64版本.但是当想要使用命令ng serve运行我的角度应用程序时,则获取此错误

找不到模块'@ angular-devkit/core'.

是否可以向Angular 2添加全局CSS文件？目前,我有许多具有相同按钮样式的不同组件 - 但每个组件都有自己的CSS文件和样式.这对变化感到沮丧.

我在Stack Overflow上的某个地方读到了:

import { ViewEncapsulation } from '@angular/core'; //add this

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None            //add this
})

所以我在根组件中添加了ViewEncapsulation行,然后将CSS样式添加到根应用程序CSS(app.component.css)并从单个组件CSS文件中删除了CSS样式,并且它不起作用.

当然有一种方法可以添加全局CSS文件？我是否需要向各个组件添加内容以使其访问全局CSS文件？

我正在开展一个Angular 2项目.现在尝试使用以下方法在当前项目中安装Angular CLI

npm install --save-dev @angular/cli@latest
npm install

问题是在运行时ng serve我收到错误

The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
    at Object.<anonymous> (/myng2project/node_modules/@ngtools/webpack/src/index.js:14:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/myng2project/node_modules/@angular/cli/tasks/eject.js:10:19)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

之前我使用angular-cli@1.0.0-beta.10,现在我更新到angular-cli @ webpack beta.11.经过大量的自定义更改,我得到了它的工作.

唯一的问题是,现在我无法使用webstorm和chrome调试器调试我的角度应用程序,因为我没有使用ng服务获取任何ts文件.使用angular-cli@1.0.0-beta.10,使用Jetbrains插件调试我的应用程序非常容易.

如何使用Web服务调试我的角度应用程序和使用ng服务的Chrome调试器？

我试过运行npm install -g angular-cli

我也尝试将它添加到PATH下的环境变量:(C:\ Users\Administrator\AppData\Roaming \npm \node_modules\angular-cli\bin \ng),但也没有成功.

我将我的项目从angular-5.x升级到angular-6.x并且它开始给出以下错误,甚至创建虚拟全局变量也不起作用,如此处给出Angular 6 Auth0 - 全局未定义

错误如下:

Uncaught ReferenceError: global is not defined
    at Object../node_modules/has-binary2/index.js (index.js:10)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/socket.io-parser/index.js (index.js:8)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/socket.io-client/lib/index.js (index.js:7)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app4pc/apiConnection/services/ApiConnectionServer.ts (auth.interceptor.ts:8)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app4pc/apiConnection/toServer.module.ts (ApiConnectionServer.ts:11)
    at __webpack_require__ (bootstrap:81)

解决这个后,我得到以下错误:

Uncaught ReferenceError: process is not defined
    at Object../node_modules/process-nextick-args/index.js (index.js:3)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:26)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/readable-stream/readable-browser.js (readable-browser.js:1)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/simple-peer/index.js (index.js:7)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/util/services/call.services.ts (notification.service.ts:12)
    at __webpack_require__ (bootstrap:81) …

Angular的文档告知我应该在Angular应用程序构建中使用--base-href参数进行生产,当它将部署在服务器的子文件夹中时:

如果将文件复制到服务器子文件夹中,请附加构建标志--base-href并进行相应设置.

例如,如果index.html位于服务器/my/app/index.html上,请将基本href设置为这样.

https://angular.io/guide/deployment

但是,angular-cli具有--deploy-url参数.工具文档将其描述为:

将部署文件的URL.

https://github.com/angular/angular-cli/wiki/build

我已经看到当应用程序要部署在服务器的子文件夹中时使用--base-href的--deploy-url的解决方案.

这个问题

angular-cli工具的--base-href和--deploy-url参数有什么区别？我什么时候应该使用每一个？

我正在尝试创建一个Angular 6库并在Angular 6应用程序中使用它.我把它归结为最小的测试用例.(更新:自从Angular 7出来以后,我也试过了.)

ng new workspace # accept the defaults
ng new product # accept the defaults
cd workspace 
ng generate library widgets 
ng build --prod widgets # leave out "--prod" for Angular 7
cd ../product
ng build

一个名为"workspace"的应用程序托管一个名为"widgets"的库.另一个名为"产品"的应用程序是独立的 到目前为止,一切都很好.

现在让我们尝试使用"产品"应用程序中的"小部件"库.打开product/src/app/app.module.tsCLI生成的文件.添加两行,如下所示.

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

import { AppComponent } from './app.component';
import { WidgetsModule } from '../../../workspace/dist/widgets'; //  added

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WidgetsModule // …