"live reload"看不到执行"ng serve"后添加到 assets 文件夹中的新文件



我有:

  1. angular-cli控制的 Angular2 应用程序
  2. 用于开发目的ng serve,用于生产目的ng build
  3. 一些
  4. 微服务,在当前情况下生成一些图像并将它们复制到静态文件夹 - 到./src/assets文件夹

问题: 执行后添加到此文件夹的文件ng serve不可见,应用程序抛出我下一个错误:

无法匹配任何路由。网址细分:"素材资源/测试.png">

而在执行ng serve之前存在的其他图像正在成功获取

重现步骤:

  1. 使用命令ng new my-app初始化模拟角度应用程序
  2. 使用命令cd my-app/转到生成的文件夹
  3. 使用命令echo "this file is visible because it was in folder before ng serve" >> src/assets/test.txt在资产文件夹中创建一些测试文件
  4. 使用命令ng serve启动应用程序
  5. 在另一个终端窗口中,使用命令检查最近创建的文件是否通过 URL 可见curl localhost:4200/assets/test.txt
  6. 验证 curl 是否返回this file is visible because it was in folder before ng serve
  7. 再添加一个文件,而无需使用命令echo "don't matter because you'll get an error" >> src/assets/error.txt重新加载ng serve
  8. 尝试使用命令获取该文件curl localhost:4200/assets/error.txt
  9. 验证是否看到错误

错误

无法获取/资产/错误.txt
  1. 尝试修改测试.txtecho "file modification is visible by live reload" >> src/assets/test.txt
  2. 获取更新的文件,而无需重新加载ng服务curl localhost:4200/assets/test.txt
  3. 验证您是否看到

此文件可见,因为它在 ng serve 文件修改可见之前位于文件夹中 通过实时重新加载

  1. 使用命令创建组件ng g component testcomponent
  2. 使用命令echo "(open tag)app-testcomponent(close tag)(open tag)/app-testcomponent(close tag)" > src/app/app.component.html修改 app.component.html(使用<更改打开标记并使用>关闭标记)
  3. 在浏览器中打开本地主机:4200,然后查看testcomponent works!

正如您从给定的步骤中看到的 - 实时重新加载不会仅跟踪资产中的新文件。 新添加的组件通常可见,无需重新启动应用程序

那么,我做错了什么? 这不是很关键(我仍然可以进行生产构建并使用它),但在应用程序测试期间会有一些痛苦

是错误还是我找不到正确的配置来告诉应用程序也关注资产中的收入者?

ng --版本给我下一个输出

Angular CLI: 1.6.5
Node: 9.4.0
OS: darwin x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.5.3
webpack: 3.10.0

您可以尝试在 assets 文件夹中创建某种注册表文件。应用于此文件的更改将可见,ng serve将重新加载项目。算法:

在ng服务
  • 之前,在资产文件夹中创建文件(例如"List_of_added_files.txt)
  • 开始 ng 服务。微服务添加文件时,运行一些脚本将消息更改为List_of_added_files,例如:文件名。Angular 应该看到更改并重建项目。

最新更新