所以我在用角度2显示第一个组件时遇到问题.我遵循了这个发布设置打字稿. 我遵循了5分钟快速入门指南在Angular网站上找到 使我的第一个组件工作.我在控制台中没有收到任何错误或其他信息，但在浏览器中确实看到了加载中的....有人知道我做错了吗?
So I am having an issue with displaying my first component in angular 2. I followed this post to setup typescript. I followed the 5 min quick start guide here on Angular website to get my first component working. I don't get an error or anything in the console but I do see loading.... in the browser. Does anyone know what I did wrong?
package.json文件
package.json file
{ "name": "budget_calculator", "version": "1.0.0", "dependencies": { "@angular/common": "2.0.0-rc.1", "@angular/compiler": "2.0.0-rc.1", "@angular/core": "2.0.0-rc.1", "@angular/http": "2.0.0-rc.1", "@angular/platform-browser": "2.0.0-rc.1", "@angular/platform-browser-dynamic": "2.0.0-rc.1", "@angular/router": "2.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.1", "@angular/upgrade": "2.0.0-rc.1", "systemjs": "0.19.27", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", "angular2-in-memory-web-api": "0.0.10", "bootstrap": "^3.3.6" } }main.ts
import { bootstrap } from '@angular/platform-browser-dynamic'; import { Navigation } from './components/navponent'; bootstrap(Navigation);navponent.ts
navponent.ts
import {Component} from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Angular 2 is present</h1>' }) export class Navigation { }index.html
index.html
<!DOCTYPE html> <html lang="en"> <head> <!-- Load libraries for Angular 2--> <script src="node_modules/core-js/client/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> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('./app/main').then(null, console.error.bind(console)); </script> </head> <body> <header> <my-app> Loading..... </my-app> </header> </body> </html>项目结构
node node_modules src -> main -> webapp -> node_modules -> app -> components - navponent.js.map - navponent.d.ts - navponent.ts - navponent.js - main.d.ts - main.js - main.js.map - main.ts - index.htmlJavaScript控制台错误
Javascript console error
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (app, line 0) [Error] Error: invoke@localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:323:34 runGuarded@localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:230:54 localhost:8080/BudgetCalculator/node_modules/zone.js/dist/zone.js:206:40 Error loading localhost:8080/BudgetCalculator/app (anonymous function) (index.html:19) invoke (zone.js:323) run (zone.js:216) (anonymous function) (zone.js:571) invokeTask (zone.js:356) runTask (zone.js:256) drainMicroTaskQueue (zone.js:474) g (shim.min.js:8:10178) (anonymous function) (shim.min.js:8:10300) k (shim.min.js:8:14323)推荐答案
您需要使用systemjs映射包@angular/core，@angular/common ...等.否则，它将如何知道在哪里找到它们?
You need to map your packages @angular/core,@angular/common... etc using systemjs. Otherwise, how would it know where to find them?
创建一个名为systemjs.config.js
/** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs' }; // 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 ngPackageNames = [ 'common', 'compiler', 'core', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ]; // Add package entries for angular packages ngPackageNames.forEach(function(pkgName) { packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages } System.config(config); })(this);然后，在您的index.html中，导入您创建的文件:
Then, in your index.html, import the file you created:
<script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script>请注意，您应该从index.html
System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } });上面的代码摘自最底部的 angular2快速入门页页面的内容.
The code above is taken from angular2 quick start page at the very bottom of the page.
更多推荐
Angular 2和Eclipse
发布评论