How to serve an angular elements app in watch mode?
I have successfully created an Angular Elements application following this awesome guide.
The "serve" process consists of:
- Build the application and concat into a single js file
ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js
- Now serve a HTML file, containing the custom element. In this case
lite-server.
But every time I do a change to the custom element, and wan't to see it updated I need to re-run the build script. So my question is this, how can I build this in watch mode?
The relevant parts of my package.json looks like this:
"buildForShip": "ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
"plainHTML": "lite-server"
"start": "npm run -s buildForShip && npm run -s plainHTML"
angular angular-elements
asked Nov 19 '18 at 9:00
DauleDKDauleDK
1,2701328
add a comment |
I have successfully created an Angular Elements application following this awesome guide.
The "serve" process consists of:
- Build the application and concat into a single js file
ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js
- Now serve a HTML file, containing the custom element. In this case
lite-server.
But every time I do a change to the custom element, and wan't to see it updated I need to re-run the build script. So my question is this, how can I build this in watch mode?
The relevant parts of my package.json looks like this:
"buildForShip": "ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
"plainHTML": "lite-server"
"start": "npm run -s buildForShip && npm run -s plainHTML"
angular angular-elements
asked Nov 19 '18 at 9:00
DauleDKDauleDK
1,2701328
Please add your package.json's script object.
– SiddAjmera
Nov 19 '18 at 9:02
You can addwatchoption forng serveand not forng build
– inthevortex
Nov 19 '18 at 9:08
@inthevortex that's not true - you can run build in watch mode. Check this out: stackoverflow.com/a/43347849/3694288
– DauleDK
Nov 19 '18 at 9:12
add a comment |
I have successfully created an Angular Elements application following this awesome guide.
The "serve" process consists of:
- Build the application and concat into a single js file
ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js
- Now serve a HTML file, containing the custom element. In this case
lite-server.
But every time I do a change to the custom element, and wan't to see it updated I need to re-run the build script. So my question is this, how can I build this in watch mode?
The relevant parts of my package.json looks like this:
"buildForShip": "ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
"plainHTML": "lite-server"
"start": "npm run -s buildForShip && npm run -s plainHTML"
angular angular-elements
asked Nov 19 '18 at 9:00
DauleDKDauleDK
1,2701328
I have successfully created an Angular Elements application following this awesome guide.
The "serve" process consists of:
- Build the application and concat into a single js file
ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js
- Now serve a HTML file, containing the custom element. In this case
lite-server.
But every time I do a change to the custom element, and wan't to see it updated I need to re-run the build script. So my question is this, how can I build this in watch mode?
The relevant parts of my package.json looks like this:
"buildForShip": "ng build --prod --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
"plainHTML": "lite-server"
"start": "npm run -s buildForShip && npm run -s plainHTML"
angular angular-elements
angular angular-elements
asked Nov 19 '18 at 9:00
DauleDKDauleDK
1,2701328
asked Nov 19 '18 at 9:00
DauleDKDauleDK
1,2701328
edited Nov 19 '18 at 9:09
DauleDK
asked Nov 19 '18 at 9:00
DauleDKDauleDK
1,2701328
asked Nov 19 '18 at 9:00
DauleDKDauleDK
1,2701328
asked Nov 19 '18 at 9:00
DauleDKDauleDK
1,2701328
1,2701328
Please add your package.json's script object.
– SiddAjmera
Nov 19 '18 at 9:02
You can addwatchoption forng serveand not forng build
– inthevortex
Nov 19 '18 at 9:08
@inthevortex that's not true - you can run build in watch mode. Check this out: stackoverflow.com/a/43347849/3694288
– DauleDK
Nov 19 '18 at 9:12
add a comment |
Please add your package.json's script object.
– SiddAjmera
Nov 19 '18 at 9:02
You can addwatchoption forng serveand not forng build
– inthevortex
Nov 19 '18 at 9:08
@inthevortex that's not true - you can run build in watch mode. Check this out: stackoverflow.com/a/43347849/3694288
– DauleDK
Nov 19 '18 at 9:12
Please add your package.json's script object.
– SiddAjmera
Nov 19 '18 at 9:02
Please add your package.json's script object.
– SiddAjmera
Nov 19 '18 at 9:02
You can add
watch option for ng serve and not for ng build– inthevortex
Nov 19 '18 at 9:08
You can add
watch option for ng serve and not for ng build– inthevortex
Nov 19 '18 at 9:08
@inthevortex that's not true - you can run build in watch mode. Check this out: stackoverflow.com/a/43347849/3694288
– DauleDK
Nov 19 '18 at 9:12
@inthevortex that's not true - you can run build in watch mode. Check this out: stackoverflow.com/a/43347849/3694288
– DauleDK
Nov 19 '18 at 9:12
add a comment |
1 Answer
1
active
oldest
votes
Following the article, you might have added a script named plainHTML in the scripts object of your package.json file. You can simply add --watch after it.
Something like this:
"plainHTML": "lite-server --watch"
This should run the server in watch mode and should look for file changes.
Also, since your file is going to be generated after building it, you can also use --watch in ng build for buildForShip script:
"buildForShip": "ng build --prod --watch --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
answered Nov 19 '18 at 9:09
SiddAjmeraSiddAjmera
13.4k31137
but theship.jsfile only updates when runnig the build command, so that won't work
– DauleDK
Nov 19 '18 at 9:10
Did you try runningng build in --watchmode?
– SiddAjmera
Nov 19 '18 at 9:13
1
yes - and that works. But I also need the files merged into one, like specified in the build script (&& cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js) otherwise the lite-server won't pick it up
– DauleDK
Nov 19 '18 at 9:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53371235%2fhow-to-serve-an-angular-elements-app-in-watch-mode%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Following the article, you might have added a script named plainHTML in the scripts object of your package.json file. You can simply add --watch after it.
Something like this:
"plainHTML": "lite-server --watch"
This should run the server in watch mode and should look for file changes.
Also, since your file is going to be generated after building it, you can also use --watch in ng build for buildForShip script:
"buildForShip": "ng build --prod --watch --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
answered Nov 19 '18 at 9:09
SiddAjmeraSiddAjmera
13.4k31137
but theship.jsfile only updates when runnig the build command, so that won't work
– DauleDK
Nov 19 '18 at 9:10
Did you try runningng build in --watchmode?
– SiddAjmera
Nov 19 '18 at 9:13
1
yes - and that works. But I also need the files merged into one, like specified in the build script (&& cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js) otherwise the lite-server won't pick it up
– DauleDK
Nov 19 '18 at 9:16
add a comment |
Following the article, you might have added a script named plainHTML in the scripts object of your package.json file. You can simply add --watch after it.
Something like this:
"plainHTML": "lite-server --watch"
This should run the server in watch mode and should look for file changes.
Also, since your file is going to be generated after building it, you can also use --watch in ng build for buildForShip script:
"buildForShip": "ng build --prod --watch --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
answered Nov 19 '18 at 9:09
SiddAjmeraSiddAjmera
13.4k31137
but theship.jsfile only updates when runnig the build command, so that won't work
– DauleDK
Nov 19 '18 at 9:10
Did you try runningng build in --watchmode?
– SiddAjmera
Nov 19 '18 at 9:13
1
yes - and that works. But I also need the files merged into one, like specified in the build script (&& cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js) otherwise the lite-server won't pick it up
– DauleDK
Nov 19 '18 at 9:16
add a comment |
Following the article, you might have added a script named plainHTML in the scripts object of your package.json file. You can simply add --watch after it.
Something like this:
"plainHTML": "lite-server --watch"
This should run the server in watch mode and should look for file changes.
Also, since your file is going to be generated after building it, you can also use --watch in ng build for buildForShip script:
"buildForShip": "ng build --prod --watch --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
answered Nov 19 '18 at 9:09
SiddAjmeraSiddAjmera
13.4k31137
Following the article, you might have added a script named plainHTML in the scripts object of your package.json file. You can simply add --watch after it.
Something like this:
"plainHTML": "lite-server --watch"
This should run the server in watch mode and should look for file changes.
Also, since your file is going to be generated after building it, you can also use --watch in ng build for buildForShip script:
"buildForShip": "ng build --prod --watch --output-hashing=none && cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js",
answered Nov 19 '18 at 9:09
SiddAjmeraSiddAjmera
13.4k31137
edited Nov 19 '18 at 9:15
answered Nov 19 '18 at 9:09
SiddAjmeraSiddAjmera
13.4k31137
answered Nov 19 '18 at 9:09
SiddAjmeraSiddAjmera
13.4k31137
answered Nov 19 '18 at 9:09
SiddAjmeraSiddAjmera
13.4k31137
13.4k31137
but theship.jsfile only updates when runnig the build command, so that won't work
– DauleDK
Nov 19 '18 at 9:10
Did you try runningng build in --watchmode?
– SiddAjmera
Nov 19 '18 at 9:13
1
yes - and that works. But I also need the files merged into one, like specified in the build script (&& cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js) otherwise the lite-server won't pick it up
– DauleDK
Nov 19 '18 at 9:16
add a comment |
but theship.jsfile only updates when runnig the build command, so that won't work
– DauleDK
Nov 19 '18 at 9:10
Did you try runningng build in --watchmode?
– SiddAjmera
Nov 19 '18 at 9:13
1
yes - and that works. But I also need the files merged into one, like specified in the build script (&& cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js) otherwise the lite-server won't pick it up
– DauleDK
Nov 19 '18 at 9:16
but the
ship.js file only updates when runnig the build command, so that won't work– DauleDK
Nov 19 '18 at 9:10
but the
ship.js file only updates when runnig the build command, so that won't work– DauleDK
Nov 19 '18 at 9:10
Did you try running
ng build in --watch mode?– SiddAjmera
Nov 19 '18 at 9:13
Did you try running
ng build in --watch mode?– SiddAjmera
Nov 19 '18 at 9:13
1
1
yes - and that works. But I also need the files merged into one, like specified in the build script (
&& cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js) otherwise the lite-server won't pick it up– DauleDK
Nov 19 '18 at 9:16
yes - and that works. But I also need the files merged into one, like specified in the build script (
&& cat dist/tamigo-calendar/{runtime,polyfills,scripts,main}.js > ./plainHTML/ship.js) otherwise the lite-server won't pick it up– DauleDK
Nov 19 '18 at 9:16
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53371235%2fhow-to-serve-an-angular-elements-app-in-watch-mode%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please add your package.json's script object.
– SiddAjmera
Nov 19 '18 at 9:02
You can add
watchoption forng serveand not forng build– inthevortex
Nov 19 '18 at 9:08
@inthevortex that's not true - you can run build in watch mode. Check this out: stackoverflow.com/a/43347849/3694288
– DauleDK
Nov 19 '18 at 9:12