parcel: AngularJS Routing + Parcel = Error

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!

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 16 (7 by maintainers)

Most upvoted comments

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.

ghost on Mar 2, 2018

@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 😃

pierredavidbelanger on Mar 3, 2018

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.

ghost on Mar 3, 2018

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.

pierredavidbelanger on Mar 2, 2018