角2不加载组件

我尝试Angular2，我开始用一个例子here 角2不加载组件

我可以运行NPM安装和NPM开始没有错误，但没有加载组件。选择器指向我的应用程序，但标记中的内容永远不会被替换。我最终在浏览器中看到“正在加载...”。

使用复制粘贴从样本中直接复制所有代码。我没有编辑任何东西。我想知道样本是不是工作，或者如果这可能是由我的开发环境造成的？

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" 
    ] 
}

typings.json

{ 
    "globalDependencies": { 
    "core-js": "registry:dt/core-js#0.0.0+20160602141332", 
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 
    "node": "registry:dt/node#6.0.0+20160621231320" 
    } 
}

的package.json

{ 
    "name": "angular2-demo", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "concurrent \"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.7", 
    "systemjs": "0.19.22", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.33.3", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "zone.js": "0.5.15" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.1.0", 
    "typescript": "^1.7.5", 
    "typings":"^0.6.8" 
    } 
}

environment_app.component.ts

import {Component, View} from "angular2/core"; 

@Component({ 
    selector: 'my-app' 
}) 

@View({ 
    template: '<h2>My First Angular 2 App</h2>' 
}) 

export class AppComponent { 

}

个

environment_main.ts

import {bootstrap} from "angular2/platform/browser" 
import {AppComponent} from "./environment_app.component" 

bootstrap(AppComponent);

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Hello World</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script> 
    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: {'app': {defaultExtension: 'ts'}}, 
     map: { 'app': './angular2/src/app' } 
     }); 
     System.import('app/environment_main') 
      .then(null, console.error.bind(console)); 
    </script> 
    </head> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html>

来源

2017-05-29 why_vincent

您可以发布plunker对于相同的？ –

一个建议

如果您正在寻找在角开始尝试和使用的角度CLI来构建项目。

角CLI链接 - https://cli.angular.io/ 创建使用

ng new my-project 
cd my-project 
ng serve

，你也可以检查我的回购，如果你希望在GH-页

托管项目

链接 - https://rahulrsingh09.github.io/AngularConcepts/

来源

2017-05-29 12:22:19

为了澄清，我的问题是为什么我描述的问题不起作用。 –

你可以发布一个相同的蹲点吗 –

我没有使用过蹲点，但我去了该网站。如何让我的文件夹结构与我的本地项目一样？ –

角2不加载组件

回答

相关问题