标签: angular-cli

angular-cli在哪里是webpack.config.js文件 - 新的angular6不支持ng弹出

更新:2018年12月(参见'Aniket'回答)

使用Angular CLI 6,您需要使用构建器,因为不推荐使用ng eject,很快就会在8.0中删除它

更新:2018年6月:Angular 6不支持ng弹出**

更新:2017年2月:使用ng弹出

更新:2016年11月:angular-cli现在只使用webpack.您只需要使用npm install -g angular-cli正常安装."我们改变了beta.10和beta.14之间的构建系统,从SystemJS到Webpack."但实际上我只使用angular-cli来结构和文件夹,然后再使用webpack配置

我用这个安装了角度cli:

npm install -g angular-cli@webpack
Run Code Online (Sandbox Code Playgroud)

当我使用angular1和web pack时,我曾经修改过"webpack.config.js"文件来执行所有的任务和插件,但我没有看到使用angular-cli创建的这个项目是谁工作的.这是魔法?

当我这样做时,我看到Webpack正在工作:

ng serve 

"Version: webpack 2.1.0-beta.18"
Run Code Online (Sandbox Code Playgroud)

但我不明白angular-cli配置的工作方式......

webpack angular-cli angular

128
推荐指数
4
解决办法
9万
查看次数

使用Angular-CLI为特定模块创建组件

我开始使用angular-cli,我已经阅读了很多内容,以便找到关于我想做什么的答案......没有成功,所以我来到这里.

有没有办法为新模块创建组件?

例如: ng g module newModule

ng g component newComponent (如何将此组件添加到newModule ??)

因为angular-cli默认行为是将所有新组件放入其中app.module.我想选择我的组件的位置,以便我可以创建单独的模块,并且不会将所有组件放在里面app.module.使用angular-cli可以做到这一点,还是我必须手动执行此操作?

typescript angular-cli angular

127
推荐指数
13
解决办法
11万
查看次数

在Angular 2,4,5,6中实现插件架构/插件系统/可插拔框架

更新5/24/2018:我们现在从我的原始帖子中获得了+3版本的Angular,但仍然没有最终可行的解决方案.Lars Meijdam(@LarsMeijdam)提出了一个有趣的方法,当然值得一看.(由于专有问题,他不得不暂时删除他最初发布样本的GitHub存储库.但是,如果您需要副本,可以直接给他发消息.请参阅下面的评论以获取更多信息.)

Angular 6中最近的架构变化确实使我们更接近解决方案.此外,Angular Elements(https://angular.io/guide/elements)提供了一些组件功能 - 尽管不是我在本文中最初描述的内容.

如果来自令人惊奇的Angular团队的任何人碰巧碰到了这个,请注意,似乎还有很多其他人也对这个功能非常感兴趣.积压可能值得考虑.


我想实现在一个可插拔(插件)的框架Angular 2,Angular 4,Angular 5,或Angular 6应用程序.

(我开发这个可插拔框架的具体用例是我需要开发一个微型内容管理系统.由于这里不一定详述的一些原因,Angular 2/4/5/6它几乎完全适合该系统的大多数需求.)

通过可插拔框架(或插件架构),我特别指的是一个允许第三方开发人员通过使用可插拔组件创建或扩展主应用程序功能的系统,而无需直接访问或了解主应用程序的源代码或内部运作.

(关于" 没有直接访问或了解应用程序的源代码或内部工作 "的措辞是一个核心目标.)

可插入框架的示例包括常见的内容管理系统,如WordPressDrupal.

理想情况(与Drupal一样)是简单地将这些可插入组件(或插件)放入文件夹,让应用程序自动检测或发现它们,让它们神奇地"工作".以某种热插拔方式发生这种情况,意味着在应用程序运行时,这将是最佳的.

我目前正在尝试确定以下五个问题的答案(在您的帮助下).

  1. 实用性:Angular 2/4/5/6应用程序的插件框架是否实用?(到目前为止,我还没有找到任何实用的方法来创建一个真正的可插拔框架Angular2/4/5/6.)
  2. 预期的挑战:在为Angular 2/4/5/6应用程序实现插件框架时可能会遇到哪些挑战?
  3. 实施策略:可以采用哪些具体技术或策略来实现Angular 2/4/5/6应用程序的插件框架?
  4. 最佳实践:Angular 2/4/5/6应用程序实现插件系统的最佳实践是什么?
  5. 替代技术: 如果插件框架在应用程序中实用Angular 2/4/5/6,那么相对等效的技术(例如React)可能适用于现代高反应性Web应用程序

一般来说,使用Angular …

plugins angular-cli angular-universal angular

123
推荐指数
5
解决办法
2万
查看次数

angular-cli服务器 - 如何指定默认端口

ng serve命令中使用angular-cli ,如何指定默认端口,这样我--port每次都不需要手动传递标志?

我想从4200端口更改.

angular-cli angular

119
推荐指数
4
解决办法
10万
查看次数

Angular2 CLI巨大的供应商包:如何提高prod的大小?

我有一个简单的应用程序,初始化angular-cli.

它显示相对于3条路线的一些页面.我有3个组件.在这个页面的一个上,我使用lodash和Angular2 Http模块来获取一些数据(使用Rxjs Observables,map和subscribe).我使用简单的ngFor显示这些元素.

但是,尽管我的应用程序非常简单,但我得到了一个巨大的(在我看来)捆绑包和地图.我没有谈论gzip版本,但在gzipping之前的大小.这个问题只是一般性的建议问题.

一些测试结果:

建立

哈希:8efac7d6208adb8641c1时间:10129ms chunk {0} main.bundle.js,main.bundle.map(main)18.7 kB {3} [initial] [rendered]

chunk {1} styles.bundle.css,styles.bundle.map,styles.bundle.map(styles)155 kB {4} [initial] [rendered]

chunk {2} scripts.bundle.js,scripts.bundle.map(scripts)128 kB {4} [initial] [rendered]

chunk {3} vendor.bundle.js,vendor.bundle.map(vendor)3.96 MB [initial] [rendered]

chunk {4} inline.bundle.js,inline.bundle.map(inline)0 bytes [entry] [rendered]

等待:10Mb供应商捆绑包用于这样一个简单的应用程序?

ng build --prod

哈希:09a5f095e33b2980e7cc时间:23455ms chunk {0} main.6273b0f04a07a1c2ad6c.bundle.js,main.6273b0f04a07a1c2ad6c.bundle.map(main)18.3 kB {3} [initial] [rendered]

chunk {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css,styles.bfdaa4d8a4eb2d0cb019.bundle.map,styles.bfdaa4d8a4eb2d0cb019.bundle.map(styles)154 kB {4} [initial] [rendered]

chunk {2} scripts.c5b720a078e5464ec211.bundle.js,scripts.c5b720a078e5464ec211.bundle.map(scripts)128 kB {4} [initial] [rendered]

chunk {3} vendor.07af2467307e17d85438.bundle.js,vendor.07af2467307e17d85438.bundle.map(vendor)3.96 MB [initial] [rendered]

chunk {4} inline.a345391d459797f81820.bundle.js,inline.a345391d459797f81820.bundle.map(inline)0 bytes …

webpack angular-cli angular

118
推荐指数
9
解决办法
8万
查看次数

如何摆脱警告 .ts 文件是 TypeScript 编译的一部分,但未使用

我刚刚将 angular 更新为 latest 9.0.0-next.4。我没有使用路由,但在更新后突然我一直看到这个警告。如何删除此警告

WARNING insrc/war/angular/src/app/app-routing.module.ts是 TypeScript 编译的一部分,但未使用。仅将入口点添加到 tsconfig 中的“文件”或“包含”属性。

包.json

  "dependencies": {
"@angular/animations": "^9.0.0-next.4",
"@angular/cdk": "^8.1.4",
"@angular/common": "^9.0.0-next.4",
"@angular/compiler": "^9.0.0-next.4",
"@angular/core": "^9.0.0-next.4",
"@angular/forms": "^9.0.0-next.4",
"@angular/material": "^8.1.4",
"@angular/platform-browser": "^9.0.0-next.4",
"@angular/platform-browser-dynamic": "^9.0.0-next.4",
"@angular/router": "^9.0.0-next.4",
"@ng-bootstrap/ng-bootstrap": "^5.1.0",
"bootstrap": "^4.3.1",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"ng-image-slider": "^2.0.1",
"panzoom": "^8.1.2",
"rxjs": "~6.5.2",
"tslib": "^1.9.0",
"zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.2",
    "@angular/cli": "^8.3.2",
    "@angular/compiler-cli": "^9.0.0-next.4",
    "@angular/language-service": "^9.0.0-next.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0", …
Run Code Online (Sandbox Code Playgroud)

typescript angular-cli angular

117
推荐指数
9
解决办法
8万
查看次数

Angular Cli错误:serve命令需要在Angular项目中运行,但找不到项目定义

运行时,我得到的问题ng serverng serve --live-reload=true.下面是我在终端上运行这些命令时遇到的问题.

__PRE__

请帮我.我坚持这个问题.

提前致谢.

angular-cli angular angular5

116
推荐指数
8
解决办法
24万
查看次数

升级到Angular4后找不到名称'require'

我想在我的Angular项目中使用Chart.js.在以前的Angular2版本中,我使用'chart.loader.ts'做得很好,它有:

export const { Chart } = require('chart.js');
Run Code Online (Sandbox Code Playgroud)

然后在组件代码中我就是

import { Chart } from './chart.loader';
Run Code Online (Sandbox Code Playgroud)

但升级到cli 1.0.0和Angular 4之后,我收到错误:"找不到名称'require'".

要重现错误:

ng new newapp
cd newapp
npm install chart.js --save
echo "export const { Chart } = require('chart.js');" >> src/app/chart.loader.ts
ng serve
Run Code Online (Sandbox Code Playgroud)

在我的'tsconfig.json'中,我有

"typeRoots": [
  "node_modules/@types"
],
Run Code Online (Sandbox Code Playgroud)

在'node_modules/@types/node/index.d.ts'中有:

declare var require: NodeRequire;
Run Code Online (Sandbox Code Playgroud)

所以我很困惑.

顺便说一句,我经常遇到警告:

[tslint] The selector of the component "OverviewComponent" should have prefix "app"(component-selector)
Run Code Online (Sandbox Code Playgroud)

虽然我在'.angular-cli.json'中设置了"前缀":"".可能是因为从'angular-cli.json'改为'.angular-cli.json'的原因?

angular-cli angular

113
推荐指数
5
解决办法
9万
查看次数

您必须在angular-cli项目中才能在重新安装angular-cli后使用build命令

我在全球安装了最新的angular-cli,我的项目正在成功构建.

在阅读另一个问题的建议解决方案时,(https://github.com/angular/angular-cli/issues/917)我卸载了全局angular-cli并将其安装为dev-dependency.

另一个问题没有解决,所以我卸载了dev-dependency并再次在全球重新安装了angular-cli.现在,当我尝试进行构建时,我收到错误:

您必须在angular-cli项目中才能使用build命令

我的angular-cli版本没有改变.为什么我的项目不被认可为angular-cli项目?

angular-cli

109
推荐指数
11
解决办法
13万
查看次数

如何结束服务或firebase服务

我一直在使用Angular2进行Web开发,并且一直使用Angular2和Firebase来运行本地服务器.在使用Ionic创建服务器时,我无法找到类似于键入quit的命令,因此我每次都必须关闭终端选项卡.有没有办法结束服务器并让我的终端选项卡回来?

谢谢.

firebase firebase-tools angular-cli angular

106
推荐指数
7
解决办法
14万
查看次数