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.htmlen laapp - Cambia las rutas de referencias en este archivo.
- Cambie el script
liteenpackage.jsona lalite-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