Hello World Angular2應用程序打字稿

我在angular2中練習我的第一個程序，並且與預期輸出有一些偏差。Hello World Angular2應用程序打字稿

typings.json：

{ 
    "ambientDependencies": { 
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd", 
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b" 
    } 
}

tsconfig.json

{ 

    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
}

的package.json

{ 
    "name": "angular2-helloworld-example", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "lite": "lite-server", 
    "typings": "typings", 
    "postinstall": "typings install" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "angular2": "2.0.0-beta.15", 
    "systemjs": "0.19.26", 
    "es6-shim": "^0.35.0", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "zone.js": "0.6.10" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.8.10", 
    "typings":"^0.7.12" 
    } 
}

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My First Angular 2 App</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- 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/es6/dev/src/testing/shims_for_IE.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/main') 
      .then(null, console.error.bind(console)); 
    </script> 
    </head> 

    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

裏面的app文件夾有2個文件：

app.component.ts

import { Component } from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: '<h1> Hello </h1>' 
}) 
export class AppComponent {  
}

main.ts

import { bootstrap } from 'angular2/platform/browser'; 
import { AppComponent } from './app.component'; 

bootstrap(AppComponent);

當我運行命令，故宮啓動服務器運行的是沒有任何錯誤，但輸出是： 載入中...

我的預期成果是：

'<h1> Hello </h1>'

什麼它，我很想念？

來源

2017-04-16 user1400915

您是嚴重過時。您一年前使用的是Angular 2軟件包。升級！升級將讓你非常痛苦，但如果你不這樣做，沒有人能夠提供任何支持，因爲事情已經發生了根本性的變化。 –

@AluanHaddad：請給我一個適當的參考學習材料與更新的配置。上面的例子是我最終得到的。 – user1400915

老實說，我只是從https://angular.io/docs/ts/latest/quickstart.html開始，它聽起來並不像你有很多代碼。他們引入了_many_，_many_概念，大量的複雜性，與ES模塊一起存在的自己的模塊系統，改變了3次路由等。 –

我已經找到了解決辦法，

在app.component.ts我必須使用的template代替templateUrl

來源

2017-04-16 03:54:32 user1400915

Hello World Angular2應用程序打字稿

回答

相關問題