javascript - navigationend - router events subscribe angular 4
angular2 falla importación lodash (3)
Empecé la sencilla aplicación Angular 2, todo funcionando. Pero cuando agrego la importación de lodash y trato de usarlo, recibo errores y la aplicación deja de funcionar, y no puedo descubrir cuál es el problema.
Estoy recibiendo estos 2 errores en la consola:
Untaught SyntaxError: token inesperado <__ exec @ system.src.js: 1374entry.execute @ system.src.js: 3300linkDynamicModule @ system.src.js: 2921link @ system.src.js: 2764execute @ system.src.js: 3096doDynamicExecute @ system.src.js: 715link @ system.src.js: 908doLink @ system.src.js: 569updateLinkSetOnLoad @ system.src.js: 617 (función anónima) @ system.src.js: 430run @ angular2-polyfills.js: 138zoneBoundFn @ angular2-polyfills.js: 111lib $ es6 $ promise $$ interno $$ tryCatch @ angular2-polyfills.js: 1511lib $ es6 $ promise $$ interna $$ invokeCallback @ angular2-polyfills.js: 1523lib $ es6 $ promise $ $ internal $$ publish @ angular2-polyfills.js: 1494 (función anónima) @ angular2-polyfills.js: 243run @ angular2-polyfills.js: 138zoneBoundFn @ angular2-polyfills.js: 111lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js: 1305 angular2-polyfills.js: 138
Untaught SyntaxError: Token inesperado <Evaluando http: // localhost: 3000 / lodash Error al cargar http: // localhost: 3000 / app / app.jsrun @ angular2-polyfills.js: 138zoneBoundFn @ angular2-polyfills.js: 111lib $ es6 $ promesa $$ interno $$ tryCatch @ angular2-polyfills.js: 1511lib $ es6 $ promise $$ interna $$ invokeCallback @ angular2-polyfills.js: 1523lib $ es6 $ promise $$ internal $$ publish @ angular2-polyfills.js: 1494lib $ es6 $ promise $$ interno $$ publishRejection @ angular2-polyfills.js: 1444 (función anónima) @ angular2-polyfills.js: 243run @ angular2-polyfills.js: 138zoneBoundFn @ angular2-polyfills.js: 111lib $ es6 $ promesa $ asap $$ flush @ angular2-polyfills.js: 1305
ARCHIVOS
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<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/app'')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
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.2",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"lodash": "^4.1.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.6",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.4",
"typescript": "^1.7.5"
}
}
import {bootstrap} from ''angular2/platform/browser''
import {Component} from ''angular2/core'';
import * as _ from ''lodash'';
@Component({
selector: ''my-app'',
template: ''<h1>My First Angular 2 App with lodash</h1>''
})
export class AppComponent {
constructor(){
console.log(_.last([1, 2, 3]));
console.log(''hello'');
}
}
bootstrap(AppComponent);
Tal vez podrías probar esta configuración en el nivel de SystemJS:
System.config({
(...)
map: {
lodash: ''node_modules/lodash/lodash.js''
},
meta: {
lodash: { format: ''amd'' }
}
}
En un archivo TS, puede usarlo como se describe a continuación:
import _ from ''lodash'';
_.forEach([1,2,3], function(e) {
console.log(e);
});
Este problema podría ayudarlo: https://github.com/systemjs/systemjs/issues/951 .
Thierry
Totalmente trabajando:
Instale todo a través de la terminal:
npm install lodash --save
tsd install lodash --save
Agregar rutas en index.html
<script>
System.config({
packages: {
app: {
format: ''register'',
defaultExtension: ''js''
}
},
paths: {
lodash: ''./node_modules/lodash/lodash.js''
}
});
System.import(''app/init'').then(null, console.error.bind(console));
</script>
Importar lodash en la parte superior del archivo .ts
import * as _ from ''lodash''
Resolví importar lodash de la siguiente manera:
import * as _ from ''lodash'';
y en systemjs.config.js definí esto:
map: { ''lodash'' : ''node_modules/lodash/lodash.js'' }