support requirement internet javascript typescript angular polyfills

javascript - requirement - angular 6 internet explorer 11



La aplicación Typescript de Angular2 lanza 404 en componentes cuando no se especifica la extensión js (7)

Después de probar muchas otras soluciones sugeridas por otros, descubrí que se podía escribir con puntos en los nombres de archivo y estas dos soluciones funcionaron para mí. primero:

defaultJSExtensions: true,

pero defaultJSExtensions es una propiedad que quedará en desuso en el futuro y segundo:

packages: { ''.'': { defaultExtension: ''js'' } }

Acabo de empezar a jugar con Angular2, y me encontré con un problema de extensión de archivo de componente extraño:

Usemos la demo de inicio rápido de 5 minutos de angular.io (reproduciré el código aquí como referencia).

Estructura de archivos

angular2-quickstart |- app | |- app.component.ts | |- boot.ts | |- index.html |- package.json |- tsconfig.json

paquete.json

{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent /"npm run tsc:w/" /"npm run lite/" " }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^1.3.1", "typescript": "^1.7.3" } }

tsconfig.json

{ "compilerOptions": { "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] }

app / app.component.ts

import {Component} from ''angular2/core''; @Component({ selector: ''my-app'', template: ''<h1>My First Angular 2 App</h1>'' }) export class AppComponent { }

aplicación / boot.ts

import {bootstrap} from ''angular2/platform/browser'' import {AppComponent} from ''./app.component'' bootstrap(AppComponent);

index.html

<html> <head> <title>Angular 2 QuickStart</title> <!-- 1. Load libraries --> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: ''register'', defaultExtension: ''js'' } } }); System.import(''app/boot'') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>

Esto funciona como un encanto, pero expone toda la estructura de archivos, incluidos los node_modules y la configuración, lo que parece una mala idea.

Así que intenté exponer solo la carpeta de la app . Para lograr eso, hice lo siguiente:

  • Copie los archivos javascript referenciados en una carpeta de app/scripts
  • Mueve el index.html en la app
  • Cambia las rutas de referencias en este archivo.
  • Cambie el script lite en package.json a la lite-server --baseDir app

Al ejecutar esto, todo funcionó, excepto que angular2-polyfills.js devolvió:

Error: XHR error (404 Not Found) loading http://localhost:3000/app.component(…) run @ angular2-polyfills.js:138 zoneBoundFn @ angular2-polyfills.js:111 lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511 lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523 lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494 lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:1444 (anonymous function) @ angular2-polyfills.js:243 run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111 lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305

Por supuesto, si pido http://localhost:3000/app.component.js el archivo se devuelve correctamente.

Entonces mi pregunta es: ¿por qué la extensión .js no se adjunta a app.component , lo que resulta en este error, donde funcionó cuando el servidor baseDir era la raíz del proyecto? ¿Me perdí alguna opción de configuración?

En mi archivo boot.ts cambié esta línea:

import {AppComponent} from ''./app.components''

y funciona. También informé a Google hoy.

En mi caso, se resuelve cuando se agrega module.id

@Component({ ***moduleId: module.id,*** providers : [MyService], templateUrl: ''sandbox.component.html'', })

Este problema puede deberse a JetBrains WebStorm al refactorizar archivos a nuevas ubicaciones. Parece anexar la extensión .ts a las importaciones.

Por lo tanto, mantenga sus nuevos archivos en sus lugares pero verifique las importaciones de cada archivo.

Todas sus importaciones deben parecerse a esto

import {MyComponent} from ''./Components/MyComponent'';

Y no esta

import {MyComponent} from ''./Components/MyComponent.ts'';

Puede configurar la ruta a su carpeta de aplicaciones. En mi caso, estoy usando angular 2 para producir una versión móvil de nuestra aplicación y tuve que configurar el Sistema de la siguiente manera:

System.config({ paths: { ''app/*'': ''./js/mobile/dist/*'' }, packages: { app: { format: ''register'', defaultExtension: ''js'' } } }); System.import(''app/main'') .then(null, console.error.bind(console));

Como puede ver, decidí asignar "aplicación" a "dist" donde tengo mis archivos js compilados para mantenerlos separados de los archivos ts.

Te estás perdiendo la aplicación / main.ts. Es solo unas pocas líneas, por lo que es bastante fácil pasarlo por alto en el inicio rápido.

Tuve el mismo error con el cromo, después de quitarme el cabello por un tiempo, intenté apagar Adblock y funcionó después de eso. Si tienes adblock, es probable que sea el culpable