tutorial examples ejemplos javascript angular

javascript - examples - angularjs tutorial



Error de instalación Angular2 de 5 minutos: el requisito no está definido (7)

Descubrí que la razón por la que el mío provocó un error fue debido al módulo establecido como "commonjs" en mi archivo tsconfig.json , cambiándolo a sistema arreglado, ahora se ve a continuación

{ "compilerOptions": { "target": "es5", "module": "system", "declaration": false, "noImplicitAny": false, "removeComments": true, "noLib": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true }, "exclude": [ "node_modules" ] }

EDITAR Esta respuesta se basó en Angular 2 beta 17. Según el momento de esta respuesta y los rápidos cambios que ha sufrido el angular 2, es posible que esto ya no funcione.

Estoy haciendo el inicio rápido de Angular2 5 minutos .

Alrededor de la mitad del tutorial ahora, tengo los siguientes archivos configurados correctamente:

  • index.html,
  • app.component.ts
  • app / boot.ts
  • package.json
  • tconfig.json

Ran npm start y npm start este error:

Uncaught ReferenceError: require is not defined(anonymous function) @ boot.js:1 angular2-polyfills.js:143 Uncaught TypeError: Cannot read property ''split'' of undefinedreadMemberExpression @ system.src.js:1456(anonymous function) @ system.src.js:3224(anonymous function) @ system.src.js:3749complete @ system.src.js:2487run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111

Encontré este enlace sobre el uso de la cuña es6 e incluí <script src="node_modules/es6-shim/es6-shim.js"></script> .

Sin embargo, todavía Uncaught ReferenceError: require is not defined el Uncaught ReferenceError: require is not defined error Uncaught ReferenceError: require is not defined .

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/es6-shim/es6-shim.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/boot'') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>

package.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" } }

tconfig.json

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

La aplicación compilada / boot.js

Último registro desde npm start

Estoy usando angular-cli y ahora usa webpack pero recibí este error al cargar css. Agregué declare let require: any; antes de mi componente y ahora funciona.

Tengo el mismo error en la versión angular2.beta15.

Lo he resuelto quitando

format: ''register'',

fuera de index.html

<script> System.config({ packages: { app: { format: ''register'', defaultExtension: ''js'' } } }); </script>

Tuve un problema similar causado por el hecho de que estaba configurando el formato incorrecto para el paquete. El formato del paquete es muy importante para que SystemJS sepa cómo manejarlo. Documentación Here

<script> System.config({ packages: { appjs: { format: ''register'', defaultExtension: ''js'' }, primeng: { format: ''cjs'', defaultExtension: ''js'' } }, map: { ''primeng'': ''lib'' } }); System.import(''appjs/main'').then(null, console.error.bind(console)); </script>

En mi caso, estaba configurando el formato de primeng para "registrarse" en lugar de "cjs".

Utilicé la importación "no válida":

import {UrlSegment} from ''@angular/router/index'';

Después de eliminar / indexar , comenzó a compilarse nuevamente.

OK finalmente consiguió que mi aplicación ''básica'' funcionara.

Primero mi problema fue que npm start no estaba compilando mis archivos .ts mecanografiado.

De esta publicación , encontré una respuesta aquí. No se puede encontrar el módulo externo ''angular2 / angular2'' - Angular2 con Typecript

Necesitaba ejecutar npm install -g tsd@latest para actualizar mi definición de TypeScript. Justo después de eso, necesitaba actualizar la definición de TypeScript (TSD) para Angular2 tsd install angular2 .

Después de hacer esto, seguía recibiendo errores de mi archivo boot.js.

En lugar de esta import {AppComponent} from ''./app.component''

Necesitaba escribirlo como esta import {AppComponent} from ''../app.component.js''

¡Ahora funciona! https://github.com/leongaban/angular2quickstart

Un problema molesto es que npm start todavía no está compilando automáticamente los archivos mecanografiados, por lo que todavía tengo que compilar manualmente cada archivo .ts a mano tsc app.component.ts --module system

Si está siguiendo el tutorial de Actualización a Angular2, esto puede morderlo:

Asegúrese de que todavía no está cargando manualmente sus archivos javascript convertidos cuando convierta los archivos a mecanografiado y use los cargadores de módulos para cargarlos.

Había convertido algunos archivos a TS, pero todavía estaba cargando los archivos JS originales (ahora transpilados) en el index.html. Si hace esto, seguirá obteniendo "require no está definido" porque la biblioteca "require" aún no se ha cargado.

En pocas palabras : si obtiene "require no está definido", coloque una declaración de depurador antes de la línea ofensiva (para mí, fue importar {Injectable} de ''@ angular / core''), observe qué archivos de origen se han cargado y asegúrese de que todavía no está cargando el archivo manualmente.