CODEWITHSUNDEEP
angularwebpacklivereload
JasonPerr
JasonPerr

Reputation: 339

How can I stop live-reload from executing on all files in Angular2 with angularCLI?

Environment:

Angular 2.0.0 (Built via Angular CLI Beta 15 with Webpack)

Issue:

No way to turn off live-reload. My application involves multiple areas where files need to be uploaded to the server, and/or be manipulated. Every time any of these actions occur, my application restarts, making it near impossible to test and continue development.

Ideal Resolution:

I really want to find a way to just disable the live-reloading. If this is not possible having used the AngularCLI, I need to know that its worth the time to rebuild the app without the CLI.

Pre-Webpack (with AngularCLI Beta 10) I used to be able to prevent this issue by running angular with this command:

From package.json

"angular-start": "ng serve --live-reload false",

This no longer works with the current version of Angular CLI.

Update:

The accepted answer is great except for one minor issue. For some reason when the app is launched in this way I can't load pages direct (i.e. http://172.16.1.213:4200 works, and if I navigate to my assets route I see http://172.16.1.213:4200/assets in the browser. But if I put http://172.16.1.213:4200/assets in the browser directly and hit enter I get "Cannot get assets" )

Also, if I upload a new image or video to the application when launched in this way, I can't see the image or video until refreshing.

My guess is that this is because of the nature of Webpack wanting to bundle all of these images/videos. I'm just confused how this could ever work in production when new files need to be uploaded all the time

Upvotes: 3

Views: 2524

Answers (2)

John Siu
John Siu

Reputation: 5092

A simple node app can serve Angular-cli /dist content.

  1. Put following server.js in your project folder

    const port = 4000;
const ip = "0.0.0.0";
const dist = __dirname + '/dist';

// Express
const express = require('express');

express()
    // Static content
    .use(express.static(dist))
    // SPA routing
    .get('/*', (req, res) => res.sendFile(__dirname, '/dist/index.html'))
    // Start server
    .listen(port, ip, function () {
        console.log(ip + ':' + port);
    });

  2. Install expressjs

    npm i express

  3. Build your app*

    ng build

  4. Start server

    node server.js
    • Repeat Step 3 each time finish up loading.

Upvotes: 1

mapm
mapm

Reputation: 1395

This flag is not implemented in webpack version, see https://github.com/angular/angular-cli/issues/1755.

Upvotes: 0

Related Questions