I am running angular 9 on IE11. In tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
},
"angularCompilerOptions": {
"strictInjectionParameters": true
}
}
Yes, it will work if I use "target": "es5" instead of "target": "es2015".
So my question is can I use "target": "es2015" to run angular 9 on IE11? I am getting an error though.
Error: err
I have commented all the core-js/.. imports from polyfills.ts.
Because: https://stackoverflow.com/a/56893234/14208324
polyfills.ts:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
import 'classlist.js';
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
// import 'core-js/es7/reflect';
/**
* Web Animations `#angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
Angular and Anglura-cli version:
Angular CLI: 9.1.12
Node: 10.15.3
OS: win32 x64
Angular: 9.1.12
Note: If I use "target": "es5" as target, no error is being shown but the page remains blank. App is working on chrome and firefox.
Am I missing something?
The Angular app will not work with the IE browser if the target is set as es2015.
I did not get any way to make the angular app work in the IE browser with the target set as es2015.
So there is no way to support the angular app by using the target as es2015.
User needs to set the target as es5 to support the IE browser.
Related
I am trying to include bootstrap in my OJET project where I use ojet v6 library.
I got an error saying ojmodule failed due to "popper is required".
What I have Tried
I have added the popper.js in lib folder.
I have included the lib in main.js file inside require.js configPath array.
requirejs.config({
// Path mappings for the logical module names
paths:
//injector:mainReleasePaths
{
'popper' : 'libs/popper/popper.min' ,
'bootstrap' : 'libs/bootstrap4/js/bootstrap.min',
//other libs goes here
Added the "popper" reference in shim object of main.js
shim: {
'jquery': {
exports: ['jQuery', '$']
},
'Popper' : {
exports : ['Popper', 'popper']
}
}
added the popper reference in an ojet module. by
define(['ojs/ojcore', 'knockout', 'appController','popper','bootstrap'],
function (oj, ko, app, popper,bootstrap) {
Still get an error failed to load ojet module "popper is needed by require.js". Please help or suggest any edit.
Bootstrap 4 uses popper.js and jquery as its dependency. It should be loaded before bootstrap. As I can see you have added in shim and assuming that the path provided in the require.config is correct It should work;
If it is not working you can have a workaround like instead of adding the dependency separately to the project add the bootstrap bundle directly.
requirejs.config({
// Path mappings for the logical module names
paths:
//injector:mainReleasePaths
{
'jquery': 'libs/jquery/jquery-3.3.1',
'bootstrap' : 'libs/bootstrap4/js/bootstrap.bundle.min',
Note the bootstrap.bundle.min.js contains popper but not jquery. So you need to load jquery before bootstrap.
I tried to include underscore.js and followed below steps:
npm i underscore.js, we can install any module because it runs on node
modify path_mapping.json:
"underscore": {
"cdn": "3rdparty",
"cwd": "node_modules/underscore",
"debug": {
"src": "underscore.js",
"path": "libs/underscore/underscore.js",
"cdnPath": "underscore/underscore.1.0"
},
"release": {
"src": "underscore.min.js",
"path": "libs/underscore/underscore.min.js",
"cdnPath": "underscore/underscore.1.0"
}
}
modify main.js
'underscore': 'libs/underscore',
use in viewModels:
define([
"require", "exports", "knockout", "ojs/ojbootstrap", "ojs/ojconverterutils-i18n", "ojs/ojarraydataprovider", "ojs/ojcolor", "ojs/ojconverter-datetime", "underscore","ojs/ojknockout", "ojs/ojbutton", "ojs/ojinputtext", "ojs/ojcollapsible", "ojs/ojinputnumber", "ojs/ojradioset", "ojs/ojcheckboxset", "ojs/ojselectcombobox", "ojs/ojselectsingle", "ojs/ojdatetimepicker", "ojs/ojswitch", "ojs/ojslider", "ojs/ojcolorspectrum", "ojs/ojcolorpalette", "ojs/ojlabel", "ojs/ojformlayout", "ojs/ojlabelvalue","ojs/ojaccordion","ojs/ojactioncard"
],
function (require, exports, ko, Bootstrap, ojconverterutils_i18n_1, ArrayDataProvider, Color, ojconverter_datetime_1,_) {
function EmployeesViewModel() {
_.each([1, 2, 3], console.log);
var self=this;
self.logMsg = ko.observable("none");
self.actionHandler = (event) => {
this.logMsg("Action handler invoked - " + event.currentTarget.id);
};
}
return EmployeesViewModel;
});
instead of adding bootstrap.min.js add bootstrap.bundle.min.js to your require path.
I'm new in Angular. I saw sourcemap in tsconfig.json and by default it is "sourceMap": true. I had few doubts and found this link useful. Still I have the following doubt regarding the same.
I set "sourceMap": false, but couldn't find any change in the app. What will be the actual change if I set so?
Nothing will change in how the app runs.
The change will be in your debugging experience.
Source maps are helpful for debugging code. You write your code in TypeScript, and the compiler turns that source code into JavaScript. When your app is running in a browser like Firefox, the browser is running the JavaScript. Even though the browser is running that JavaScript, if you open the debugger in Firefox, the debugger will display the TypeScript source code and will let you set break points in it. The debugger is able to do that because of source maps, which map the TypeScript source code to the JavaScript runtime code. That is what source maps do: they map the source code to the runtime code to enable source code debugging at runtime.
sourceMap is just for development experience (debug) and normally you don't need these files in production build and if you check angular.json you will found that it 's set to false for you
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false, <----
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
When the sourceMap set to false. the output will be built with out a sourcemap file. And you can't debug with the browser on ts file without that.
sourcemap property enhances your debugging experience, even though the browser can't be able to understand typescript it manages to map your typescript code to javascript code. if in case we need to disable it we need to modify in angular.json file
{
"sourceMap": false, -- modify this attribute
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
I am creating a web player that support both html5 and flash. I am using vue-video-player and wrapping in in a component.
I have installed both videojs-flash and videojs-flvjs.
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
// import VideoJsFlash from 'videojs-flash'
// import VideoJsFlash from 'videojs-flvjs'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
// const { videojs } = VueVideoPlayer
// videojs.plugin('flashPlugin', VideoJsFlash)
// videojs.addLanguage('ml', myLanguageObject)
// videojs.registerPlugin('flashPlugin', VideoJsFlash)
Vue.use(VueVideoPlayer)
Then my playerOptions are
playerOptions: {
// videojs options
muted: true,
language: 'en',
techOrder: ['html5', 'flvjs'], // or ['html5', 'flash']
playbackRates: [0.7, 1.0, 1.5, 2.0],
width: '800px',
height: '800px',
plugins: {
},
flash: {
swf: './#/assets/video-js.swf'
},
poster: './#/assets/logo.png',
sources: [
]
}
I hope to play the video
The error I get is as follows,
video.cjs.js?0e26:441 VIDEOJS: ERROR: The "flvjs" tech is undefined. Skipped browser support check for that tech.
PlayVid.vue?139b:134 the player is readied Player {player_: Player, options_: {…}, id_: "vjs_video_506", name_: null, eventBusEl_: div#vjs_video_506.video-js.vjs-paused.vjs_video_506-dimensions.vjs-controls-enabled.vjs-workinghover…, …}
video.cjs.js?0e26:441 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. MediaError {code: 4, message: "The media could not be loaded, either because the …rk failed or because the format is not supported."}
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
Vue.use(VueVideoPlayer)
and playerOptions
playerOptions: {
// videojs options
muted: true,
language: 'en',
techOrder: ['html5', 'flash'],
playbackRates: [0.7, 1.0, 1.5, 2.0],
width: '800px',
height: '800px',
poster: './#/assets/logo.png',
sources: [{
type: "video/x-flv",
src: "https:/
}]
}
I am working on creating a typescript based app with node.js in Win8 with Visual Studio Code.
I have created a Typescript project following the instructions here:https://basarat.gitbooks.io/typescript/docs/quick/nodejs.html
However, on doing npm start (where my target is index.ts, a syntax error is thrown)
index.ts file:
let Myname: string = "World Lease";
It throws the "Unexpected token : " error AND no JS file is created. console.logs work, but still no js files emitted.
Attaching my tsconfig.json and package.json files.
tsconfig.json:
{
"compilerOptions": {
/* Basic Options */
"target": "es5",
/* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
"module": "commonjs",
/* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
// "lib": [], /* Specify library files to be included in the compilation: */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
// "outDir": "./", /* Redirect output structure to the directory. */
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true,
/* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
"typeRoots": ["node_modules/#types"] /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
/* Source Map Options */
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
}
}
package.json:
{
"name": "learntool",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"start": "npm run build:live",
"build:live": "nodemon --exec \node_modules\bin\ts-node -- index.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/node": "^8.0.9",
"nodemon": "^1.11.0",
"ts-node": "^3.2.0",
"typescript": "^2.4.1"
}
}
Please note the build:live line in the above snippet. It has been changed from the specified one because i use Windows.
Could you try to add exclude to your tsconfig.json, e.g.:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
},
"exclude": [
"node_modules/"
]
}
Double check your postinstall scripts. After I copied your code over, and ran npm install, I was also getting syntax errors, but I noticed this line:
"build:live": "nodemon --exec \node_modules\bin\ts-node -- index.ts"
...and decided to run each component manually. tsc-node wasn't in bin but in .bin, so I changed the line to:
"build:live": "nodemon --exec \node_modules\\.bin\ts-node -- index.ts"
...and it started running.
I'm trying to debug an application written in Angular 2 build from webpack with VScode. I'm able to use the debugger for chrome extension in VSCode to attach my application. And it did hit the break point of the compiled js file. But it cannot find the sourcemap files.
It seems that webpack will have a webpack:// to host the files which the *.js file pointed to, like in the image:
And I can set the breakpoint inside the ts files inside webpack folder. However vscode is not able to find the ts files. So I change the configuration of webpack to
output: {
path:root('__build');
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
And then all files seemed to map to the absolute paths of the original ts files. And in chrome developer tool it looks like this:
But both chrome and vscode said the files inside this file:// is different from the original ts files. So I'm wondering whether there's a way that in webpack's configuration could make *.js file sourcemap to original ts files. And here's all my configurations:
typescript configuration:
{
"compilerOptions": {
"outDir": "dist",
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
webpack config:
{
entry: "./src/app/bootstrap",
output: {
path: root('__build__'),
filename: env({
'development': '[name].js',
'all': '[name].[hash].min.js'
}),
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
devtool:'source-map',
devServer: {
contentBase: "public/"
}
}
Another thing is that if in chrome developer tools, if I add the original files into the workspace and map the files from file:// to this folder, I can actually set breakpoints inside these files. So I'm wondering there's a way to map to local resources in vscode.
I changed this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
to this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+encodeURI(info.absoluteResourcePath);
}
},
and now it encodes the spaces properly, and the sourcemap file works as expected.
Thanks to Rob Lourens, this problem is caused by spaces and other special characters in the file path that may break sourcemaps.