I am trying to use the editor in my Angular 8 app. Note: The exact same error was listed in one of the SO questions, but the answer was not there. I have gone through GIT discussions on this issue, but still the error persists.
Here is my angular.json assets:
"assets": [
{
"glob": "**/*",
"input": "node_modules/ngx-monaco-editor/assets/monaco",
"output": "./assets/monaco/"
},
"src/favicon.ico",
"src/assets"
]
This is in my app.module.ts:
MonacoEditorModule.forRoot()
This is in my component:
<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
But, I get this error, while trying to run the page:
GET http://localhost:4200/assets/monaco/vs/loader.js net::ERR_ABORTED 404 (Not Found) ngx-monaco-editor.js:76
Are you initializing the Element on the html ?. I had a similar problem, And the way I solved it was adding this to the ngx-monaco.
<ngx-monaco-editor [options]="{ theme: 'vs-dark', language: 'mylang' }" (ngModelChange)="changes($event)" [(ngModel)]="_code" (init)="onInitEditor($event, 'largeEditor')">
</ngx-monaco-editor>
on the .ts
async onInitEditor(editor, editorId) {
this.editorRef[editorId] = editor;}
EDIT:
The library isself needs to be inialized its a property of the ngx-monaco-editor.
Related
I am running a Gatsby site on Netlify, there is an error / crash specific to IE and I want to show an alert and then redirect to chrome download page if the user is using IE, since I am not supporting IE anyway. I think the crash is caused by a npm package and i dont wanna change to other one because it suit my need.
I put the below script in the Layout component which is run on every page, but the error kicks in and crash the site, the site flash a normal dom before it crash. Am wondering if there are any way to fix it
The script works fine if i change the condition to chrome and run it on chrome to test it
//Layout.js
const handleIE = () => {
if (typeof window !== "undefined") {
let ua = window.navigator.userAgent
if(ua.indexOf('MSIE') > -1) {
alert('Internet Explorer is not supported. Please use Chrome or Firefox')
window.location.href = "https://www.google.com/chrome/";
}
}
}
<Helmet>
<script>{handleIE()}</script>
</Helmet>
// Error log on IE
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
HTML1300: Navigation occurred.
SEC7118: XMLHttpRequest for https://ka-f.fontawesome.com/releases/v5.15.3/css/free.min.css?token=e4232fccfser required Cross Origin Resource Sharing (CORS).
SEC7118: XMLHttpRequest for https://ka-f.fontawesome.com/releases/v5.15.3/css/free-v4-shims.min.css?token=e4232fccfser required Cross Origin Resource Sharing (CORS).
SEC7118: XMLHttpRequest for https://ka-f.fontawesome.com/releases/v5.15.3/css/free-v4-font-face.min.css?token=e4232fccfser required Cross Origin Resource Sharing (CORS).
SCRIPT1003: Expected ':' File: classic.js, Line: 679, Column: 32
SCRIPT1003: Expected ':' File: classic.js, Line: 679, Column: 32
[object Error]
description "Object doesn't support property or method 'trunc'"
message "Object doesn't support property or method 'trunc'"
name "TypeError"
number -2146827850
stack "TypeError: Object doesn't support property or method 'trunc'
SCRIPT438: Object doesn't support property or method 'trunc'
File: framework-7bdbbf12b92c7ff172a2.js, Line: 2, Column: 2442
Thank you!!
The IE issue is breaking your application before the script can load. Despite being improbable because you are loading the script in each page that imports the Layout component (you may want to use one of the gatsby-browser APIs), your code seems to work.
If you want to be able to bypass this limitation by showing an alert to the IE
user you may need to polyfill the functionality, at least to allow the trunc method, which seems to be the offending one.
Said that, this trunc method may come from your code (unlikely) or from third-party dependencies. If it's from your code just remove it or find another IE-friendly solution. If it comes from one of the Node modules, you may need to find another solution.
First of all, you need to find which dependency is causing this issue, then, as it is described in this GitHub thread.
Create a .babelrc at the root of your Gatsby project:
{
"env": {
"test": {
"presets": [
"#babel/preset-env",
{
"loose": true,
"modules": "commonjs",
"useBuiltIns": "entry",
"targets": { "browsers": [">0.25%", "not dead"] }
}
]
}
},
"presets": [
"babel-preset-gatsby",
[
"#babel/preset-env",
{
"debug": true,
"loose": true,
"modules": false,
"useBuiltIns": "entry",
"targets": { "browsers": [">0.25%", "not dead"] }
}
]
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
"babel-plugin-macros",
"#babel/plugin-syntax-dynamic-import",
[
"#babel/plugin-transform-runtime",
{
"helpers": true,
"regenerator": true
}
]
]
}
Note: you may need to install the required modules.
Then, you only need to add the polyfill. In your gatsby-browser.js:
import '#babel/polyfill'
// eslint-disable-next-line import/prefer-default-export
export const onClientEntry = () => {
// Without this function body the import will not be picked up.
// handleIE()
}
Aas I said at the beginning of the post, this gatsby-browser.js API (onClientEntry) will work for your use case, so you can re-use it. You can load there your script (handleIE) to check the user agent. In that way, you will be only loading once per user entry the script, rather X times (one for each page that extends the Layout component the user visit)
You may also find useful this GitHub gist about polyfill IE 10-11 in Gatsby.
When running Sencha cmd 6.5, and I get the following error:
[ERR] C2001: Closure Compiler Error (Parse error. undefined label "f") -- compression-input:1:4095
How can I locate the code at compression-input:1:4095 ?
This happens when I include a custom javascript file in app.json using:
"js": [
{
"path": "app.js",
"bundle": true
},{
"path": "custom.js",
"includeInBundle": true
}
],
The error disapears when I remove the reference to custom.js in app.json.
If I interpret the error correctly, it means that closure compiler finds an error on line 1, character 4095 of the compression-input. But the first line of custom.js is not such long.
How can I locate the offending code ?
And by the way, what is an undefined label in closure compiler ?
I had the same issue a year ago, and I was told you cannot locate it from the error message.
Assuming that you have already tried to open your uncompiled project directly in the browser, and not getting a syntax error, there's not much you can do except narrowing it down further by splitting the custom.js content in two parts and check these independently.
In my case it was Ext.define where should have been Ext.create, and the syntax error is thrown because usage of Ext.define is rewritten into other commands during generation of the compression-input. Maybe if you look for this specifically, you can find it.
I faced similar problems too.
I disabled compression in app.json file:
"testing": {
"compressor": {
//"type": "closure",
"type": "none",
"warningLevel": "quiet"
},
"output": "...."
}
And I separately checked the output app.js file with the compiler (which can be downloaded):
java -jar closure-compiler-v20210302.jar --js app.js --js_output_file compiled_output.js
I had a static website and I'm trying to kinda convert it into MEAN stack using Angular 5.
I want to add some scripts and styles for galleries, scrolling etc. to my HTML. The scripts need jQuery and I don't have to access them really they just need to run. I added them in the .angular-cli.json like so:
"styles": [
"styles.css",
"./src/app/assets/css/font-awesome-4.3.0/css/font-awesome.min.css",
"./src/app/assets/css/normalize.css",
"./src/app/assets/css/owl.carousel.css",
"./src/app/assets/css/owl.theme.css",
"./src/app/assets/css/main.css",
"./src/app/assets/css/responsive"
],
"scripts": [
"./src/app/assets/plugins/jquery-1.11.1.min.js",
"./src/app/assets/plugins/jquery.smooth-scroll.min.js",
"./src/app/assets/plugins/imagesloaded.js",
"./src/app/assets/plugins/owl.carousel.min.js",
"https://maps.googleapis.com/maps/api/js",
"./src/app/assets/plugins/jquery.waypoints.min.js",
"./src/app/assets/plugins/main.js"
],
Also added allowJs: true in the tsconfig.app.json
But I get an error when I try to run ng serve or ng build.
Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
at hasOwnProperty ()
at Object.hasProperty (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:2229:31)
at parseConfig (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:71815:16)
at /home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:71721:22
at Object.parseJsonConfigFileContent (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:71735:11)
at Object.readTsconfig (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/utilities/read-tsconfig.js:8:32)
at new NgCliWebpackConfig (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/models/webpack-config.js:19:42)
at Class.run (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/tasks/serve.js:71:29)
at check_port_1.checkPort.then.port (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/commands/serve.js:123:26)
at
at process._tickCallback (internal/process/next_tick.js:160:7)
My linter also throws an error on $(document).ready(); but how would I replace it?
I make a site with Angular 2 and will add a JavaScript file to the component. This script must render the height of some images equal to the height of the window of the browser.
How could I add this script to the component?
The solutions I found on SO or anywhere else, looks like this:
import './home.component.js';
But it's not what I need! I need this in my home.component.ts file:
#Component({
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
jsUrls: ['./home.component.js']
})
or something...
Update 1: In my site I use Angular CLI and TypeScript.
Update 2: You could find my project on GitHub: https://github.com/WatchFriends/Web
This works, and works well:
In the angular-cli.json file, there is a section, "scripts". Add the path to your script in that array (as a double-quoted string).
Here's a frag from that file:
"mobile": false,
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
"scripts": ["./app/my_script.js"],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
my_script is this:
function sayHello ( ) {
console.log ( 'I am saying hello' );
}
Then just call it like you'd expect from anywhere. To beat the annoying "not found" error you may get in your IDE, you can either just do this:
window [ 'sayHello' ] ( );
Or create a utility class that contains a reference to that function, such that you can import the class and call the function as usual (you are basically just providing a framework facade for your "my_script.js" functions).
I tried both, it worked just fine, no errors (you are using ng serve or ng build of course etc).
I'm trying to in include https://www.npmjs.com/package/react-bootstrap-typeahead in my project, but when I run my grunt browserify task, I get a ParseError: Unexpected token error. Full message here:
Running "browserify:dist" (browserify) task
>> /path/to/project/node_modules/react-bootstrap-typeahead/css/Typeahead.css:1
>> .bootstrap-typeahead .dropdown-menu {
>> ^
>> ParseError: Unexpected token
Warning: Error running grunt-browserify. Use --force to continue.
Aborted due to warnings.
The issue being that there is a require('/some/file.css') inside the react-bootstrap-typeahead source js.
Here is my grunt browserify task:
browserify: {
dist: {
cwd: 'build',
options: {
transform : ['browserify-css'],
alias: {
'index' : './dist/index.js',
'root' : './dist/containers/root.js',
'designs' : './dist/components/designs.js',
'addMutationForm' : './dist/components/addMutationForm.js',
'ProteinChecker': './dist/containers/ProteinChecker.js',
'configureStore': './dist/configureStore.js',
'actions' : './dist/actions.js',
'reducers' : './dist/reducers.js',
'utils': './dist/utils.js',
},
require: [
'./node_modules/isomorphic-fetch',
'./node_modules/jquery',
'./node_modules/react',
'./node_modules/react-dom',
'./node_modules/bootstrap',
'./node_modules/redux',
'./node_modules/babel-polyfill',
'./node_modules/redux-logger',
'./node_modules/redux-thunk',
'./node_modules/underscore',
'./node_modules/redux-form',
'./node_modules/react-bootstrap-typeahead'
]
},
src: ['./dist/*.js', './dist/*/*.js'],
dest: './public/build/app.js'
}
}
A few things I came across while attempting to solve the problem:
A similar SO (yet unanswered) question but using webpack, not grunt+browserify so I don't believe applicable:
Using react-bootstrap-typeahead generating CSS errors
And a closed issue on the github page of the react-bootstrap-typeahead project, but doesn't address use through grunt:
https://github.com/ericgio/react-bootstrap-typeahead/issues/2
which suggests using browserify-css transform.
I've tried to get grunt to use this transform by adding transform : ['browserify-css'] in the options field, but that didn't work. I still get the exact same error message.
I tried using browserify with the browserify-css transform on the command line to bundle up just this one library, and then include that bundle, but this leads to yet more errors down the line that I believe have to do with relative imports (and I don't think this is a good solution anyway because if I understand browserify right, it will end up including things like react twice, once for the typeahead bundle that I made on the command line and again for the actual app bundle and then the final js file is HUGE!).
Any ideas on how I can resolve this?
Thanks in advance!
So the solution it turns out was to add
"browserify": {
"transform": ["browserify-css"]
}
to the packages.json of react-bootstrap-typeahead.
It was in the browserify-css docs... (facepalm)