Parcel: Angular 6 with HMR

[knipferrc]

🐛 bug report

When working with angular 6 and saving only one component everything works as expected, but when you add routing with multiple component I think HMR is breaking it because it does not recognize the component and you have to reload the browser for the changes to take effect. Is there a way to disable HMR and make it do a page reload?

🎛 Configuration (.babelrc, package.json, cli command)

{
  "your": { "config": "here" }
}

🤔 Expected Behavior

😯 Current Behavior

Page breaks when saving app with routing and multiple components

The component is not part of any NgModule but it is if you reload the page.

💁 Possible Solution

Disable HMR

🔦 Context

Trying to build an angular app with parcel

💻 Code Sample

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.8.1
| Node | 10.1
| npm/Yarn | 5.6
| Operating System | OSX

[tatsujb]

I don't understand? you have angular + parcel working? even for running something as small as the CLI out of the box it's a trial and a half and it isn't error free in the the build console and as soon as I add a single component it all goes to shit.

How have you accomplished this miracle I've been trying desperately to do for a year and could you please make available a github repo of a minimal setup?

thanks

[knipferrc]

@tatsujb Sure, here is the repo https://github.com/knipferrc/angular-parcel, its not perfect, you save something and it will throw an error and then go away because I override the HMR to reload the page, not ideal, hoping there is a fix for it. Also doesnt have template support yet, I plan to add it, just wanted to get this basic project working first.

[tatsujb]

I had to remove NODE_ENV=development & NODE_ENV=production (as I'm currently not on my home PC but on a work pc, so windows pc, big up to a linux pal btw!) but it runs.

Do you mind if I use that for a basis for my own project? Sorry I didn't bring any insight into your own bug.

[knipferrc]

Yeah sure, you could add cross-env to take into account the NODE_ENV, I assume your using windows?

[tatsujb]

Thanks!! yeah. I ended up having it as :

 "scripts": {
    "start": "SET NODE_ENV=development & parcel src/index.html",
    "build-app": "SET NODE_ENV=production & parcel build src/index.html",

which works

[tatsujb]

@knipferrc hey sorry to pester here, if there's a better place I can ask you this let me know,

I converted your project to an angular-cli project and with that it still worked

But when I add components (with ng generate component) and try to load them (with <app-component></app-component>) I get 404 errors like this ;

this behavior is something I don't get with ng serve.

I must be missing something...

[knipferrc]

What do you mean by when you try to load them? How are you setting the templateUrl and styleUrls? Parcel does not support the html templates like they are in the cli with webpack. You can use fs to require the files as strings.

[tatsujb]

What???

are you saying parcel forces you to put the html code inline in the .ts file like this :

@Component({
  selector: 'app-component',
  template: `
    <div>
        <div>
            <div>
                my DOM
            </div>
        </div>
     </div>
  `
})

ALL the time? if there's a solution to not have to do that, YES PLEASE 🤕

[knipferrc]

Yeah at the moment parcel does not support the templateUrl: app.component.html syntax, but I believe you should be able to use fs to read the file as a string, maybe something like fs.readFileSync('home.component.html','utf8'), although hopefully eventually parcel will support html templates.

[tatsujb]

I tried putting them all in the template tag but that yielded the same result somehow?

I've uploaded it to a git hub repo : https://github.com/tatsujb/parcel-angular6-scss/tree/templatedHTML

the "master" branch is with templateUrl, the "templatedHTML" branch is using template.

[knipferrc]

The master branch wont work because parcel does not support templateUrl: app.component.html and your styleUrls wont work either you would need to inline those or use fs to read from the file as a string. Same thing on templatedHTML branch.

[tatsujb]

Ok thanks! I wasn't already inlining the html in the "emplatedHTML" branch? i left the original html files in the folders but they should no longer be called by anything.

as for the scss that's a good point, I forgot to inline that.

[knipferrc]

@tatsujb Were you able to get it up and running? I am pretty sure you can use fs though to read those files as strings and use html files, I had it working at one point.

[tatsujb]

ok so first off inlining html AND style works. the app runs.

as for the fs , I kinda don't understand the syntax. it can't be that it does magic on it's own.

is the constant I declare what I place in templateURL's value?

that doesn't work. I guess as template's value?

I guess not that either :

yep, even with npm install file-system --save

that error having gone away. when I compile the browser console tells me : Uncaught TypeError: fs.readFileSync is not a function

I've updated my repo (tempaltedHTML branch) to at least the version that starts up.
you've been made a contributor there so you have free reign and my full permission to experiment there.

You probably noticed demoorjasper is adamant we should not need fs at all and that both templateURL and styleURL should work (if I understand correctly) out of the box.

[knipferrc]

@tatsujb I updated my angular-parcel boilerplate to load a css file and a html template file for the home component. There is a warning from angular about the component needing a template or templateUrl but it works, ill investigate that issue.

[tatsujb]

Hey for me with your updates to your repo now I don't even get errors anywhere (nor terminal, nor chrome console). so maybe you can stop investigating them : >

however I'm going to convert it into an angular cli-project (why would you wanna miss out on ng generate and such a good bundle? 🤔 ) and I'm pretty sure errors are going to pop up again.

let's hop to it.

[knipferrc]

I just didnt get that far yet with the angular-cli, I'd like to use the parcel angular plugin, but I dont think its updated yet for the new angular stuff, the errors are in my editor from Angular language service.

[tatsujb]

I can't get this new setup to work :( Any clues?

[knipferrc]

@tatsujb I dont think you need the path: there do you?

[tatsujb]

You're right but I'm still stuck there :

ENOENT: no such file or directory, open 
   core_1.Component({
  16 |             selector: 'app-home-component',
> 17 |             template: "" + fs.readFileSync('./home.component.html'),
     |                                            ^
  18 |             styles: ["" + fs.readFileSync('./home.component.css')]
  19 |         })
  20 |     ], HomeComponent);

[knipferrc]

@Component({
  selector: 'app-home-component',
  template: `${fs.readFileSync(__dirname + '/home.component.html')}`,
  styles: [`${fs.readFileSync(__dirname + '/home.component.css')}`]
})
export class HomeComponent {}

[tatsujb]

thanks that worked,

the webpage is blank, this is kinda random, (chrome console) :

Uncaught Error: Component DashboardComponent is not part of any NgModule or the module has not been imported into your module.
    at JitCompiler._createCompiledHostTemplate (..\node_modules\@angular\compiler\fesm5\compiler.js:22659)
    at ..\node_modules\@angular\compiler\fesm5\compiler.js:22635
    at Array.forEach (<anonymous>)
    at ..\node_modules\@angular\compiler\fesm5\compiler.js:22632
    at Array.forEach (<anonymous>)
    at JitCompiler._compileComponents (..\node_modules\@angular\compiler\fesm5\compiler.js:22621)
    at ..\node_modules\@angular\compiler\fesm5\compiler.js:22549
    at Object.then (..\node_modules\@angular\compiler\fesm5\compiler.js:206)
    at JitCompiler._compileModuleAndComponents (..\node_modules\@angular\compiler\fesm5\compiler.js:22548)
    at JitCompiler.compileModuleAsync (..\node_modules\@angular\compiler\fesm5\compiler.js:22508)

makes no sense to me Dashboard is correctly imported without errors both in the module.ts and router.ts

I understand if you don't have time for this, I've already abused of your help, you do't have to answer.

[knipferrc]

Yeah thats because parcel's hmr does not work with angular for some reason, I had to do this:

if (module['hot']) {
  module['hot'].accept(() => {
    window.location.reload()
  })
  module['hot'].dispose(() => {
    window.location.reload()
  })
}

You will still see the error briefly but it will go away after it reloads the page. It would be ideal to have parcel just reload the page on save or fix HMR somehow.

[tatsujb]

thanks. I added it in main but my run fails with the same error regardless. I think that now the error is simply due to incompatibility of some sort with angular-cli.

I've updated my repo's branch :
https://github.com/tatsujb/parcel-angular6-scss/tree/templatedHTML/

[mischnic]

Is there a way to disable HMR and make it do a page reload?

This is now the default behavior (#2676)