带有Typescript的Angular2 – 加载angular2 / platform / browse

发布时间：2020-12-17 06:48:30 所属栏目：安全来源：网络整理

导读：我花了太多时间在这上面,但我陷入困境,无法弄清楚如何使用Typescript运行Angular2.我一直在为组件获得404：从http://localhost:5000/appScripts/boot.js加载http://localhost:5000/angular2/platform/browser为“angular2 / platform / browser”时出错这

我花了太多时间在这上面,但我陷入困境,无法弄清楚如何使用Typescript运行Angular2.我一直在为组件获得404：

从http://localhost:5000/appScripts/boot.js加载http://localhost:5000/angular2/platform/browser为“angular2 / platform / browser”时出错

enter image description here

这是我的文件夹结构：

enter image description here

我的index.html是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angular 2 with ASP.NET Core</title>
<!-- 1. Load libraries -->
<script src="libs/es6-shim/es6-shim.min.js"></script>
<script src="libs/zone.js/dist/zone.js"></script>
<script src="libs/reflect-metadata/Reflect.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>


<!-- 2. Configure SystemJS -->
<script src="./appScripts/config.js"></script>
<script>

    System.import('appScripts/boot')
          .then(null,console.error.bind(console));
</script>

</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

boot.ts：

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
    import {bootstrap} from 'angular2/platform/browser'
    import {AppComponent} from './app'
    bootstrap(AppComponent);

该应用程序：

/// <reference path="../typings/jquery/jquery.d.ts" />
    /// <reference path="../typings/angularjs/angular-route.d.ts" />
    /// <reference path="../typings/angularjs/angular.d.ts" />

    import {Component} from 'angular2/core';
    @Component({
    selector: 'my-app',template: 'My First Angular 2 App'
    })
    export class AppComponent { }

config.js

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'appScripts',// 'dist','rxjs': 'libs/rxjs','angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api','@angular': 'libs/@angular'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'boot.js',defaultExtension: 'js' },'rxjs': { defaultExtension: 'js' },'angular2-in-memory-web-api': { defaultExtension: 'js' },};

    var packageNames = [
      '@angular/common','@angular/compiler','@angular/core','@angular/http','@angular/platform-browser','@angular/platform-browser-dynamic','@angular/router','@angular/router-deprecated','@angular/testing','@angular/upgrade',];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js',defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = { main: 'index.js',defaultExtension: 'js' };
    });

    var config = {
        map: map,packages: packages
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

这里有更多的文件夹结构,可以让您更好地了解项目结构.

enter image description here

这是我的package.json

{
  "version": "1.0.0","name": "ASP.NET","private": true,"dependencies": {
    "@angular/common": "2.0.0-rc.1","@angular/compiler": "2.0.0-rc.1","@angular/core": "2.0.0-rc.1","@angular/http": "2.0.0-rc.1","@angular/platform-browser": "2.0.0-rc.1","@angular/platform-browser-dynamic": "2.0.0-rc.1","@angular/router": "2.0.0-rc.1","@angular/router-deprecated": "2.0.0-rc.1","@angular/upgrade": "2.0.0-rc.1","systemjs": "0.19.27","es6-shim": "^0.35.0","reflect-metadata": "0.1.2","rxjs": "5.0.0-beta.6","zone.js": "^0.6.12","angular2-in-memory-web-api": "0.0.7"
  },"devDependencies": {
    "gulp": "^3.9.0","gulp-autoprefixer": "~3.1.0","gulp-concat": "~2.6.0","gulp-imagemin": "~2.4.0","imagemin-pngquant": "~4.2.0","jshint": "2.9.2","gulp-jshint": "2.0.0","jshint-stylish": "~2.1.0","rimraf": "~2.5.1","gulp-minify-css": "~1.2.4","gulp-sass": "2.2.0","gulp-uglify": "~1.5.1","gulp-sourcemaps": "~1.6.0","gulp-plumber": "1.1.0","gulp-notify": "2.2.0","beepbeep": "1.2.0","gulp-rename": "1.2.2","gulp-sourcemap": "1.0.1","gulp-clean-css": "2.0.6","main-bower-files": "2.13.0","gulp-filter": "4.0.0","typescript": "^1.8.10","gulp-typescript": "^2.13.1","live-server": "1.0.0","typings": "^1.0.4","gulp-tsc": "^1.1.5"
  }
}

提前感谢您的帮助,如果我能提供更多详细信息,请告诉我.

解决方法

你正在使用角度的rc.1版本,但试图导入测试版.

你需要使用@ angular / ..这样：

import { bootstrap } from '@angular/platform-browser-dynamic';

import { Component } from '@angular/core'; // instead of 'angular2/core'
....

有关更多详细信息,请参阅changelog https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc0-2016-05-02

To import various symbols please adjust the paths in the following
way:

angular2/core -> @angular/core
angular2/compiler -> @angular/compiler
angular2/common -> @angular/common
angular2/platform/browser -> @angular/platform-browser + @angular/platform-browser-dynamic
angular2/platform/server -> @angular/platform-server
angular2/testing -> @angular/core/testing
angular2/upgrade -> @angular/upgrade
angular2/http -> @angular/http
angular2/router -> @angular/router-deprecated (from beta.17 for backwards compatibility)
new package: @angular/router - component router with several breaking changes

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!