Question

我开始学习Angular2并尝试了＃34; Hello world＆＃34;程序。我创建了一个.ts文件，如下所示：

appComponent.ts

import {
  NgModule,
  Component
} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platfromBrowserDynamic} from '@angular/platfrom-browser-dynamic';

@Component({
  selector:'hello-world',
  template:`
  <div>
    Hello world
  </div>`
})
class HelloWorld {
}
@NgModule({
  declaration: [HelloWorld],
  imports:[BrowserModule],
  bootStrap:[HelloWorld],
})
class HelloWorldAppModuel{
}

platformBrowserDynamic().bootstrapModule(HelloWorldAppModuel);

但是当我在Tomcat中部署并运行此代码时，它并没有显示任何内容，但它应该显示＆＃34; Hello World＆＃34;。我无法理解为什么UI中没有出现任何内容。

＆＃13;

/* Importing Component decorator function from anularjs library module */
System.register(['@angular/core', '@angular/platform-browser'], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    var __metadata = (this && this.__metadata) || function (k, v) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
    };
    var core_1, platform_browser_1;
    var HelloWorld, HelloWorldAppModuel;
    return {
        setters:[
            function (core_1_1) {
                core_1 = core_1_1;
            },
            function (platform_browser_1_1) {
                platform_browser_1 = platform_browser_1_1;
            }],
        execute: function() {
            HelloWorld = (function () {
                function HelloWorld() {
                }
                HelloWorld = __decorate([
                    core_1.Component({
                        selector: 'hello-world',
                        template: "\n<div>\nHello world\n</div>\n"
                    }), 
                    __metadata('design:paramtypes', [])
                ], HelloWorld);
                return HelloWorld;
            }());
            HelloWorldAppModuel = (function () {
                function HelloWorldAppModuel() {
                }
                HelloWorldAppModuel = __decorate([
                    core_1.NgModule({
                        declaration: [HelloWorld],
                        imports: [platform_browser_1.BrowserModule],
                        bootStrap: [HelloWorld],
                    }), 
                    __metadata('design:paramtypes', [])
                ], HelloWorldAppModuel);
                return HelloWorldAppModuel;
            }());
            platformBrowserDynamic().bootstrapModule(HelloWorldAppModuel);
        }
    }
});
//# sourceMappingURL=appComponent.js.map

＆＃13;

<html>
<head>
<title>Angular -2     
</title>    
<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>
    
</head>
    <body>
        <script src="../systemjs.config.js"></script>
    <script>
        System.import('appComponent.js')
            .then(null,console.error.bind(consol));
        </script>
        <hello-world></hello-world>
    </body>
</html>

＆＃13;

＆＃13; main.ts文件

import {bootStrap} from 'angular2/platform/browser'

import {AppComponent} from './appComponent'

bootstrap(AppComponent);

PFB我的片段。发生了什么事？ 编辑1：
我在Chrome中检查过这个东西就像是这样的控制台中的shwos

Uncaught ReferenceError: consol is not defined(…)(anonymous function) @ (index):15
system.src.js:1154 GET http://localhost:8080/angularAssign/@angular/core 404 (Not Found)fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1710ZoneAwarePromise @ zone.js:563(anonymous function) @ system.src.js:1709(anonymous function) @ system.src.js:2734(anonymous function) @ system.src.js:3308(anonymous function) @ system.src.js:3575(anonymous function) @ system.src.js:3960(anonymous function) @ system.src.js:4419(anonymous function) @ system.src.js:4671(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ zone.js:306Zone.run @ zone.js:201(anonymous function) @ zone.js:550ZoneDelegate.invokeTask @ zone.js:339Zone.runTask @ zone.js:237drainMicroTaskQueue @ zone.js:456ZoneTask.invoke @ zone.js:408
zone.js:443 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:8080/angularAssign/@angular/core
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:8080/node_modules/zone.js/dist/zone.js:745:30)
        at ZoneDelegate.invokeTask (http://localhost:8080/node_modules/zone.js/dist/zone.js:339:38)
        at Zone.runTask (http://localhost:8080/node_modules/zone.js/dist/zone.js:237:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:8080/node_modules/zone.js/dist/zone.js:405:34)
    Error loading http://localhost:8080/angularAssign/@angular/core as "@angular/core" from http://localhost:8080/angularAssign/appComponent.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:8080/angularAssign/@angular/core(…)consoleError @ zone.js:443drainMicroTaskQueue @ zone.js:472ZoneTask.invoke @ zone.js:408
zone.js:445 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:8080/angularAssign/@angular/core(…)consoleError @ zone.js:445drainMicroTaskQueue @ zone.js:472ZoneTask.invoke @ zone.js:408
system.src.js:1154 GET http://localhost:8080/angularAssign/@angular/platform-browser 404 (Not Found)

编辑2：这是我的systemjs.config.js文件：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

编辑3：在编辑我的package.json文件之后

{
  "name": "angularjs2-app",
  "version": "1.0.0",
  "scripts": {
    "start": "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.14",
     "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",

    "angular-in-memory-web-api": "~0.1.5",
    "core-js": "^2.4.1",
    "systemjs": "0.19.25",
    "es6-shim": "^0.35.0",
     "es6-promise": "^3.0.2",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"

  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.9",
    "typings":"^0.7.12"
  }
}

大部分错误已经消失，但仍然存在一个错误

zone.js:306 Error: ReferenceError: platformBrowserDynamic is not defined
        at execute (http://localhost:3000/angularAssign/appComponent.js:50:13)
        at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:306:29)
        at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:201:44)
    Error loading http://localhost:3000/angularAssign/appComponent.js

请让我继续添加剩下的内容？

Answer 1

这是一个工作示例，以及在创建新组件时要做的一些事情，

无论何时创建组件，都必须将其添加到

app.module.ts 实施例

import { NgModule }                         from '@angular/core';
import { BrowserModule }                    from '@angular/platform-browser';
    import { HelloComponent }                  from './hello.component';
    @NgModule({
        declarations: [ HelloComponent ],
        imports: [
            HelloComponent,
        ],
        bootstrap: [AppComponent]
    })
    export class AppModule {

    }

然后创建路线，

app.routing.ts

import { Routes, RouterModule }     from "@angular/router";
import { HelloComponent }                  from './hello.component';

const APP_ROUTES: Routes = [
    { path: '', component: HelloComponent }
];
export const routing = RouterModule.forRoot(APP_ROUTES);

然后你将有两个组件文件，

哪一个是

hello.component.ts

   import { Component, OnInit } from '@angular/core';

    @Component({
      templateUrl: './hello.component.html',
    })

    export class HelloComponent {

      constructor() { }

    }

正如您可以看到的那样，使用模板并注入html我指定了一个模板。现在它将加载我指定的html文件。所以你的上一个文件是，

hello.component.html

确保将所有这些组合在一起并运行。然后，每次要添加新组件或视图时，请按照以下步骤操作。

组件不会显示在UI页面中

1 个答案: