标签: angular-cli

什么是Angular2中静态文件的默认路径?

我目前正在开发一个小型的Angular2项目.在我的情况下,我必须将一些请求(例如"/ faq","/ aboutus")重新路由回我的旧后端服务器,以获得一些服务器端呈现的百万美元模板.因此我使用内置代理重新路由到我的后台服务器.遗憾的是,由于一些奇怪的原因,它只服务于没有任何脚本样式图像html文件.(我使用angular-cli创建我的项目结构)

这就是为什么我想将这些静态文件添加到我的angular2文件夹,但我找不到正确的位置,使其可用于我的应用程序.有没有其他人知道如何正确地将这些文件放在项目结构中?

在此先感谢您的帮助

static file thymeleaf angular-cli angular

31
推荐指数
1
解决办法
3万
查看次数

ng test和ng e2e之间的真正区别是什么?

我担心有人会提出我的问题,但我找不到令人满意的问题(也许是因为我在Angular 2+世界中非常有限,我理解错了).

据我所知,在完成了几个Hello World之后我很难理解,很少有YouTube演示观看:

ng测试:

  • 你用Jasmine语言编写测试
  • 您可以使用Karma使用许多浏览器测试您的测试
  • 您执行单元或集成测试
  • 所有xxx.compnent.spec.ts运行,并在浏览器中显示类似于JUnit的最终报告

ng e2e:

  • 你用Jasmine语言编写测试
  • 您可以使用Karma使用许多浏览器测试您的测试
  • 您在编写嵌套用户事件时编写测试

    eg. page.navigateTo();
    page.getParagraphText()
      .then(msg => expect(msg).toEqual('Welcome to app!!'))
      .then(msg => expect(msg).toEqual('xxx'))
      .then(done, done.fail);
    
    Run Code Online (Sandbox Code Playgroud)
  • 您使用量角器执行端到端测试主要是在部署应用程序后的一种预生产环境

  • 触发e2e文件夹下的测试,并在命令行控制台中打印结果

Theoracly说,第二个是特定的端到端,其重点是模拟最终用户完成的整个流程.

希望,直到这里是正确的,我想知道幕后发生了什么真正使他们与众不同.我不想比较哪个更好但是我肯定错过了一些点,因为我使用完全相同的想法创建了一些测试,并且我通过ng测试触发了它.

例如:

...

it('should display the modal when `create Paste` is clicked', () => {

    let createPasteButton = fixture.debugElement.query(By.css("button"));
    //create a spy on the createPaste  method
    spyOn(component,"createPaste").and.callThrough();

    //triggerEventHandler simulates a click event on the button object
    createPasteButton.triggerEventHandler('click',null);

    //spy checks whether the method was called
    expect(component.createPaste).toHaveBeenCalled();
    fixture.detectChanges();
    expect(component.showModal).toBeTruthy("showModal should …
Run Code Online (Sandbox Code Playgroud)

jasmine protractor karma-jasmine angular-cli angular

31
推荐指数
1
解决办法
9204
查看次数

ng添加<package name>与npm install <package name>之间的区别在角度6中

随着Angular6的发布,他们增加了一个新的命令添加.任何人都可以告诉我现有command npm install <package>和现有的区别ng add <package>

npm angular-cli angular angular6

31
推荐指数
2
解决办法
1万
查看次数

在Angular CLI项目中找不到源文件

嗨,我的项目中有这个文件夹 文件夹 但是当我跑步时,我得到了这个错误 错误

有什么好主意吗?

问候

angular-cli angular

31
推荐指数
4
解决办法
2万
查看次数

此版本的 CLI 仅与 Angular 版本 ^13.0.0 兼容,但找到了 Angular 版本 12.2.13

我的Ionic项目一个月前运行良好。今天,当我尝试ionic serve或 时ionic build,出现以下错误:

在此输入图像描述

哪个 CLI 版本与 Angular 版本 12.2.13 兼容?如果你真的想知道我为什么问这个问题,你可以进一步准备。

所以我按照 Angular 官方网站上的建议升级到 Angular 13,我使用了以下命令:npm @angular/cli@13 update @angular/core@13 @angular/cli@13

该路线要求我将 Node.js 升级到版本 16(最新、当前)。将 Node.js 升级到 v16 后,我重新尝试升级到 Angular 13,在此过程中,由于不支持的依赖项等原因,安装失败/停止。

我用谷歌搜索了大多数解决方案,进行了尝试,最后得到了一个项目,其中我的所有插件都找不到,等等。因此,我通过将 Node.js v16 卸载到 v12 来反转上述过程,删除 npm、node_modules文件夹,现在我又回到了图中出现以下错误的位置。

这是我的开发环境ionic info

在此输入图像描述

这是我的package.json文件的副本:

    "dependencies": {
    "@angular/common": "~12.2.8",
    "@angular/core": "~12.2.8",
    "@angular/forms": "~12.2.8",
    "@angular/platform-browser": "~12.2.8",
    "@angular/platform-browser-dynamic": "~12.2.8",
    "@angular/router": "~12.2.8",
    "@babel/compat-data": "^7.8.0",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/call-number": "^5.36.0",
    "@ionic-native/camera": "^5.23.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/device": "^5.36.0",
    "@ionic-native/file": …
Run Code Online (Sandbox Code Playgroud)

node.js ionic-framework angular-cli angular

31
推荐指数
4
解决办法
16万
查看次数

如何查找 Angular Invalid version 15.2-15.3 错误?

我使用 Angular CLI 13.0.4 创建了一个新的 Angular 应用程序。它创建了一个 Angular 应用程序版本 ~13.0.0。当我使用该命令时ng build,出现以下错误:

./node_modules/css-loader/dist/runtime/api.js - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

./node_modules/css-loader/dist/runtime/noSourceMaps.js - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
Run Code Online (Sandbox Code Playgroud)

这些是我使用的不同版本:

在此输入图像描述

我应该怎么做才能修复这个错误?

------ 更新 2022 年 3 月 2 日 ------

browserlist文件的内容:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers …
Run Code Online (Sandbox Code Playgroud)

angular-cli

31
推荐指数
5
解决办法
3万
查看次数

如何在离线时安装npm包?

我正在离线网络工作,并希望使用npm安装angular-cli.我有一个angular-cli的zip文件,并使用最新的节点和npm版本.我使用命令:npm install ./angular-cli-master从文件夹安装angular-cli.但我一直得到这个错误告诉我,我没有互联网连接(这没关系).那么如何使用我从github下载的zip在离线时安装这个angular-cli?

谢谢你的帮助

node.js npm visual-studio-code angular-cli

30
推荐指数
3
解决办法
6万
查看次数

如何处理Angular 5+服务工作者的路由?

在以前版本的Angular服务工作者实现中,其中一个配置选项是"routing".这可以从这个未解决的SO问题中看出,在这个Angular CLI问题中被引用,最好的剩余文档似乎是Stephen Fluin(Angular团队)的博客文章,以及Alex Rickabaugh 的I/O演讲(来自谷歌).

使用Angular 5,ServiceWorkerModule已经很好地构建了,现在可以使用该ngsw-config.json文件处理大部分配置.但是,在angular.io指南文档中的任何位置都不再提及如何处理路由的重定向.所以我最终遇到了以下问题:当我访问我的应用程序并离线时,我仍然可以直接访问该应用程序:https://jackkoppa.github.io/cityaq-sw-issue.但是,在加载时,应用程序重定向到search路由,并且大多数用户将尝试从https://jackkoppa.github.io/cityaq-sw-issue/search?cities=Shanghai这样的URL加载(为简单起见,我'我现在只谈论Chrome桌面和移动设备,并在可能的情况下使用Incognito.

当您尝试在离线时访问该URL时,您会立即获得504 - Gateway Timeout.发生这种情况是因为服务工作者只缓存了索引,并且不知道其他路由应该重定向到索引以便它可以加载.我相信Angular服务工作者实现的先前迭代可以通过设置重定向到给定路由的索引来处理这种情况.有没有办法在当前的Angular 5+ ngsw-config.json或生成的ngsw.json文件中处理此重定向?除此之外,如何在单独的服务工作者JS文件中处理变通方法?

angular-routing service-worker angular-cli angular angular-service-worker

30
推荐指数
1
解决办法
5626
查看次数

延迟加载Angular 5错误:$$ _ lazy_route_resource懒惰递归

我正在使用angular cli AoT编译.当我尝试按照本教程制作延迟加载组件时,我收到以下错误:

ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at ScalarObservable._subscribe (ScalarObservable.js:51)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:15:29)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6554)
    at SystemJsNgModuleLoader.load (core.js:6538)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load …
Run Code Online (Sandbox Code Playgroud)

lazy-loading angular-cli angular

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

Angular Injectable装饰器 - 预期0个参数但得到1

我刚刚开始使用Angular的基础教程,但是我遇到了一个小的编译问题.

我正在关注Angular网站上的教程.我坚持使用依赖注入部分,因为它不想编译.

在教程中,他们要求创建一个服务:

ng generate service hero
Run Code Online (Sandbox Code Playgroud)

在这个生成的服务中,你有一个像这样的装饰器:

@Injectable()
Run Code Online (Sandbox Code Playgroud)

然后他们要求向该装饰器添加一个参数,如下所示:

@Injectable({
  providedIn: 'root'
})
Run Code Online (Sandbox Code Playgroud)

当我尝试这样做时,我遇到TypeScript错误告诉我:

Angular CLI: 1.7.4
Node: 9.5.0
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
Run Code Online (Sandbox Code Playgroud)

我使用的版本是那些:

ng generate service hero
Run Code Online (Sandbox Code Playgroud)

知道为什么它不接受参数吗?

提前致谢 !

typescript angular-cli angular

30
推荐指数
2
解决办法
3万
查看次数