Question

我是来自Python背景的Angular2的新手，我确实在我正在做的Angular2教程中完全迷失了。我有一个gulpfile设置来编译我的所有打字稿文件，并在浏览器中提供给我。我创建了一个简单的组件，并尝试使用Angular2 Bootstrap函数来引导应用程序。当我查看终端时，我可以看到所有gulp任务运行顺利，没有错误或问题，但在浏览器中，用我的Angular2组件替换的html元素没有做任何事情？我对我的tsconfig文件做了一些更改，以摆脱我以前得到的一些错误，所以也许这是我改变的配置，不允许编写打字稿，但我不确定，因为没有任何错误终点站。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types" : [
      "core-js"
    ]
  },
  "exclude": [
    "node_modules"
  ],
  "files": []
}

gulpfile.js

var gulp = require('gulp')
var webserver = require('gulp-webserver')
var typescript = require('gulp-typescript')
var sourcemaps = require('gulp-sourcemaps')
var tscConfig = require('./tsconfig.json')

var appSrc = "./builds/development/"
var tsSrc = "./process/typescript/"

gulp.task('copylibs', function(){
    return gulp
        .src([
            'node_modules/es6-shim/es6-sham.min.js',
            'node_modules/systemjs/dist/system-polyfills.js',
            'node_modules/angular2/bundles/angular2-polyfills.js',
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/rxjs/bundles/Rx.js',
            'node_modules/angular2/bundles/angular2.dev.js',
        ])
        .pipe(gulp.dest(appSrc + 'js/lib/angular2'));
});

gulp.task('typescript', function(){
    return gulp
        .src(tsSrc + '**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(typescript(tscConfig.compilerOptions))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(appSrc + 'js/'))
});

gulp.task('watch', function(){
    gulp.watch(tsSrc + '**/*.ts', ['typescript']);
    gulp.watch(appSrc + 'html/*.html', ['html']);
});

gulp.task('webserver', function(){
    gulp.src(appSrc)
        .pipe(webserver({
            livereload: true,
            open: true,
            port: 9000
        }));
});

gulp.task('default', ['copylibs', 'typescript', 'watch', 'webserver'])

boot.ts

import {Component} from 'angular2/core'
import {bootstrap} from 'angular2/platform/browser'

@Component({
    selector: 'myapp', 
    template: '<h1>Welcome to our app</h1>'
})

class AppComponent {

}

bootstrap(AppComponent)

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Learn AngularJS2: The Basics</title>

    <!-- Scripts to allow Angular2 and Typescript to work on older browsers -->
    <script type="text/javascript" src="js/lib/angular2/es6-sham.min.js" />
    <script type="text/javascript" src="js/lib/angular2/system-polyfills.js" />
    <script type="text/javascript" src="js/lib/angular2/angular2-polyfills.js" />

    <!-- Script for loading Typescript modules -->
    <script type="text/javascript" src="js/lib/angular2/system.src.js" />

    <!-- Something to do with 'observables' -->
    <script type="text/javascript" src="js/lib/angular2/Rx.js" />

    <!-- Angular Script -->
    <script type="text/javascript" src="js/lib/angular2/angular2.dev.js" />

    <!-- defaultExtension is 'js' so whenever we import a module, we don't have to include the js at the end. -->
    <script type="text/javascript">
        System.config({
            packages: {
                js: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('js/boot.js')
            .then(null, console.error.bind(console));
    </script>

</head>
<body>
    <myapp>Loading...</myapp>
</body>
</html>

目录树

├── app.js
├── app.ts
├── builds
│   └── development
│       ├── index.html
│       └── js
│           ├── boot.js
│           ├── boot.js.map
│           └── lib
│               └── angular2
│                   ├── Rx.js
│                   ├── angular2-polyfills.js
│                   ├── angular2.dev.js
│                   ├── es6-sham.min.js
│                   ├── system-polyfills.js
│                   └── system.src.js
├── gulpfile.js
├── node_modules
├── process
│   └── typescript
│       └── boot.ts
├── tsconfig.json
├── typings
│   ├── globals
│   │   ├── es6-collections
│   │   │   ├── index.d.ts
│   │   │   └── typings.json
│   │   └── es6-promise
│   │       ├── index.d.ts
│   │       └── typings.json
│   └── index.d.ts
└── typings.json

Angular2 boostrap不能自举？

0 个答案: