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

Question

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

如何做到这一点呢？

我使用了以下命令：-

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

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

我正在使用以下命令部署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中发布了构建命令和配置，以供详细参考。

仅供参考:我在angular 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"

在这里，--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" } ] }

以上配置将确保您可以快速获得最新更新。