error - angular 404
Angular 2-404 traceur no encontrado (17)
Seguí la guía de inicio y amplié un poco para obtener una versión angular anterior 2. Actualicé mi revisión y cambié todo en consecuencia. Cuando estoy ejecutando el servidor web, ahora recibo el error 404 para traceur ...
Aquí está mi estructura de proyecto:
Archivos Relevantes :
Index.html:
<html>
<head>
<title>Kinepolis HR-tool</title>
<base href="./">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Kinepolis HR tool">
<meta name="author" content="Jeffrey Devloo!">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<!-- CSS for PrimeUI -->
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import(''app'').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
systemjs.config.js
(function(global) {
// map tells the System loader where to look for things
var map = {
''app'': ''app'', // ''dist'',
''rxjs'': ''node_modules/rxjs'',
''angular2-in-memory-web-api'': ''node_modules/angular2-in-memory-web-api'',
''@angular'': ''node_modules/@angular'',
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
''app'': { main: ''main.js'', defaultExtension: ''js'' },
''rxjs'': { defaultExtension: ''js'' },
''angular2-in-memory-web-api'': { defaultExtension: ''js'' },
};
var packageNames = [
''@angular/common'',
''@angular/compiler'',
''@angular/core'',
''@angular/http'',
''@angular/platform-browser'',
''@angular/platform-browser-dynamic'',
''@angular/router'',
''@angular/router-deprecated'',
''@angular/testing'',
''@angular/upgrade'',
];
// add package entries for angular packages in the form ''@angular/common'': { main: ''index.js'', defaultExtension: ''js'' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: ''index.js'', defaultExtension: ''js'' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html''s chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Un posible problema podría ser esto está boicoteando mi progreso.
@Coquelicot me dio una respuesta similar, pero pensé que respondería de todos modos ya que la mía tiene un poco más de detalle. Normalmente no tengo ningún problema con el uso de comentarios de varias líneas, pero si pongo una declaración de importación dentro de uno, obtengo este error exacto. Simplemente poniendo comillas alrededor de la declaración de importación se deshizo del error para mí. Muy extraño.
Al principio, debe compilar sus archivos de TypeScript con
$ tsc
mando. Si está ejecutando aplicaciones fuera del entorno del nodo, debe compilar los archivos de TypeScript de forma manual.
Compruebe también tsconfig.json: si la versión del script está configurada como ES6 para Angular 2.0
Creo que lo primero que debes hacer es comprobar si has descargado el traceur. He encontrado este problema y me tocó varias horas buscarlo. Pero descubrí que no hay un traceur en mi directorio node_modules
. Así que he npm install traceur
para instalar traceur. Luego actualice el systemjs.config.js
, agregando una línea como ''traceur'':''npm:traceur/bin/traceur.js''
. Afortunadamente, este problema se resolvió. ¡Espero que esto te ayude!
Debido al cambio de versión arroja el error 404. para resolver este problema, tenemos que hacer las siguientes modificaciones en el archivo systemjs.config.js:
reemplace
npm:angular-in-memory-web-api/
connpm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js
. en el mapaeliminar el código a continuación en paquetes:
''angular-in-memory-web-api'': { main: ''./index.js'', defaultExtension: ''js'' }
El problema era que uno de mis servicios no era válido. He agregado el constructor como uno de los últimos métodos para demostrar propósitos y se negó a cargar.
Entonces, para aquellos que alguna vez encuentren este error, abren el error y verifican los errores de los archivos a los que se hace referencia. El problema no es que no encuentre traceur sino que NO PUEDE cargar un archivo.
El problema está dentro del sistema. Creo que:
Hay una expresión regular, que se usa para detectar estados de importación:
var esmRegEx = /(^/s*|[}/);/n]/s*)(import/s*([''"]|(/*/s+as/s+)?[^"''/(/)/n;]+/s*from/s*[''"]|/{)|export/s+/*/s+from/s+["'']|export/s*(/{|default|function|class|var|const|let|async/s+function))/;
Esta expresión regular detectará import-statements dentro de multiline-comments y causará este horrible error. He abierto un problema aquí:
En caso de que ayude a alguien, las dos veces que he experimentado este problema, ha sido causado por comentarios de líneas múltiples (ver la respuesta de Picci here para ver un ejemplo).
En mi caso , ni siquiera tenía traceur
como una dependencia en node_modules
y la aplicación funcionaba bien, pero de repente comencé a pedir traceur
después de agregar una biblioteca que tampoco necesitaba traceur
.
La solución fue hacer referencia a las bibliotecas recién agregadas de las carpetas de bundles
lugar de src
(o carpeta predeterminada) en system.config.js
y especificar la versión de archivos .umd.js
. Además, tuve que eliminar la entrada main
de la sección de packages
.
La razón detrás es que cargar los módulos umd
desde las carpetas del bundle
no desencadena el transpilador de traceur, ya que supone que el módulo de la biblioteca ya está en el formato correcto. De lo contrario, puede suponer que el código está escrito en es2015
y necesita transpiración, por lo que invoca traceur
.
Me encontré con este problema de traceur
después de intentar conectarme a una instancia de Firebase
desde una aplicación "Tour of Heroes" perfectamente ejecutable con la ayuda de AngularFire2
. Intenté todas las respuestas aquí, pero ninguna de ellas me ayudó, así que busqué en Google hasta que encontré este issue Github.
Experimenté este mismo error al migrar de RC4 a RC6.
Para mi proyecto, tuve que actualizar el archivo systemjs.config.js. Dejé de hacer referencia a los archivos raíz index.js y comencé a hacer referencia a los archivos core.umd.js en / bundles.
Siguiendo esto: example
Hay múltiples razones detrás de este error,
1) A veces los comentarios se mencionan en la parte superior del archivo app.component.ts
2) apuntando a un archivo umd incorrecto
3) Si está utilizando la versión ts (Typescript), mencione las opciones del transpiler en el archivo config.js como a continuación o compile su archivo .ts al archivo .js usando transpiler y luego haga referencia al archivo .js en el código:
(function (global) {
System.config({
transpiler: ''ts'',
typescriptOptions: {
tsconfig: true
},
paths: {
// paths serve as alias
''npm:'': ''node_modules/''
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: ''app'',
// angular bundles
''@angular/core'': ''npm:@angular/core/bundles/core.umd.js'',
''@angular/common'': ''npm:@angular/common/bundles/common.umd.js'',
''@angular/compiler'': ''npm:@angular/compiler/bundles/compiler.umd.js'',
''@angular/platform-browser'': ''npm:@angular/platform-browser/bundles/platform-browser.umd.js'',
''@angular/platform-browser-dynamic'': ''npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js'',
''@angular/http'': ''npm:@angular/http/bundles/http.umd.js'',
''@angular/router'': ''npm:@angular/router/bundles/router.umd.js'',
''@angular/forms'': ''npm:@angular/forms/bundles/forms.umd.js'',
// other libraries
''rxjs'': ''npm:rxjs'',
''angular-in-memory-web-api'': ''npm:angular-in-memory-web-api'',
''angular2'' : ''''
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: ''./main'',
defaultExtension: ''ts''
},
rxjs: {
defaultExtension: ''js''
},
''angular-in-memory-web-api'': {
main: ''./index.js'',
defaultExtension: ''js''
}
}
});
})(this);
He tenido el mismo problema y no pudo cargar uno de mis archivos. Abrí el archivo y todo estaba correcto allí.
El problema es que me han comentado un fragmento en el mismo archivo. El fragmento contenía esta palabra clave " clase de exportación ". A pesar de que fue comentada, fue analizada por Angular.
Asegúrese de no tener palabras clave " exportar clase " en sus comentarios, y elimine el código temporal comentado solo para comprobar si funciona sin él.
Obtuve este error cuando ejecuté el proyecto de inicio rápido angular4 en asp.net mvc. cambiar "es2015" a "commonjs" dentro de tsconfig.json resolvió mi problema.
Para mí, lo que sucedió es que un compañero de trabajo eliminó un archivo TypeScript, lo que significaba que ya no necesitaba un archivo * .js antiguo (ya que nuestro control de origen ignora estos archivos). Si el error de traceur hace referencia a un archivo * .js que no necesita, elimine el archivo.
Pasé hasta 3 horas tratando de descubrir qué hice mal en mis códigos, pude descubrir que "Comentar una sección de mis códigos causó el problema".
Así que amablemente asegúrese de no comentar ninguno de sus códigos fuera del alcance de un componente
Tengo el mismo problema, después de buscar en Google para este caso, luego lo resolví cambiando: Problema principal: main: ''index.js'' debe cambiarse a main: ''bundles / core.umd.js''
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: ''index.js'', defaultExtension: ''js'' };
});
=> main: ''bundles / core.umd.js''
packages: {
''@angular/core'': {
main: ''bundles/core.umd.js''
},
''@angular/compiler'': {
main: ''bundles/compiler.umd.js''
},
''@angular/common'': {
main: ''bundles/common.umd.js''
},
''@angular/platform-browser'': {
main: ''bundles/platform-browser.umd.js''
},
''@angular/platform-browser-dynamic'': {
main: ''bundles/platform-browser-dynamic.umd.js''
},
''@angular/http'': {
main: ''bundles/http.umd.js''
}
}
Nota: Mis mapas:
map: {
''@angular'': ''node_modules/@angular'',
''rxjs'': ''node_modules/rxjs''
}
Tengo este problema cuando sigo el tutorial de Angular Heroes. Fue causado por la ubicación no válida de la importación angular-en-memoria-web-api, en el archivo systemjs.config.js
. La ubicación correcta debería ser:
''angular-in-memory-web-api'': ''npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js''
y eliminar packages.angular-in-memory-web-api
ver https://github.com/angular/quickstart/commit/541bdc5f634e1142860c56cace247234edfaf74b
Tuve este problema exacto que se resolvió al corregir el nombre de un archivo.