Question

我正在运行angular2-cli应用程序，并尝试在浏览器上运行构建文件以进行查看，并且当文件更改时，这些构建文件应自动检测更改并更新更改并像观察者一样在浏览器上自动查看吗？

如何实现？

我使用了以下命令：-

ng build --prod --build-optimizer --watch

创建构建文件后，如何使用这些构建文件显示视图并在应用程序中的文件发生更改并应更新相应视图时自动检测更改？

我正在使用

部署dist文件

 npm install http-server -g

http-server ./dist。

但是，angular-app中的任何更改都不会更新。

文件更改和保存时出错：-

<--- Last few GCs --->

    [4880:000002362A3E0200]  3073977 ms: Mark-sweep 1313.4 (1441.8) -> 1313.4 (1441.8) MB, 1912.2 / 0.1 ms  last resort GC in old space requested


    <--- JS stacktrace --->

    ==== JS stack trace =========================================

    Security context: 0000029E02FA54D9 <JSObject>
        2: /* anonymous */ [0000002EF25822D1 <undefined>:~5461] [pc=000001803821AEBC](this=0000033F46320061 <JSFunction base54 (sfi = 000003E0C2B4A539)>,str=0000009E2323E039 <Very long string[2687906]>,delta=1)
        3: /* anonymous */ [0000002EF25822D1 <undefined>:5430] [bytecode=000002BED7ECCD79 offset=83](this=0000026E50826AC9 <AST_Toplevel map =
    000002DAD9648199>,options=0000008766ACE9C9 <Object...

    FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
     1: node::DecodeWrite
     2: node_module_register
     3: v8::internal::FatalProcessOutOfMemory
     4: v8::internal::FatalProcessOutOfMemory
     5: v8::internal::Factory::NewRawTwoByteString
     6: v8::internal::Smi::SmiPrint
     7: v8::internal::StackGuard::HandleInterrupts
     8: v8::internal::AsmJsScanner::IsNumberStart
     9: 

000001803

56043C1

Answer 1

在ng构建之后，您将无法观看文件。如果您想在测试应用时继续编辑，只需使用ng serve -o

Answer 2

基本上，该错误与堆内存有关。

增加内存可以解决此问题。

无论如何，我还将构建命令和配置也发布在angular.json中，以供详细参考。

仅供参考：我以角度6验证了此过程。

"prod-build-ui-now": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng build --deploy-url /_assets/angular/project_name/ --output-path dist/project_name/ --prod --project project_name --watch"

-手表在其中起主要作用。

-max_old_space_size = 2048 将解决堆内存不足的问题。如果仍然遇到问题，只需将值增加1024。

-prod 将在您的angular.json中使用prod配置。

"production": { "optimization": false, "outputHashing": "all", "sourceMap": true, "extractCss": true, "namedChunks": false, "aot": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": false, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] }

上面的配置将确保您迅速获得最新更新。

Angular-6如何更改angular2-cli应用程序文件时在浏览器上运行构建文件并自动检测更改？

文件更改和保存时出错：-

2 个答案: