Menu
This is my Angular5 project structure.
Both tsconfig.app.json and package.json contain this section
"include": [
"/src/main.ts",
"/src/polyfills.ts"
]
But no matter what I try I still get this error:
\polyfills.ts & \main.ts is missing from the TypeScript compilation.
Please make sure it is in your tsconfig via the 'files' or 'include' property.
Anyone has idea what's missing here?
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
src/tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"include": [
"main.ts",
"polyfills.ts"
],
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
572
A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
main. ts file is the entry point of our web-app.It compiles the web-app and bootstraps the AppModule to run in the browser. It starts with importing the basic module which we need. platformBrowserDynamic().bootstrapModule(AppModule) This code has reference to the parent module i.e AppModule.
It's called Safe Navigation Operator which can be used to prevent Angular from throwing errors, when trying to access object properties of an object that don't exist. Here it is, protecting against a view render failure if the header is null.
The Angular team is deprecating support for Internet Explorer 11 in Angular v12 (to be released in May 2021 and supported through November 2022), and plans to remove support for this browser in Angular v13 (late 2021).
The polyfill provides a functionality expected to be natively available. An Angular application created with the angular-cli contain the file src/polyfills.ts. The file highlight the different modules that might be needed for a specific browser in order to work properly.
Starting from a very simple scenario where we load all the possible modules to more advanced ones. The polyfills are often a neglected part of an Angular application resulting in a performance loss for your web application and users. In our first case, we are just blindly uncommenting all the imports statements in our polyfills files.
You can add your own extra polyfills to this file. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. Application imports. Files imported after ZoneJS should be loaded before your main file.
Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers. You can compensate by loading polyfill scripts ("polyfills") on the host web page ( index.html ) that implement missing features in JavaScript. A particular browser may require at least one polyfill to run any Angular application.
Found the solution. The problem is because I was in a symbolic link directory ($HOME/dev -> d:\dev\ ) Move to the original directory (d:\dev) and run your commands and it works.
Source: https://github.com/angular/angular-cli/issues/9909
57
Editing angular.json to add following attribute under the node projects/project/architect/build/options should help make "preserveSymlinks": true work.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
