question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AngularJS Routing + Parcel = Error

See original GitHub issue

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!

Issue Analytics

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

github_iconTop GitHub Comments

2reactions
ghostcommented, Mar 2, 2018

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.

1reaction
pierredavidbelangercommented, Mar 3, 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 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

AngularJs route no error but not working - Stack Overflow
We can't define routes in a controller or in a service since the configuration needs to happen before it gets injected into anything...
Read more >
single-spa-react
handleError (optional): A function that will be called with errors thrown by the parcel. If not provided, errors will be thrown on the...
Read more >
Bundle your Web application with ParcelJS - codeburst
It offers blazing-fast performance utilizing multicore processing and requires zero configuration. With parcel, you don't have to set up any configuration ...
Read more >
Angularjs With Asp Net Web Forms | Watchlight
is to have a solution that suit not show routing in the browser URL. ... Document processing, using angularjs asp web examples of...
Read more >
single-spa-angularjs: Versions | Openbase
Don't throw error when single-spa-angularjs angularjs module is unavailable. (#57 #56) ... New <single-spa-parcel> angularjs directive was implemented.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found