Parcel: AngularJS Routing + Parcel = Error

[ghost]

Angular version

angular 1.6.9

Angular route version

angular-route 1.6.9

Parcel version

parcel-bundler 1.6.1

Hey! I'm writing this issue tonight because i've experienced some errors with Angular 1.6.9 routing and Parcel Bundler.

I'm not sure if this issue is related to Angular or Parcel, but feel free to take me back to the right way if i'm wrong.

As a developer, I like to split each blocks of code in separate files for better organization and since I don't like configuration, Parcel seems to be something I'll use a lot.

Here's my router.js file:

export default function routing($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            controller: 'HomeCtrl'
        })
        .otherwise({redirectTo: '/'})
    $locationProvider.html5Mode(true);
}

Inside a route, I have to specify which template or templateUrl to use. I've tried many ways to do this because if I specify a templateUrl like this ../pages/home.html my application instantly crash.

However, if I use instead a simple template: key and enter something like this: require('../pages/home.html) it doesn't work.

I've made some researches and found nothing about that issue. That's why i'm not sure if its related to AngularJS or Parcel.

The only way to make it work is to create a home.js file and to export it:

export default `
    <h1>asdasdasd</h1>
    <p>Test routing on / {{message}}</p>
`

I personnaly don't think that this is the best way to do that. Let me know if you have any informations about that. I may provide more details if needed.

Thanks!

EDIT: Sorry for my bad english!

[davidnagli]

Can you elaborate on which error you’re getting. You said the app “crashes”, but do you get some error message in console or terminal?

[ghost]

If i do:

function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        controller: 'homeCtrl',
        templateUrl: './pages/home/home.html'
    })
    $routeProvider.otherwise('/')
}

I get that error in the console maximum call stack size exceeded that make my browser crash.

Otherwise, if I want to require('a/file.html') I get `cannot find module '23', or another number, in the console.

The only way I found is fs.readFileSync(__dirname + '/partial.html') that returns a string with the html template inside and it works, but I dont like that method.

I'd love to require('file.html') or just be able to specify a path to the html file.

[davidnagli]

The cannot find module ’23’ is certainly a Parcel error, but it might be caused by some mistake in your Angular code or something. I’m not that familiar with AngularJS so I can’t really tell you much in that regard.

Can you provide an example repo that can minimal reproduce the error?

For reference, this is the same error message as, #879 (and a bunch of other issues), but I’m pretty sure they’re unrelated.

[ghost]

Yeah I'll do it during the weekend and put it here!

[pierredavidbelanger]

I think I fixed this in the (not merged yet) PR #926 .

But you can still easily try my fix. Just use my branch as dependency in your package.json:

{
  "dependencies": {
    "parcel-bundler": "pierredavidbelanger/parcel#my-fixes"
  }
}

Then npm install.

Then, go ahead and template: require('./file.html') in your route.

edit: use the branch #my-fixes instead of #html-loader, because it contains an other fix required to use parcel from a github dependency ;)

[ghost]

@pierredavidbelanger

I'm not able to use parcel with your branch. Here's what I get in the console after running ./node_modules/.bin/parcel index.html :

(node:4770) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/home/vincent/Projets/parcel/node_modules/parcel-bundler/src/builtins/prelude.min.js'
    at Object.fs.openSync (fs.js:663:18)
    at Object.fs.readFileSync (fs.js:568:33)
    at Object.<anonymous> (/home/vincent/Projets/parcel/node_modules/parcel-bundler/src/packagers/JSPackager.js:12:6)
    at Module._compile (/home/vincent/Projets/parcel/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (/home/vincent/Projets/parcel/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
(node:4770) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:4770) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[pierredavidbelanger]

Oh, indeed, I just edited my post while you posted yours.

Use the branch pierredavidbelanger/parcel#my-fixes instead of pierredavidbelanger/parcel#html-loader, because there an other (not yet merged) PR to allow one to use parcel as a github dependency.

I am sorry I should have remembered.

[ghost]

Thanks a lot!!

It works! I hope that will be added soon within parcel! I'm gonna use your branch for the moment for my development.

[pierredavidbelanger]

@davidnagli I do not think we can close this yet as the changes (#926) requires to make this work is not merged nor even approved :)

[ghost]

I think you should create a parcel plugin with that feature :)

It will allow people to use the original parcel repo as a dev dependency and install your plugins for more functionnality.

Edit: https://parceljs.org/plugins.html

[ghost]

Hey! I'm building a project using your branch and I created a branch containing the angularjs structure with html files which can be required. https://github.com/unt0xication/managist/tree/starter.

I think it could be a good starter for people who wants to start a new angular app without having to package everything together :)

[pierredavidbelanger]

@unt0xication I am glad to hear that :) But you should know that my branch was created only for testing purpose and that I will make no effort to keep it up to date, if available at all.

I suggest you make your own clone the parcel repo, add my repo as a remote, than merge what you want while its still available ;)

[ghost]

Yeah I should do that. I hope Parcel will include this feature in the future!

[cmnstmntmn]

@unt0xication any ideea how templateUrl can be used instead?

trying

templateUrl: '/templates/home.html',

is doing the XHR call but the file is empty

[pierredavidbelanger]

@cmnstmntmn your snippet does not works, because its unlikely that your /templates/home.html file exists in the dist folder. Instead with Parcel, one should get the production URL of a file with:

templateUrl: require('/templates/home.html'),

But, as far as I know, this does not work either.

You can have a look at my two PRs I submitted, #1016 and #1017, to try to pin point and fix this problem.

For now I just cant use Parcel because of this issue.

[cmnstmntmn]

thank you @pierredavidbelanger. i'll have a look at those