plnkr / feedback

Feedback on Plunker
19 stars 11 forks source link

What happened to the Old PLNKR? The new one breaks with my code. #519

Closed georgeawg closed 4 years ago

georgeawg commented 4 years ago

The Old PLNKR stopped working for me. It now forces me to use the new PLNKR.

Is there a way to get to the old one?

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

ggoodman commented 4 years ago

Hi @georgeawg , it is too much of a burden to support the legacy interface. There are currently no plans to continue offering it.

Is there something in the legacy interface that you miss in the new one?

georgeawg commented 4 years ago

The following does not work for me.

index.html

<!doctype html>
<html>
  <head>
    <script src="//unpkg.com/angular/angular.js"></script>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="app">
    <h1>Hello Plunker!</h1>
    I can add 1+1={{1+1}}<br>
    $rootScope.hello = {{hello}}
  </body>
</html>

script.js

angular.module("app",[])
.run(function($rootScope) {
  $rootScope.hello = "world";
})

https://plnkr.co/edit/BuWJCcGBx5YBYaDE

It worked fine in the old PLNKR. Is there some setting that I am missing?

It gets the following error:

angular.js:138 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

https://errors.angularjs.org/1.7.9/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'app'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.9%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A138%3A12%0A%20%20%20%20at%20https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A2310%3A17%0A%20%20%20%20at%20ensure%20(https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A2231%3A38)%0A%20%20%20%20at%20module%20(https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A2308%3A14)%0A%20%20%20%20at%20https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A5038%3A22%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A5022%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A4939%3A19)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A1962%3A20)%0A%20%20%20%20at%20bootstrap%20(https%3A%2F%2Funpkg.com%2Fangular%401.7.9%2Fangular.js%3A1983%3A12)

    at VM248 angular.js:138
    at VM248 angular.js:5062
    at forEach (VM248 angular.js:387)
    at loadModules (VM248 angular.js:5022)
    at createInjector (VM248 angular.js:4939)
    at doBootstrap (VM248 angular.js:1962)
    at bootstrap (VM248 angular.js:1983)
    at angularInit (VM248 angular.js:1868)
    at VM248 angular.js:36426
ggoodman commented 4 years ago

Hi @georgeawg, it looks like there were two things at play here:

  1. There was an incorrectly closed script tag in the head.
  2. The plnkr.runtime setting in package.json was set to system but angular was set up to bootstrap synchronously.

I've fixed both of these in this fork: https://plnkr.co/edit/w1Xo4XWjX89gjEeR

The second issue is much more subtle and may be a bit of a challenge for users during the transition. I'm working on options to make the experience more predictable.

Under the hood, the system runtime is used in the new plunker to dynamically load npm modules from publicly-available CDNs. The runtime I built to support this (plnkr/runtime), however, is fundamentally asynchronous so whatever logic you put in your javascript will only get executed AFTER the DOM has fully loaded. This isn't an issue for libraries like React and Angular but is problematic for the default AngularJS bootstrapping method.

If you start from the provided AngularJS template, this issue should already be solved for you: https://plnkr.co/edit/github:plnkr/starters/v1.4.0/templates/angularjs?open=lib%2Fapp.ts&deferRun=1

georgeawg commented 4 years ago

Setting

package.json

{}

Seems to work.

Also closing the preview window and clicking the preview button helps when it hangs.

https://plnkr.co/edit/BuWJCcGBx5YBYaDE?preview