角度2應用程序不加載，但我沒有得到任何錯誤

當我加載我的打字稿角度2測試應用程序它不會按預期加載。角度2應用程序不加載，但我沒有得到任何錯誤

我總是看到「正在加載...」my-app在索引html文件中是什麼。

我也得到加油車控制檯沒有錯誤：/

任何人看到這個錯誤嗎？

INDEX

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <title>test</title> 
    <script src="~/lib/es6-shim.js"></script> 
    <script src="~/lib/es6-promise.js"></script> 
    <script src="~/lib/system-polyfills.js"></script> 
    <script src="~/lib/angular2-polyfills.js"></script> 
    <script src="~/lib/system.js"></script> 
    <script src="~/lib/Rx.js"></script> 
    <script src="~/lib/angular2.js"></script> 
    <script src="~/lib/http.dev.js"></script> 
    <script src="~/lib/router.dev.js"></script> 
    <script> 
      System.config({ 
       packages: { 
        app: { 
         format: 'register', 
         defaultExtension: 'js' 
        } 
       } 
      }); 
      System.import('app/main') 
        .then(null, console.error.bind(console)); 
    </script> 
</head> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html>

main.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 

import {provide} from 'angular2/core'; 
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {AppComponent} from './app.component' 

bootstrap(AppComponent).catch(err => console.error(err));

app.component.ts

import {Component} from 'angular2/core'; 
@Component({ 
    selector: 'my-app', 
    // providers: [...FORM_PROVIDERS], 
    // directives: [...ROUTER_DIRECTIVES, RouterActive], 
    pipes: [], 
    styles: [], 
    template: ` 
     <h1>Hello {{ name }}</h1>  
    ` 
}) 
export class AppComponent { 
    angularclassLogo = 'assets/img/angularclass-avatar.png'; 
    name = 'Angular 2 Webpack Starter'; 
    url = 'https://twitter.com/AngularClass'; 
    constructor() { 

    } 
}

來源

2016-02-27 Elisabeth

該代碼看起來對我來說確實很好。我甚至在我的設置中嘗試過它，它在beta.7上工作正常。你的.ts文件是否被編譯爲.js ?,你也可以在main.ts – Abdulrahman

之前的bootstrap（..）之前放一個console.log，你的代碼似乎是完美的。與@Abdulrahman相同，你的代碼在我的系統上工作正常。再次檢查您的控制檯是否正確加載文件？ –

我確實看着控制檯。沒有什麼... – Elisabeth

嘗試學習的偉大昂ular2 Plunker https://angular.io/resources/live-examples/quickstart/ts/plnkr.html（打字稿）

您使用的打字稿，但不要把它包含在HTML和systemjs正確配置：

// Missing typescript transpiler 
<script src="https://code.angularjs.org/tools/typescript.js"></script> 

<script> 
System.config({ 
    transpiler: 'typescript',       // <-- missing! 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    packages: {'app': {defaultExtension: 'ts'}} // <-- you have bad extension 
}); 
System.import('app/main')    // <-- main.ts should be inside 'app' folder! 
     .then(null, console.error.bind(console)); 
... 
</script>

另外，我不認爲這是確定使用波浪號~腳本的src屬性中的字符。

UPDATE

如果你已經有.ts代碼transpiled爲.js，請確保您有實驗裝飾編譯啓用它 - 你tsconfig.json應該是與此類似：

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "experimentalDecorators": true 
    } 
}

來源

2016-02-27 11:25:16 mseimys

爲什麼我應該在我的index.html文件中包含typescript？我將.ts文件轉換爲。js文件和那些.js文件被systemJS包含了！因爲我使用了一個asp.net .cshtml文件，所以可以使用代字號。 – Elisabeth

這是我在你的第一篇文章中遺漏的重要信息。用另一個猜測更新了我的答案。 – mseimys

我也有這個，否則我會得到transpile異常（我已經得到;-)）。但是我發現了這個錯誤。我清除了我的transpile目標文件夾並重新編譯了所有內容，然後再次運行？！奇... – Elisabeth

我的模板有問題。我從應用中刪除了Mobx和ng2-mobx，但忘記從模板中刪除*mobxAutorun。刪除指令使其工作。（顯然Angular不會顯示任何錯誤，如果它們在模板中，這可能實際上是一個功能，所以如果你有一個ngIf失敗，它會認爲如果是false，而不是顯示錯誤。不知道是否有可能改變這種行爲。）

來源

2017-01-27 15:59:13

角度2應用程序不加載，但我沒有得到任何錯誤

回答

相關問題