playground's People
Contributors
Stargazers
Watchers
playground's Issues
Improve UX of file system viewer
- Make UI look more like a standard file system viewer, ala VS Code (remove lines, add support for collapsing of folders)
- Add right click context menu on files and folders
occasional error with zone.js dependency loading
Occasionally, we get an error with the loading of zone.js in the iframe. I think this is a race condition caused by asynchronous script loading issue with iframes.
zone.js:44 Uncaught Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
at Function.Zone.assertZonePatched (zone.js:44)
at new NgZone (<anonymous>:5515:14)
at PlatformRef_._bootstrapModuleFactoryWithZone (<anonymous>:6203:22)
at PlatformRef_.bootstrapModuleFactory (<anonymous>:6188:21)
at <anonymous>:23131:19
at <anonymous>:5:3
at <anonymous>:6:2
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:191)
at ZoneTask.invokeTask (zone.js:498)
This is most likely caused by shim.min.js being parsed after zone.js due to async script loading issue.
Let users drag to resize/hide the different panes
Default tabs should not be hardcoded
Fails to Compile (ng serve)
Followed the following Steps
git clone
npm install
ng serve ==> THROWS
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/home/pratik/WebstormProjects/playground/playground/node_modules/typescript/lib/typescript.js:9618:20)
at Object.createCompilerHost (/home/pratik/WebstormProjects/playground/playground/node_modules/typescript/lib/typescript.js:66867:26)
at Object.ngcLoader (/home/pratik/WebstormProjects/playground/playground/node_modules/@ngtools/webpack/src/loader.js:397:33)
@ multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts
ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/home/pratik/WebstormProjects/playground/playground/node_modules/typescript/lib/typescript.js:9618:20)
at Object.createCompilerHost (/home/pratik/WebstormProjects/playground/playground/node_modules/typescript/lib/typescript.js:66867:26)
at Object.ngcLoader (/home/pratik/WebstormProjects/playground/playground/node_modules/@ngtools/webpack/src/loader.js:397:33)
@ multi ./src/polyfills.ts
I am using Angular CLI 1.2.6, but the local 1.1.2 CLI was used to compile the app.
Rename all names to edit.ng
Clicking on error in console should go to that file and line
ERROR Error: Uncaught (in promise): SyntaxError: Unexpected token { in JSON at position 352
Error in console:
ERROR Error: Uncaught (in promise): SyntaxError: Unexpected token { in JSON at position 352
SyntaxError: Unexpected token { in JSON at position 352
at Object.parse (<anonymous>)
at app.component.ts:35
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.es5.js:3890)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:141)
at zone.js:831
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.parse (<anonymous>)
at app.component.ts:35
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.es5.js:3890)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:141)
at zone.js:831
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at resolvePromise (zone.js:783)
at zone.js:834
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:595)
The error that's logged by ngc:
{"/component.ts":[{"type":"TYPESCRIPT_DIAGNOSTIC_ERROR","fileName":"/component.ts","lineNumber":11,"characterNumber":1,"message":"Cannot find name 'Comonent'. Did you mean 'Comment'?"}],"/main.ts":[{"type":"TYPESCRIPT_DIAGNOSTIC_ERROR","fileName":"/main.ts","lineNumber":2,"characterNumber":36,"message":"Cannot find module './component.ngfactory'."}]}{}
performCompilation @ browser-bundle.umd.js:46828
compile @ compiler-worker.js:242
handleMessage @ compiler-worker.js:397
onmessage @ compiler-worker.js:407
Contents of component.ts:
import {BrowserModule} from '@angular/platform-browser';
import {Component, NgModule, ApplicationRef} from '@angular/core';
export class Hero { id: number; name: string }
const HEROES: Hero[] = [
{id: 11, name: 'Batman'},
{id: 12, name: 'Wonder Woman'},
{id: 12, name: 'Iron Man'},
]
@Comonent({
selector: 'hello-world-app',
templateUrl: "./templates/template.html",
})
export class HelloWorldComponent {
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero): void { this.selectedHero = hero; }
}
@NgModule({
imports: [BrowserModule],
declarations: [HelloWorldComponent],
entryComponents: [HelloWorldComponent],
bootstrap: [HelloWorldComponent]
})
export class MainModule {
}
Add URL version as part of URL
We need a strategy to make sure we can make changes to URL format without breaking older versions of saved URLs
Maybe have a URL version as part of the URL
Load .d.ts files either from unpkg or from a .tar.gz in npm
The current bundle format for .d.ts dependencies doesn't easily allow for swapping out versions of libraries, as a different bundle would have to be generated for each combination of versions.
To fix this, we can dynamically load the dependencies by doing either 1) individually loading the .d.ts files and the package.json files from unpkg into the virtual file system, or 2) loading a .tar.gz bundle from npm, unzipping it in the browser, and then loading the files into the virtual file system.
Option 2) is preferable as it would reduce the number of requests required, but currently unclear if it is feasible. Timebox investigation - if no quick resolution, fallback to implementing 1).
Uncaught (in promise) Error: Unexpected token
With the application at the below link, we get the following errors on compile:
:4200/assets/compiler/Observable.js:1 GET http://localhost:4200/assets/compiler/Observable.js 404 (Not Found)
error.js:9 Uncaught (in promise) Error: Unexpected token
at error (error.js:9)
at Module.error$1 [as error] (Module.js:306)
at tryParse (Module.js:27)
at new Module (Module.js:53)
at Bundle.js:330
at <anonymous>
error @ error.js:9
error$1 @ Module.js:306
tryParse @ Module.js:27
Module @ Module.js:53
(anonymous) @ Bundle.js:330
If the import 'rxjs/add/operator/switchMap'; line is removed from hero-detail.component.ts, the application compiles.
when file opened on error no squiggles
Remove red squiggly on the app module ngfactory after first compile
The .d.ts from the factory module should be sent to Monaco.
Add ability to add & remove files in the file viewer
Align "x" close button in tabs
Tabs should resize to length of filename
use multiple models for different files rather than re-using one model
Compiler error messages can overflow container
E.g. a template parse error - change "let hero of heroes" in template.html to "le hero of heroes".
Add generation of inline sourcemaps
Adding generation of inline sourcemaps to the bundle will greatly improve ability to debug applications in the AOT Playground.
Error: (SystemJS) Error: XHR error (404) loading https://unpkg.com/@angular/material/bundles/material.umd.js/typings/index.ngfactory
When tab bar has too many tabs, it forces the file system view to collapse
Improve performance of compilation
Cannot read property 'text' of undefined
Bundle.js:301 Uncaught (in promise) Error: Could not load /dist/main.js: Cannot read property 'text' of undefined
at Bundle.js:301
at
on
Steps to reproduce:
- https://edit.ng
- Rewrite templates/template.html to point to component.html
- Create component.html
- Delete template.html
- Click Compile
Display template parse red squiggles for more than first file in which there are errors
When opening file, tab for that file doesn't get selected in the tab display
When you open a new file by clicking a file in the file viewer, a new tab is created and the file contents are inserted as expected, but in the tab display itself the created tab isn't selected.
Application components do not resize on window resize
have fs.readFileSync throw an ENOENT error when file not found
Add user created files to monaco, so monaco provides type suggestions
Compilation failed after I added a file a.ts
ngc throws error on non-existent file
compiler-worker.js:245 Uncaught TypeError: Cannot read property 'text' of undefined
at Object.readFileSync (fs_bundle.js:117)
at BrowserCompilerHost.readFile (BrowserCompilerHost.js:28)
at CompilerHost.loadResource (browser-bundle.umd.js:45521)
at Object.get (browser-bundle.umd.js:41198)
at DirectiveNormalizer._fetch (browser-bundle.umd.js:29593)
at DirectiveNormalizer.normalizeTemplateOnly (browser-bundle.umd.js:29636)
at DirectiveNormalizer.normalizeTemplate (browser-bundle.umd.js:29620)
at CompileMetadataResolver.loadDirectiveMetadata (browser-bundle.umd.js:30621)
at browser-bundle.umd.js:30825
at Array.forEach ()
Caused when you point templateUrl to a non-existent file.
templateUrl: "./templates/foo.html",
Template parse error line numbers are off by one
Injection of bundle into iframe is messy
Currently, we inject the bundle after all the other script dependencies due to a weird issue caused by the iframe seemingly loading scripts asynchronously. In order to do this, we check for the Reflect dependency every 10ms, injecting the compiled bundle only when this dependency is satisfied.
This is currently a very messy solution, should improve. Possible other solutions include figuring out how to place compiled bundle into iframe src attribute, binding to iframe document.load event, etc.
Hide scrollbars
Error: Expected 'styleUrls' to be an array of strings.
Similar issue as in #32 - an error that's a compilation error isn't getting returned as such.
Error: Expected 'styleUrls' to be an array of strings.
at assertArrayOfStrings (:4200/assets/compiler/browser-bundle.umd.js:19365)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (:4200/assets/compiler/browser-bundle.umd.js:30667)
at CompileMetadataResolver._getEntryComponentMetadata (:4200/assets/compiler/browser-bundle.umd.js:31383)
at :4200/assets/compiler/browser-bundle.umd.js:31369
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getEntryComponentsFromProvider (:4200/assets/compiler/browser-bundle.umd.js:31368)
at :4200/assets/compiler/browser-bundle.umd.js:31332
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (:4200/assets/compiler/browser-bundle.umd.js:31295)
at :4200/assets/compiler/browser-bundle.umd.js:31297
Console error: "Error: Error encountered resolving symbol values statically"
The error displayed in the console upon compilation isn't treated like an error in the process of compilation, but rather as an error in the internals of the compiler. However, it is a compilation error, and should be treated as such.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.