我有:
- 由
angular-cli
控制的 Angular2 应用程序 - 用于开发目的
ng serve
,用于生产目的ng build
一些 - 微服务,在当前情况下生成一些图像并将它们复制到静态文件夹 - 到
./src/assets
文件夹
问题: 执行后添加到此文件夹的文件ng serve
不可见,应用程序抛出我下一个错误:
无法匹配任何路由。网址细分:"素材资源/测试.png">
而在执行ng serve
之前存在的其他图像正在成功获取
重现步骤:
- 使用命令
ng new my-app
初始化模拟角度应用程序 - 使用命令
cd my-app/
转到生成的文件夹 - 使用命令
echo "this file is visible because it was in folder before ng serve" >> src/assets/test.txt
在资产文件夹中创建一些测试文件 - 使用命令
ng serve
启动应用程序 - 在另一个终端窗口中,使用命令检查最近创建的文件是否通过 URL 可见
curl localhost:4200/assets/test.txt
- 验证 curl 是否返回
this file is visible because it was in folder before ng serve
- 再添加一个文件,而无需使用命令
echo "don't matter because you'll get an error" >> src/assets/error.txt
重新加载ng serve
- 尝试使用命令获取该文件
curl localhost:4200/assets/error.txt
- 验证是否看到错误
错误
无法获取/资产/错误.txt
- 尝试修改测试.txt
echo "file modification is visible by live reload" >> src/assets/test.txt
- 获取更新的文件,而无需重新加载ng服务
curl localhost:4200/assets/test.txt
- 验证您是否看到
此文件可见,因为它在 ng serve 文件修改可见之前位于文件夹中 通过实时重新加载
- 使用命令创建组件
ng g component testcomponent
- 使用命令
echo "(open tag)app-testcomponent(close tag)(open tag)/app-testcomponent(close tag)" > src/app/app.component.html
修改 app.component.html(使用<更改打开标记并使用>关闭标记)更改打开标记并使用> - 在浏览器中打开本地主机: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 应该看到更改并重建项目。