Question

当我想使用“npm start”启动我的角度2应用程序时。我收到错误：

我尝试了很多来自互联网的“解决方案”，但没有任何效果。我的版本：

npm - 4.1.2
typings - 2.1.0
node - 7.5.0

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
}
}

polyfills.ts

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV === 'production') {
  // Production
} else {
  // Development and test
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

的package.json

{
  "name": "storyWorld",
  "version": "1.0.0",
  "description": "Write your story.",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.35",
    "@types/node": "^6.0.63",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "node-sass": "^4.5.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.13.1",
    "typescript": "~2.0.10",
    "webpack": "2.2.0",
    "webpack-dev-server": "2.2.0-rc.0",
    "webpack-merge": "^2.4.0"
  }
}

webpack.common.js

    var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [{
          loader: 'awesome-typescript-loader',
          options: { configFileName: helpers.root('src', 'tsconfig.json') }
        } , 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader'
      },
      {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
        }
    ]
  },

  plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

Answer 1

<强> tsconfig.json：

compilerOptions: {
   ...
   "typeRoots": [ "../node_modules/@types" ],
   ...
}

或

<强> main.ts：

/// <reference types="node" />

Answer 2

<强> tsconfig.json

class Foo implements MongoDB\BSON\Serializable
{
   public $bar;

   public function __construct($bar)
   {
       $this->id = new MongoDB\BSON\ObjectID;
       $this->bar = (string) $bar;
   }

   function bsonSerialize()
   {
       return [
           '_id' => $this->id,
           'Bar' => $this->bar,
       ];
   }

   function bsonUnserialize(array $data)
   {
       $this->id = $data['_id'];
       $this->bar = $data['Bar'];
   }

＆＃34;类型＆＃34;属性会删除与“要求”，“处理”相关的错误。和＆＃34; lib＆＃34;会删除一些与Map相关的其他错误，......

Answer 3

基于@ jordan28的答案，我还需要向types中tsconfig.app.json文件的src属性数组中添加“节点”，如here所述

Answer 4

对于Ionic 3.9.9 + Angular 5.0.0 + TypeScript 2.4.2，我必须这样做：

tsconfig.json

"compilerOptions": {
    ...,
    "baseUrl": ".",
    "typeRoots": [ "node_modules/@types" ],
    "types": [ "node" ]
},

package.json

"devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "@types/node": "7.0.7",
    "typescript": "2.4.2"
},

然后在任何组件或提供程序中均可使用package.json版本属性：

this.version = `v${process.env.npm_package_version}`;

哪个会在这样的视图中显示：

v4.2.0

TS2304：找不到名称要求和处理

4 个答案: